From 77d0714e33b462eb03ce8a9be30c847a8452cf31 Mon Sep 17 00:00:00 2001
From: Ai Ling <50992674+ailing35@users.noreply.github.com>
Date: Sun, 23 Oct 2022 01:35:03 +0800
Subject: [PATCH] [offers][fix] Refactor and fix offer analysis (#413)

---
 .../offersSubmission/OfferProfileSave.tsx     |   2 +-
 .../offersSubmission/OffersSubmissionForm.tsx |  17 ++-
 .../analysis/OfferAnalysis.tsx                |   5 +-
 .../analysis/OfferPercentileAnalysis.tsx      |  27 ----
 .../analysis/OfferPercentileAnalysisText.tsx  |  27 ++++
 .../analysis/OfferProfileCard.tsx             |  13 +-
 .../submissionForm/BackgroundForm.tsx         |  12 +-
 .../submissionForm/OfferDetailsForm.tsx       |  32 +++--
 .../offers/profile/EducationCard.tsx          |  16 +--
 .../components/offers/profile/OfferCard.tsx   |   4 +-
 .../offers/profile/ProfileDetails.tsx         |  25 ++--
 .../offers/profile/ProfileHeader.tsx          |  48 ++++---
 .../offers/profile/ProfilePhotoHolder.tsx     |  12 +-
 apps/portal/src/components/offers/types.ts    |  71 +++++-----
 apps/portal/src/mappers/offers-mappers.ts     |  16 ++-
 .../pages/offers/profile/[offerProfileId].tsx | 121 ++++++++++--------
 .../offers/profile/edit/[offerProfileId].tsx  |  10 +-
 .../router/offers/offers-analysis-router.ts   |   1 -
 .../router/offers/offers-profile-router.ts    |   4 +-
 apps/portal/src/types/offers.d.ts             |   1 +
 20 files changed, 255 insertions(+), 209 deletions(-)
 delete mode 100644 apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysis.tsx
 create mode 100644 apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysisText.tsx

diff --git a/apps/portal/src/components/offers/offersSubmission/OfferProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OfferProfileSave.tsx
index 071da82a..9ba39af3 100644
--- a/apps/portal/src/components/offers/offersSubmission/OfferProfileSave.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OfferProfileSave.tsx
@@ -84,7 +84,7 @@ export default function OfferProfileSave({
             onClick={saveProfile}
           />
         </div>
-        <div className="mb-10">
+        <div>
           <Button
             icon={EyeIcon}
             label="View your profile"
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 10f92618..931e94f3 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
+import { JobType } from '@prisma/client';
 import { Button } from '@tih/ui';
 
 import { Breadcrumbs } from '~/components/offers/Breadcrumb';
@@ -13,7 +14,6 @@ import type {
   OfferFormData,
   OffersProfileFormData,
 } from '~/components/offers/types';
-import { JobType } from '~/components/offers/types';
 import type { Month } from '~/components/shared/MonthYearPicker';
 
 import { cleanObject, removeInvalidMoneyData } from '~/utils/offers/form';
@@ -25,7 +25,7 @@ import type { CreateOfferProfileResponse } from '~/types/offers';
 const defaultOfferValues = {
   comments: '',
   companyId: '',
-  jobType: JobType.FullTime,
+  jobType: JobType.FULLTIME,
   location: '',
   monthYearReceived: {
     month: getCurrentMonth() as Month,
@@ -36,18 +36,18 @@ const defaultOfferValues = {
 
 export const defaultFullTimeOfferValues = {
   ...defaultOfferValues,
-  jobType: JobType.FullTime,
+  jobType: JobType.FULLTIME,
 };
 
 export const defaultInternshipOfferValues = {
   ...defaultOfferValues,
-  jobType: JobType.Intern,
+  jobType: JobType.INTERN,
 };
 
 const defaultOfferProfileValues = {
   background: {
     educations: [],
-    experiences: [{ jobType: JobType.FullTime }],
+    experiences: [{ jobType: JobType.FULLTIME }],
     specificYoes: [],
     totalYoe: 0,
   },
@@ -90,7 +90,12 @@ export default function OffersSubmissionForm({
 
   const formSteps: Array<FormStep> = [
     {
-      component: <OfferDetailsForm key={0} />,
+      component: (
+        <OfferDetailsForm
+          key={0}
+          defaultJobType={initialOfferProfileValues.offers[0].jobType}
+        />
+      ),
       hasNext: true,
       hasPrevious: false,
       label: 'Offer details',
diff --git a/apps/portal/src/components/offers/offersSubmission/analysis/OfferAnalysis.tsx b/apps/portal/src/components/offers/offersSubmission/analysis/OfferAnalysis.tsx
index 4b45b3f2..19d944d1 100644
--- a/apps/portal/src/components/offers/offersSubmission/analysis/OfferAnalysis.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/analysis/OfferAnalysis.tsx
@@ -4,7 +4,7 @@ import { HorizontalDivider, Spinner, Tabs } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-import OfferPercentileAnalysis from './OfferPercentileAnalysis';
+import OfferPercentileAnalysisText from './OfferPercentileAnalysisText';
 import OfferProfileCard from './OfferProfileCard';
 import { OVERALL_TAB } from '../../constants';
 
@@ -38,11 +38,12 @@ function OfferAnalysisContent({
   }
   return (
     <>
-      <OfferPercentileAnalysis
+      <OfferPercentileAnalysisText
         companyName={offer.company.name}
         offerAnalysis={offerAnalysis}
         tab={tab}
       />
+      <p className="mt-5">Here are some of the top offers relevant to you:</p>
       {offerAnalysis.topPercentileOffers.map((topPercentileOffer) => (
         <OfferProfileCard
           key={topPercentileOffer.id}
diff --git a/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysis.tsx b/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysis.tsx
deleted file mode 100644
index 1f4107ca..00000000
--- a/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysis.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Analysis } from '~/types/offers';
-
-type OfferPercentileAnalysisProps = Readonly<{
-  companyName: string;
-  offerAnalysis: Analysis;
-  tab: string;
-}>;
-
-export default function OfferPercentileAnalysis({
-  tab,
-  companyName,
-  offerAnalysis: { noOfOffers, percentile },
-}: OfferPercentileAnalysisProps) {
-  return tab === 'Overall' ? (
-    <p>
-      Your highest offer is from {companyName}, which is {percentile} percentile
-      out of {noOfOffers} offers received for the same job type, same level, and
-      same YOE(+/-1) in the last year.
-    </p>
-  ) : (
-    <p>
-      Your offer from {companyName} is {percentile} percentile out of{' '}
-      {noOfOffers} offers received in {companyName} for the same job type, same
-      level, and same YOE(+/-1) in the last year.
-    </p>
-  );
-}
diff --git a/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysisText.tsx b/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysisText.tsx
new file mode 100644
index 00000000..4008d21d
--- /dev/null
+++ b/apps/portal/src/components/offers/offersSubmission/analysis/OfferPercentileAnalysisText.tsx
@@ -0,0 +1,27 @@
+import type { Analysis } from '~/types/offers';
+
+type OfferPercentileAnalysisTextProps = Readonly<{
+  companyName: string;
+  offerAnalysis: Analysis;
+  tab: string;
+}>;
+
+export default function OfferPercentileAnalysisText({
+  tab,
+  companyName,
+  offerAnalysis: { noOfOffers, percentile },
+}: OfferPercentileAnalysisTextProps) {
+  return tab === 'Overall' ? (
+    <p>
+      Your highest offer is from <b>{companyName}</b>, which is{' '}
+      <b>{percentile}</b> percentile out of <b>{noOfOffers}</b> offers received
+      for the same job title and YOE(+/-1) in the last year.
+    </p>
+  ) : (
+    <p>
+      Your offer from <b>{companyName}</b> is <b>{percentile}</b> percentile out
+      of <b>{noOfOffers}</b> offers received in {companyName} for the same job
+      title and YOE(+/-1) in the last year.
+    </p>
+  );
+}
diff --git a/apps/portal/src/components/offers/offersSubmission/analysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offersSubmission/analysis/OfferProfileCard.tsx
index 8d087a0c..50bbcd06 100644
--- a/apps/portal/src/components/offers/offersSubmission/analysis/OfferProfileCard.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/analysis/OfferProfileCard.tsx
@@ -1,9 +1,10 @@
-import { UserCircleIcon } from '@heroicons/react/24/outline';
+import { JobType } from '@prisma/client';
 
 import { HorizontalDivider } from '~/../../../packages/ui/dist';
+import { convertMoneyToString } from '~/utils/offers/currency';
 import { formatDate } from '~/utils/offers/time';
 
-import { JobType } from '../../types';
+import ProfilePhotoHolder from '../../profile/ProfilePhotoHolder';
 
 import type { AnalysisOffer } from '~/types/offers';
 
@@ -29,7 +30,7 @@ export default function OfferProfileCard({
     <div className="my-5 block rounded-lg border p-4">
       <div className="grid grid-flow-col grid-cols-12 gap-x-10">
         <div className="col-span-1">
-          <UserCircleIcon width={50} />
+          <ProfilePhotoHolder size="sm" />
         </div>
         <div className="col-span-10">
           <p className="text-sm	font-semibold">{profileName}</p>
@@ -50,9 +51,9 @@ export default function OfferProfileCard({
         <div className="col-span-1 row-span-3">
           <p className="text-end text-sm">{formatDate(monthYearReceived)}</p>
           <p className="text-end text-xl">
-            {jobType === JobType.FullTime
-              ? `$${income} / year`
-              : `$${income} / month`}
+            {jobType === JobType.FULLTIME
+              ? `${convertMoneyToString(income)} / year`
+              : `${convertMoneyToString(income)} / month`}
           </p>
         </div>
       </div>
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index 534108b5..43acb49f 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -1,4 +1,5 @@
 import { useFormContext, useWatch } from 'react-hook-form';
+import { JobType } from '@prisma/client';
 import { Collapsible, RadioList } from '@tih/ui';
 
 import {
@@ -10,7 +11,6 @@ import {
   titleOptions,
 } from '~/components/offers/constants';
 import type { BackgroundPostData } from '~/components/offers/types';
-import { JobType } from '~/components/offers/types';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 
 import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum';
@@ -239,7 +239,7 @@ function InternshipJobFields() {
 function CurrentJobSection() {
   const { register } = useFormContext();
   const watchJobType = useWatch({
-    defaultValue: JobType.FullTime,
+    defaultValue: JobType.FULLTIME,
     name: 'background.experiences.0.jobType',
   });
 
@@ -251,7 +251,7 @@ function CurrentJobSection() {
       <div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
         <div className="mb-5">
           <FormRadioList
-            defaultValue={JobType.FullTime}
+            defaultValue={JobType.FULLTIME}
             isLabelHidden={true}
             label="Job Type"
             orientation="horizontal"
@@ -259,16 +259,16 @@ function CurrentJobSection() {
             <RadioList.Item
               key="Full-time"
               label="Full-time"
-              value={JobType.FullTime}
+              value={JobType.FULLTIME}
             />
             <RadioList.Item
               key="Internship"
               label="Internship"
-              value={JobType.Intern}
+              value={JobType.INTERN}
             />
           </FormRadioList>
         </div>
-        {watchJobType === JobType.FullTime ? (
+        {watchJobType === JobType.FULLTIME ? (
           <FullTimeJobFields />
         ) : (
           <InternshipJobFields />
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index d380002c..474fd0b0 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
@@ -9,6 +9,7 @@ import { useFormContext } from 'react-hook-form';
 import { useFieldArray } from 'react-hook-form';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
+import { JobType } from '@prisma/client';
 import { Button, Dialog } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
@@ -31,7 +32,6 @@ import FormTextArea from '../../forms/FormTextArea';
 import FormTextInput from '../../forms/FormTextInput';
 import type { OfferFormData } from '../../types';
 import { JobTypeLabel } from '../../types';
-import { JobType } from '../../types';
 import { CURRENCY_OPTIONS } from '../../../../utils/offers/currency/CurrencyEnum';
 
 type FullTimeOfferDetailsFormProps = Readonly<{
@@ -448,7 +448,7 @@ function OfferDetailsFormArray({
       {fields.map((item, index) => {
         return (
           <div key={item.id}>
-            {jobType === JobType.FullTime ? (
+            {jobType === JobType.FULLTIME ? (
               <FullTimeOfferDetailsForm index={index} remove={remove} />
             ) : (
               <InternshipOfferDetailsForm index={index} remove={remove} />
@@ -464,7 +464,7 @@ function OfferDetailsFormArray({
         variant="tertiary"
         onClick={() =>
           append(
-            jobType === JobType.FullTime
+            jobType === JobType.FULLTIME
               ? defaultFullTimeOfferValues
               : defaultInternshipOfferValues,
           )
@@ -474,8 +474,14 @@ function OfferDetailsFormArray({
   );
 }
 
-export default function OfferDetailsForm() {
-  const [jobType, setJobType] = useState(JobType.FullTime);
+type OfferDetailsFormProps = Readonly<{
+  defaultJobType?: JobType;
+}>;
+
+export default function OfferDetailsForm({
+  defaultJobType = JobType.FULLTIME,
+}: OfferDetailsFormProps) {
+  const [jobType, setJobType] = useState(defaultJobType);
   const [isDialogOpen, setDialogOpen] = useState(false);
   const { control } = useFormContext();
   const fieldArrayValues = useFieldArray({ control, name: 'offers' });
@@ -483,17 +489,17 @@ export default function OfferDetailsForm() {
 
   const toggleJobType = () => {
     remove();
-    if (jobType === JobType.FullTime) {
-      setJobType(JobType.Intern);
+    if (jobType === JobType.FULLTIME) {
+      setJobType(JobType.INTERN);
       append(defaultInternshipOfferValues);
     } else {
-      setJobType(JobType.FullTime);
+      setJobType(JobType.FULLTIME);
       append(defaultFullTimeOfferValues);
     }
   };
 
   const switchJobTypeLabel = () =>
-    jobType === JobType.FullTime ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
+    jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
 
   return (
     <div className="mb-5">
@@ -506,9 +512,9 @@ export default function OfferDetailsForm() {
             display="block"
             label={JobTypeLabel.FULLTIME}
             size="md"
-            variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'}
+            variant={jobType === JobType.FULLTIME ? 'secondary' : 'tertiary'}
             onClick={() => {
-              if (jobType === JobType.FullTime) {
+              if (jobType === JobType.FULLTIME) {
                 return;
               }
               setDialogOpen(true);
@@ -520,9 +526,9 @@ export default function OfferDetailsForm() {
             display="block"
             label={JobTypeLabel.INTERN}
             size="md"
-            variant={jobType === JobType.Intern ? 'secondary' : 'tertiary'}
+            variant={jobType === JobType.INTERN ? 'secondary' : 'tertiary'}
             onClick={() => {
-              if (jobType === JobType.Intern) {
+              if (jobType === JobType.INTERN) {
                 return;
               }
               setDialogOpen(true);
diff --git a/apps/portal/src/components/offers/profile/EducationCard.tsx b/apps/portal/src/components/offers/profile/EducationCard.tsx
index 7dd5b155..8c3fea98 100644
--- a/apps/portal/src/components/offers/profile/EducationCard.tsx
+++ b/apps/portal/src/components/offers/profile/EducationCard.tsx
@@ -3,18 +3,10 @@ import {
   LightBulbIcon,
 } from '@heroicons/react/24/outline';
 
-import type { EducationBackgroundType } from '~/components/offers/types';
-
-type EducationEntity = {
-  endDate?: string;
-  field?: string;
-  school?: string;
-  startDate?: string;
-  type?: EducationBackgroundType;
-};
+import type { EducationDisplayData } from '~/components/offers/types';
 
 type Props = Readonly<{
-  education: EducationEntity;
+  education: EducationDisplayData;
 }>;
 
 export default function EducationCard({
@@ -39,9 +31,7 @@ export default function EducationCard({
         </div>
         {(startDate || endDate) && (
           <div className="font-light text-gray-400">
-            <p>{`${startDate ? startDate : 'N/A'} - ${
-              endDate ? endDate : 'N/A'
-            }`}</p>
+            <p>{`${startDate || 'N/A'} - ${endDate || 'N/A'}`}</p>
           </div>
         )}
       </div>
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 8b3c9566..2e779a42 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -6,10 +6,10 @@ import {
 } from '@heroicons/react/24/outline';
 import { HorizontalDivider } from '@tih/ui';
 
-import type { OfferEntity } from '~/components/offers/types';
+import type { OfferDisplayData } from '~/components/offers/types';
 
 type Props = Readonly<{
-  offer: OfferEntity;
+  offer: OfferDisplayData;
 }>;
 
 export default function OfferCard({
diff --git a/apps/portal/src/components/offers/profile/ProfileDetails.tsx b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
index 1707fe42..bf3dd6b2 100644
--- a/apps/portal/src/components/offers/profile/ProfileDetails.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
@@ -3,13 +3,18 @@ import { Spinner } from '@tih/ui';
 
 import EducationCard from '~/components/offers/profile/EducationCard';
 import OfferCard from '~/components/offers/profile/OfferCard';
-import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
-import { EducationBackgroundType } from '~/components/offers/types';
+import type {
+  BackgroundDisplayData,
+  OfferDisplayData,
+} from '~/components/offers/types';
+
+import type { ProfileAnalysis } from '~/types/offers';
 
 type ProfileHeaderProps = Readonly<{
-  background?: BackgroundCard;
+  analysis?: ProfileAnalysis;
+  background?: BackgroundDisplayData;
   isLoading: boolean;
-  offers: Array<OfferEntity>;
+  offers: Array<OfferDisplayData>;
   selectedTab: string;
 }>;
 
@@ -52,7 +57,7 @@ export default function ProfileDetails({
               <BriefcaseIcon className="mr-1 h-5" />
               <span className="font-bold">Work Experience</span>
             </div>
-            <OfferCard offer={background?.experiences[0]} />
+            <OfferCard offer={background.experiences[0]} />
           </>
         )}
         {background?.educations && background?.educations.length > 0 && (
@@ -61,15 +66,7 @@ export default function ProfileDetails({
               <AcademicCapIcon className="mr-1 h-5" />
               <span className="font-bold">Education</span>
             </div>
-            <EducationCard
-              education={{
-                endDate: background.educations[0].endDate,
-                field: background.educations[0].field,
-                school: background.educations[0].school,
-                startDate: background.educations[0].startDate,
-                type: EducationBackgroundType.Bachelor,
-              }}
-            />
+            <EducationCard education={background.educations[0]} />
           </>
         )}
       </>
diff --git a/apps/portal/src/components/offers/profile/ProfileHeader.tsx b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
index ceab5e0e..4ef3c581 100644
--- a/apps/portal/src/components/offers/profile/ProfileHeader.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import {
-  BookmarkSquareIcon,
   BuildingOffice2Icon,
   CalendarDaysIcon,
   PencilSquareIcon,
@@ -10,12 +9,12 @@ import {
 import { Button, Dialog, Spinner, Tabs } from '@tih/ui';
 
 import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
-import type { BackgroundCard } from '~/components/offers/types';
+import type { BackgroundDisplayData } from '~/components/offers/types';
 
 import { getProfileEditPath } from '~/utils/offers/link';
 
 type ProfileHeaderProps = Readonly<{
-  background?: BackgroundCard;
+  background?: BackgroundDisplayData;
   handleDelete: () => void;
   isEditable: boolean;
   isLoading: boolean;
@@ -42,14 +41,14 @@ export default function ProfileHeader({
   function renderActionList() {
     return (
       <div className="space-x-2">
-        <Button
+        {/* <Button
           disabled={isLoading}
           icon={BookmarkSquareIcon}
           isLabelHidden={true}
           label="Save to user account"
           size="md"
           variant="tertiary"
-        />
+        /> */}
         <Button
           disabled={isLoading}
           icon={PencilSquareIcon}
@@ -109,6 +108,13 @@ export default function ProfileHeader({
       </div>
     );
   }
+
+  if (!background) {
+    return null;
+  }
+
+  const { experiences, totalYoe, specificYoes, profileName } = background;
+
   return (
     <div className="h-40 bg-white p-4">
       <div className="justify-left flex h-1/2">
@@ -118,7 +124,7 @@ export default function ProfileHeader({
         <div className="w-full">
           <div className="justify-left flex flex-1">
             <h2 className="flex w-4/5 text-2xl font-bold">
-              {background?.profileName ?? 'anonymous'}
+              {profileName ?? 'anonymous'}
             </h2>
             {isEditable && (
               <div className="flex h-8 w-1/5 justify-end">
@@ -126,22 +132,26 @@ export default function ProfileHeader({
               </div>
             )}
           </div>
-          <div className="flex flex-row">
-            <BuildingOffice2Icon className="mr-2.5 h-5" />
-            <span className="mr-2 font-bold">Current:</span>
-            <span>
-              {`${background?.experiences[0]?.companyName ?? '-'} ${
-                background?.experiences[0]?.jobLevel || ''
-              } ${background?.experiences[0]?.jobTitle || ''}`}
-            </span>
-          </div>
+          {(experiences[0]?.companyName ||
+            experiences[0]?.jobLevel ||
+            experiences[0]?.jobTitle) && (
+            <div className="flex flex-row">
+              <BuildingOffice2Icon className="mr-2.5 h-5" />
+              <span className="mr-2 font-bold">Current:</span>
+              <span>
+                {`${experiences[0]?.companyName || ''} ${
+                  experiences[0]?.jobLevel || ''
+                } ${experiences[0]?.jobTitle || ''}`}
+              </span>
+            </div>
+          )}
           <div className="flex flex-row">
             <CalendarDaysIcon className="mr-2.5 h-5" />
             <span className="mr-2 font-bold">YOE:</span>
-            <span className="mr-4">{background?.totalYoe}</span>
-            {background?.specificYoes &&
-              background?.specificYoes.length > 0 &&
-              background?.specificYoes.map(({ domain, yoe }) => {
+            <span className="mr-4">{totalYoe}</span>
+            {specificYoes &&
+              specificYoes.length > 0 &&
+              specificYoes.map(({ domain, yoe }) => {
                 return (
                   <span
                     key={domain}
diff --git a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
index bb079e5a..8fdb126b 100644
--- a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
+++ b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
@@ -1,6 +1,14 @@
-export default function ProfilePhotoHolder() {
+type ProfilePhotoHolderProps = {
+  size?: 'lg' | 'sm';
+};
+
+export default function ProfilePhotoHolder({
+  size = 'lg',
+}: ProfilePhotoHolderProps) {
+  const sizeMap = { lg: '16', sm: '12' };
   return (
-    <span className="inline-block h-16 w-16 overflow-hidden rounded-full bg-gray-100">
+    <span
+      className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-gray-100`}>
       <svg
         className="h-full w-full text-gray-300"
         fill="currentColor"
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index b89403cf..53b2c36e 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -1,14 +1,11 @@
+import type { JobType } from '@prisma/client';
+
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
 /*
  *  Offer Profile
  */
 
-export enum JobType {
-  FullTime = 'FULLTIME',
-  Intern = 'INTERN',
-}
-
 export const JobTypeLabel = {
   FULLTIME: 'Full-time',
   INTERN: 'Internship',
@@ -26,17 +23,20 @@ export enum EducationBackgroundType {
 
 export type OffersProfilePostData = {
   background: BackgroundPostData;
+  id?: string;
   offers: Array<OfferPostData>;
 };
 
 export type OffersProfileFormData = {
   background: BackgroundPostData;
+  id?: string;
   offers: Array<OfferFormData>;
 };
 
 export type BackgroundPostData = {
   educations: Array<EducationPostData>;
   experiences: Array<ExperiencePostData>;
+  id?: string;
   specificYoes: Array<SpecificYoePostData>;
   totalYoe: number;
 };
@@ -44,6 +44,7 @@ export type BackgroundPostData = {
 type ExperiencePostData = {
   companyId?: string | null;
   durationInMonths?: number | null;
+  id?: string;
   jobType?: string | null;
   level?: string | null;
   location?: string | null;
@@ -57,6 +58,7 @@ type ExperiencePostData = {
 type EducationPostData = {
   endDate?: Date | null;
   field?: string | null;
+  id?: string;
   school?: string | null;
   startDate?: Date | null;
   type?: string | null;
@@ -64,6 +66,7 @@ type EducationPostData = {
 
 type SpecificYoePostData = {
   domain: string;
+  id?: string;
   yoe: number;
 };
 
@@ -72,7 +75,8 @@ type SpecificYoe = SpecificYoePostData;
 export type OfferPostData = {
   comments: string;
   companyId: string;
-  jobType: string;
+  id?: string;
+  jobType: JobType;
   location: string;
   monthYearReceived: Date;
   negotiationStrategy: string;
@@ -87,6 +91,7 @@ export type OfferFormData = Omit<OfferPostData, 'monthYearReceived'> & {
 export type OfferFullTimePostData = {
   baseSalary: Money;
   bonus: Money;
+  id?: string;
   level: string;
   specialization: string;
   stocks: Money;
@@ -95,6 +100,7 @@ export type OfferFullTimePostData = {
 };
 
 export type OfferInternPostData = {
+  id?: string;
   internshipCycle: string;
   monthlySalary: Money;
   specialization: string;
@@ -104,40 +110,41 @@ export type OfferInternPostData = {
 
 export type Money = {
   currency: string;
+  id?: string;
   value: number;
 };
 
-type EducationDisplay = {
-  endDate?: string;
-  field: string;
-  school: string;
-  startDate?: string;
-  type: string;
+export type EducationDisplayData = {
+  endDate?: string | null;
+  field?: string | null;
+  school?: string | null;
+  startDate?: string | null;
+  type?: string | null;
 };
 
-export type OfferEntity = {
-  base?: string;
-  bonus?: string;
-  companyName?: string;
-  duration?: string;
+export type OfferDisplayData = {
+  base?: string | null;
+  bonus?: string | null;
+  companyName?: string | null;
+  duration?: number | null;
   id?: string;
-  jobLevel?: string;
-  jobTitle?: string;
-  location?: string;
-  monthlySalary?: string;
-  negotiationStrategy?: string;
-  otherComment?: string;
-  receivedMonth?: string;
-  stocks?: string;
-  totalCompensation?: string;
-};
-
-export type BackgroundCard = {
-  educations: Array<EducationDisplay>;
-  experiences: Array<OfferEntity>;
+  jobLevel?: string | null;
+  jobTitle?: string | null;
+  location?: string | null;
+  monthlySalary?: string | null;
+  negotiationStrategy?: string | null;
+  otherComment?: string | null;
+  receivedMonth?: string | null;
+  stocks?: string | null;
+  totalCompensation?: string | null;
+};
+
+export type BackgroundDisplayData = {
+  educations: Array<EducationDisplayData>;
+  experiences: Array<OfferDisplayData>;
   profileName: string;
   specificYoes: Array<SpecificYoe>;
-  totalYoe: string;
+  totalYoe: number;
 };
 
 export type CommentEntity = {
diff --git a/apps/portal/src/mappers/offers-mappers.ts b/apps/portal/src/mappers/offers-mappers.ts
index 4faee7ae..eea48397 100644
--- a/apps/portal/src/mappers/offers-mappers.ts
+++ b/apps/portal/src/mappers/offers-mappers.ts
@@ -56,7 +56,13 @@ const analysisOfferDtoMapper = (
   const analysisOfferDto: AnalysisOffer = {
     company: offersCompanyDtoMapper(offer.company),
     id: offer.id,
-    income: { baseCurrency: '', baseValue: -1, currency: '', value: -1 },
+    income: {
+      baseCurrency: '',
+      baseValue: -1,
+      currency: '',
+      id: '',
+      value: -1,
+    },
     jobType: offer.jobType,
     level: offer.offersFullTime?.level ?? '',
     location: offer.location,
@@ -83,6 +89,7 @@ const analysisOfferDtoMapper = (
       offer.offersFullTime.totalCompensation.value;
     analysisOfferDto.income.currency =
       offer.offersFullTime.totalCompensation.currency;
+    analysisOfferDto.income.id = offer.offersFullTime.totalCompensation.id;
     analysisOfferDto.income.baseValue =
       offer.offersFullTime.totalCompensation.baseValue;
     analysisOfferDto.income.baseCurrency =
@@ -91,6 +98,7 @@ const analysisOfferDtoMapper = (
     analysisOfferDto.income.value = offer.offersIntern.monthlySalary.value;
     analysisOfferDto.income.currency =
       offer.offersIntern.monthlySalary.currency;
+    analysisOfferDto.income.id = offer.offersIntern.monthlySalary.id;
     analysisOfferDto.income.baseValue =
       offer.offersIntern.monthlySalary.baseValue;
     analysisOfferDto.income.baseCurrency =
@@ -255,13 +263,14 @@ export const valuationDtoMapper = (currency: {
   baseCurrency: string;
   baseValue: number;
   currency: string;
-  id?: string;
+  id: string;
   value: number;
 }) => {
   const valuationDto: Valuation = {
     baseCurrency: currency.baseCurrency,
     baseValue: currency.baseValue,
     currency: currency.currency,
+    id: currency.id,
     value: currency.value,
   };
   return valuationDto;
@@ -595,11 +604,12 @@ export const dashboardOfferDtoMapper = (
       baseCurrency: '',
       baseValue: -1,
       currency: '',
+      id: '',
       value: -1,
     }),
     monthYearReceived: offer.monthYearReceived,
     profileId: offer.profileId,
-    title: offer.offersFullTime?.title ?? '',
+    title: offer.offersFullTime?.title || offer.offersIntern?.title || '',
     totalYoe: offer.profile.background?.totalYoe ?? -1,
   };
 
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index d6b18e65..6d6c0173 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -5,14 +5,17 @@ import { useState } from 'react';
 import ProfileComments from '~/components/offers/profile/ProfileComments';
 import ProfileDetails from '~/components/offers/profile/ProfileDetails';
 import ProfileHeader from '~/components/offers/profile/ProfileHeader';
-import type { BackgroundCard, OfferEntity } from '~/components/offers/types';
+import type {
+  BackgroundDisplayData,
+  OfferDisplayData,
+} from '~/components/offers/types';
 
 import { convertMoneyToString } from '~/utils/offers/currency';
 import { getProfilePath } from '~/utils/offers/link';
 import { formatDate } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
-import type { Profile, ProfileOffer } from '~/types/offers';
+import type { Profile, ProfileAnalysis, ProfileOffer } from '~/types/offers';
 
 export default function OfferProfile() {
   const ErrorPage = (
@@ -21,10 +24,11 @@ export default function OfferProfile() {
   const router = useRouter();
   const { offerProfileId, token = '' } = router.query;
   const [isEditable, setIsEditable] = useState(false);
-  const [background, setBackground] = useState<BackgroundCard>();
-  const [offers, setOffers] = useState<Array<OfferEntity>>([]);
+  const [background, setBackground] = useState<BackgroundDisplayData>();
+  const [offers, setOffers] = useState<Array<OfferDisplayData>>([]);
 
   const [selectedTab, setSelectedTab] = useState('offers');
+  const [analysis, setAnalysis] = useState<ProfileAnalysis>();
 
   const getProfileQuery = trpc.useQuery(
     [
@@ -44,75 +48,79 @@ export default function OfferProfile() {
 
         setIsEditable(data?.isEditable ?? false);
 
-        if (data?.offers) {
-          const filteredOffers: Array<OfferEntity> = data
-            ? data?.offers.map((res: ProfileOffer) => {
-                if (res.offersFullTime) {
-                  const filteredOffer: OfferEntity = {
-                    base: convertMoneyToString(res.offersFullTime.baseSalary),
-                    bonus: convertMoneyToString(res.offersFullTime.bonus),
-                    companyName: res.company.name,
-                    id: res.offersFullTime.id,
-                    jobLevel: res.offersFullTime.level,
-                    jobTitle: res.offersFullTime.title,
-                    location: res.location,
-                    negotiationStrategy: res.negotiationStrategy || '',
-                    otherComment: res.comments || '',
-                    receivedMonth: formatDate(res.monthYearReceived),
-                    stocks: convertMoneyToString(res.offersFullTime.stocks),
-                    totalCompensation: convertMoneyToString(
-                      res.offersFullTime.totalCompensation,
-                    ),
-                  };
-                  return filteredOffer;
-                }
-                const filteredOffer: OfferEntity = {
+        const filteredOffers: Array<OfferDisplayData> = data
+          ? data?.offers.map((res: ProfileOffer) => {
+              if (res.offersFullTime) {
+                const filteredOffer: OfferDisplayData = {
+                  base: convertMoneyToString(res.offersFullTime.baseSalary),
+                  bonus: convertMoneyToString(res.offersFullTime.bonus),
                   companyName: res.company.name,
-                  id: res.offersIntern!.id,
-                  jobTitle: res.offersIntern!.title,
+                  id: res.offersFullTime.id,
+                  jobLevel: res.offersFullTime.level,
+                  jobTitle: res.offersFullTime.title,
                   location: res.location,
-                  monthlySalary: convertMoneyToString(
-                    res.offersIntern!.monthlySalary,
-                  ),
-                  negotiationStrategy: res.negotiationStrategy || '',
-                  otherComment: res.comments || '',
+                  negotiationStrategy: res.negotiationStrategy,
+                  otherComment: res.comments,
                   receivedMonth: formatDate(res.monthYearReceived),
+                  stocks: convertMoneyToString(res.offersFullTime.stocks),
+                  totalCompensation: convertMoneyToString(
+                    res.offersFullTime.totalCompensation,
+                  ),
                 };
                 return filteredOffer;
-              })
-            : [];
-          setOffers(filteredOffers);
-        }
+              }
+              const filteredOffer: OfferDisplayData = {
+                companyName: res.company.name,
+                id: res.offersIntern!.id,
+                jobTitle: res.offersIntern!.title,
+                location: res.location,
+                monthlySalary: convertMoneyToString(
+                  res.offersIntern!.monthlySalary,
+                ),
+                negotiationStrategy: res.negotiationStrategy,
+                otherComment: res.comments,
+                receivedMonth: formatDate(res.monthYearReceived),
+              };
+              return filteredOffer;
+            })
+          : [];
+        setOffers(filteredOffers);
 
         if (data?.background) {
           const transformedBackground = {
             educations: data.background.educations.map((education) => ({
-              endDate: education.endDate ? formatDate(education.endDate) : '-',
-              field: education.field || '-',
-              school: education.school || '-',
+              endDate: education.endDate ? formatDate(education.endDate) : null,
+              field: education.field,
+              school: education.school,
               startDate: education.startDate
                 ? formatDate(education.startDate)
-                : '-',
-              type: education.type || '-',
-            })),
-            experiences: data.background.experiences.map((experience) => ({
-              companyName: experience.company?.name ?? '-',
-              duration: String(experience.durationInMonths) ?? '-',
-              jobLevel: experience.level ?? '',
-              jobTitle: experience.title ?? '-',
-              monthlySalary: experience.monthlySalary
-                ? convertMoneyToString(experience.monthlySalary)
-                : '-',
-              totalCompensation: experience.totalCompensation
-                ? convertMoneyToString(experience.totalCompensation)
-                : '-',
+                : null,
+              type: education.type,
             })),
+            experiences: data.background.experiences.map(
+              (experience): OfferDisplayData => ({
+                companyName: experience.company?.name,
+                duration: experience.durationInMonths,
+                jobLevel: experience.level,
+                jobTitle: experience.title,
+                monthlySalary: experience.monthlySalary
+                  ? convertMoneyToString(experience.monthlySalary)
+                  : null,
+                totalCompensation: experience.totalCompensation
+                  ? convertMoneyToString(experience.totalCompensation)
+                  : null,
+              }),
+            ),
             profileName: data.profileName,
             specificYoes: data.background.specificYoes,
-            totalYoe: String(data.background.totalYoe) || '-',
+            totalYoe: data.background.totalYoe,
           };
           setBackground(transformedBackground);
         }
+
+        if (data.analysis) {
+          setAnalysis(data.analysis);
+        }
       },
     },
   );
@@ -153,6 +161,7 @@ export default function OfferProfile() {
             />
             <div className="h-4/5 w-full overflow-y-scroll pb-32">
               <ProfileDetails
+                analysis={analysis}
                 background={background}
                 isLoading={getProfileQuery.isLoading}
                 offers={offers}
diff --git a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
index c5b7c15c..2b9550ae 100644
--- a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { JobType } from '@prisma/client';
 
 import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';
 import type { OffersProfileFormData } from '~/components/offers/types';
-import { JobType } from '~/components/offers/types';
 
 import { Spinner } from '~/../../../packages/ui/dist';
 import { getProfilePath } from '~/utils/offers/link';
@@ -25,7 +25,7 @@ export default function OffersEditPage() {
         console.error(error.message);
       },
       onSuccess(data) {
-        const { educations, experiences, specificYoes, totalYoe } =
+        const { educations, experiences, specificYoes, totalYoe, id } =
           data.background!;
 
         setInitialData({
@@ -33,11 +33,13 @@ export default function OffersEditPage() {
             educations,
             experiences:
               experiences.length === 0
-                ? [{ jobType: JobType.FullTime }]
+                ? [{ jobType: JobType.FULLTIME }]
                 : experiences,
+            id,
             specificYoes,
             totalYoe,
           },
+          id: data.id,
           offers: data.offers.map((offer) => ({
             comments: offer.comments,
             companyId: offer.company.id,
@@ -67,7 +69,7 @@ export default function OffersEditPage() {
           <Spinner className="m-10" display="block" size="lg" />
         </div>
       )}
-      {!getProfileResult.isLoading && (
+      {!getProfileResult.isLoading && initialData && (
         <OffersSubmissionForm
           initialOfferProfileValues={initialData}
           profileId={profile?.id}
diff --git a/apps/portal/src/server/router/offers/offers-analysis-router.ts b/apps/portal/src/server/router/offers/offers-analysis-router.ts
index 973f3136..2772dd6a 100644
--- a/apps/portal/src/server/router/offers/offers-analysis-router.ts
+++ b/apps/portal/src/server/router/offers/offers-analysis-router.ts
@@ -285,7 +285,6 @@ export const offersAnalysisRouter = createRouter()
               OR: [
                 {
                   offersFullTime: {
-                    level: overallHighestOffer.offersFullTime?.level,
                     title: overallHighestOffer.offersFullTime?.title,
                   },
                   offersIntern: {
diff --git a/apps/portal/src/server/router/offers/offers-profile-router.ts b/apps/portal/src/server/router/offers/offers-profile-router.ts
index 9aade630..41d7bdce 100644
--- a/apps/portal/src/server/router/offers/offers-profile-router.ts
+++ b/apps/portal/src/server/router/offers/offers-profile-router.ts
@@ -385,7 +385,7 @@ export const offersProfileRouter = createRouter()
 
                   throw new trpc.TRPCError({
                     code: 'BAD_REQUEST',
-                    message: 'Missing fields.',
+                    message: 'Missing fields in background experiences.',
                   });
                 }),
               },
@@ -533,7 +533,7 @@ export const offersProfileRouter = createRouter()
                 // Throw error
                 throw new trpc.TRPCError({
                   code: 'BAD_REQUEST',
-                  message: 'Missing fields.',
+                  message: 'Missing fields in offers.',
                 });
               }),
             ),
diff --git a/apps/portal/src/types/offers.d.ts b/apps/portal/src/types/offers.d.ts
index e2ca2d2f..487ae0c9 100644
--- a/apps/portal/src/types/offers.d.ts
+++ b/apps/portal/src/types/offers.d.ts
@@ -45,6 +45,7 @@ export type Valuation = {
   baseCurrency: string;
   baseValue: number;
   currency: string;
+  id: string;
   value: number;
 };