[offers][feat] Add multiple company analysis UI

apps/portal/src/components/offers/offerAnalysis/OfferAnalysis.tsx

@@ -6,27 +6,18 @@ import OfferPercentileAnalysisText from './OfferPercentileAnalysisText';
 import OfferProfileCard from './OfferProfileCard';
 import { OVERALL_TAB } from '../constants';
 
-import type {
+import type { AnalysisUnit, ProfileAnalysis } from '~/types/offers';
-  Analysis,
-  AnalysisHighestOffer,
-  ProfileAnalysis,
-} from '~/types/offers';
-
-type OfferAnalysisData = {
-  offer?: AnalysisHighestOffer;
-  offerAnalysis?: Analysis;
-};
 
 type OfferAnalysisContentProps = Readonly<{
-  analysis: OfferAnalysisData;
+  offerAnalysis: AnalysisUnit;
   tab: string;
 }>;
 
 function OfferAnalysisContent({
-  analysis: { offer, offerAnalysis },
+  offerAnalysis,
   tab,
 }: OfferAnalysisContentProps) {
-  if (!offerAnalysis || !offer || offerAnalysis.noOfOffers === 0) {
+  if (!offerAnalysis || offerAnalysis.noOfOffers === 0) {
     if (tab === OVERALL_TAB) {
       return (
         <p className="m-10">
@@ -44,11 +35,7 @@ function OfferAnalysisContent({
   }
   return (
     <>
-      <OfferPercentileAnalysisText
+      <OfferPercentileAnalysisText offerAnalysis={offerAnalysis} tab={tab} />
-        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
@@ -61,7 +48,7 @@ function OfferAnalysisContent({
 }
 
 type OfferAnalysisProps = Readonly<{
-  allAnalysis?: ProfileAnalysis | null;
+  allAnalysis: ProfileAnalysis;
   isError: boolean;
   isLoading: boolean;
 }>;
@@ -72,55 +59,51 @@ export default function OfferAnalysis({
   isLoading,
 }: OfferAnalysisProps) {
   const [tab, setTab] = useState(OVERALL_TAB);
-  const [analysis, setAnalysis] = useState<OfferAnalysisData | null>(null);
+  const [analysis, setAnalysis] = useState<AnalysisUnit>(
+    allAnalysis.overallAnalysis,
+  );
 
   useEffect(() => {
     if (tab === OVERALL_TAB) {
-      setAnalysis({
+      setAnalysis(allAnalysis.overallAnalysis);
-        offer: allAnalysis?.overallHighestOffer,
-        offerAnalysis: allAnalysis?.overallAnalysis,
-      });
     } else {
-      setAnalysis({
+      setAnalysis(allAnalysis.companyAnalysis[parseInt(tab, 10)]);
-        offer: allAnalysis?.overallHighestOffer,
-        offerAnalysis: allAnalysis?.companyAnalysis[0],
-      });
     }
   }, [tab, allAnalysis]);
 
-  const tabOptions = [
+  const companyTabs = allAnalysis.companyAnalysis.map((value, index) => ({
+    label: value.companyName,
+    value: `${index}`,
+  }));
+
+  let tabOptions = [
     {
       label: OVERALL_TAB,
       value: OVERALL_TAB,
     },
-    {
-      label: allAnalysis?.overallHighestOffer.company.name || '',
-      value: allAnalysis?.overallHighestOffer.company.id || '',
-    },
   ];
+  tabOptions = tabOptions.concat(companyTabs);
 
   return (
-    analysis && (
+    <div>
-      <div>
+      {isError && (
-        {isError && (
+        <p className="m-10 text-center">
-          <p className="m-10 text-center">
+          An error occurred while generating profile analysis.
-            An error occurred while generating profile analysis.
+        </p>
-          </p>
+      )}
-        )}
+      {isLoading && <Spinner className="m-10" display="block" size="lg" />}
-        {isLoading && <Spinner className="m-10" display="block" size="lg" />}
+      {!isError && !isLoading && (
-        {!isError && !isLoading && (
+        <div>
-          <div>
+          <Tabs
-            <Tabs
+            label="Result Navigation"
-              label="Result Navigation"
+            tabs={tabOptions}
-              tabs={tabOptions}
+            value={tab}
-              value={tab}
+            onChange={setTab}
-              onChange={setTab}
+          />
-            />
+          <HorizontalDivider className="mb-5" />
-            <HorizontalDivider className="mb-5" />
+          <OfferAnalysisContent offerAnalysis={analysis} tab={tab} />
-            <OfferAnalysisContent analysis={analysis} tab={tab} />
+        </div>
-          </div>
+      )}
-        )}
+    </div>
-      </div>
-    )
   );
 }

apps/portal/src/components/offers/offerAnalysis/OfferPercentileAnalysisText.tsx

@@ -1,17 +1,15 @@
 import { OVERALL_TAB } from '../constants';
 
-import type { Analysis } from '~/types/offers';
+import type { AnalysisUnit } from '~/types/offers';
 
 type OfferPercentileAnalysisTextProps = Readonly<{
-  companyName: string;
+  offerAnalysis: AnalysisUnit;
-  offerAnalysis: Analysis;
   tab: string;
 }>;
 
 export default function OfferPercentileAnalysisText({
   tab,
-  companyName,
+  offerAnalysis: { noOfOffers, percentile, companyName },
-  offerAnalysis: { noOfOffers, percentile },
 }: OfferPercentileAnalysisTextProps) {
   return tab === OVERALL_TAB ? (
     <p>

apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx

@@ -41,11 +41,13 @@ export default function OfferProfileCard({
         </div>
         <div className="col-span-10">
           <p className="font-bold">{profileName}</p>
-          <div className="flex flex-row">
+          {previousCompanies.length > 0 && (
-            <BuildingOffice2Icon className="mr-2 h-5" />
+            <div className="flex flex-row">
-            <span className="mr-2 font-bold">Current:</span>
+              <BuildingOffice2Icon className="mr-2 h-5" />
-            <span>{previousCompanies[0]}</span>
+              <span className="mr-2 font-bold">Current:</span>
-          </div>
+              <span>{previousCompanies[0]}</span>
+            </div>
+          )}
           <div className="flex flex-row">
             <CalendarDaysIcon className="mr-2 h-5" />
             <span className="mr-2 font-bold">YOE:</span>

apps/portal/src/components/offers/offersSubmission/OffersSubmissionAnalysis.tsx

@@ -17,12 +17,17 @@ export default function OffersSubmissionAnalysis({
       <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Result
       </h5>
-      <OfferAnalysis
+      {!analysis && (
-        key={3}
+        <p className="mb-8 text-center">Error generating analysis.</p>
-        allAnalysis={analysis}
+      )}
-        isError={isError}
+      {analysis && (
-        isLoading={isLoading}
+        <OfferAnalysis
-      />
+          key={3}
+          allAnalysis={analysis}
+          isError={isError}
+          isLoading={isLoading}
+        />
+      )}
     </div>
   );
 }

apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx

@@ -70,7 +70,9 @@ export default function OffersSubmissionResult() {
   return (
     <>
       {getAnalysis.isLoading && (
-        <Spinner className="m-10" display="block" size="lg" />
+        <div className="m-10 flex w-full justify-center">
+          <Spinner display="block" size="lg" />
+        </div>
       )}
       {!getAnalysis.isLoading && (
         <div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">