From e152de22849db5303fb5215163718c58c6114d8f Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com>
Date: Sun, 30 Oct 2022 23:30:24 +0800
Subject: [PATCH] [offers][feat] save to user profile (#462)

---
 .../portal/src/components/global/AppShell.tsx |  10 +-
 .../components/offers/OffersNavigation.tsx    |  11 ++
 .../offers/dashboard/DashboardOfferCard.tsx   |  55 +++++++
 .../offers/dashboard/DashboardProfileCard.tsx | 105 ++++++++++++
 .../offers/profile/ProfileComments.tsx        |  49 +++---
 .../offers/profile/ProfileHeader.tsx          | 129 +++++++++++----
 .../src/components/offers/util/Tooltip.tsx    |  42 +++++
 apps/portal/src/mappers/offers-mappers.ts     | 151 ++++++++++--------
 apps/portal/src/pages/offers/dashboard.tsx    |  95 +++++++++++
 .../pages/offers/profile/[offerProfileId].tsx |   1 +
 apps/portal/src/types/offers.d.ts             |   4 +-
 11 files changed, 529 insertions(+), 123 deletions(-)
 create mode 100644 apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
 create mode 100644 apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx
 create mode 100644 apps/portal/src/components/offers/util/Tooltip.tsx
 create mode 100644 apps/portal/src/pages/offers/dashboard.tsx

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 41e943d4..3c36e0d9 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -9,7 +9,9 @@ import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
 
 import GlobalNavigation from '~/components/global/GlobalNavigation';
 import HomeNavigation from '~/components/global/HomeNavigation';
-import OffersNavigation from '~/components/offers/OffersNavigation';
+import OffersNavigation, {
+  OffersNavigationAuthenticated,
+} from '~/components/offers/OffersNavigation';
 import QuestionsNavigation from '~/components/questions/QuestionsNavigation';
 import ResumesNavigation from '~/components/resumes/ResumesNavigation';
 
@@ -105,6 +107,7 @@ function ProfileJewel() {
 export default function AppShell({ children }: Props) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const router = useRouter();
+  const { data: session } = useSession();
 
   const currentProductNavigation: Readonly<{
     googleAnalyticsMeasurementID: string;
@@ -120,7 +123,10 @@ export default function AppShell({ children }: Props) {
     }
 
     if (path.startsWith('/offers')) {
-      return OffersNavigation;
+      if (session == null) {
+        return OffersNavigation;
+      }
+      return OffersNavigationAuthenticated;
     }
 
     if (path.startsWith('/questions')) {
diff --git a/apps/portal/src/components/offers/OffersNavigation.tsx b/apps/portal/src/components/offers/OffersNavigation.tsx
index acc3f906..4de1fc5e 100644
--- a/apps/portal/src/components/offers/OffersNavigation.tsx
+++ b/apps/portal/src/components/offers/OffersNavigation.tsx
@@ -5,6 +5,12 @@ const navigation: ProductNavigationItems = [
   { href: '/offers/features', name: 'Features' },
 ];
 
+const navigationAuthenticated: ProductNavigationItems = [
+  { href: '/offers/submit', name: 'Analyze your offers' },
+  { href: '/offers/dashboard', name: 'Your repository' },
+  { href: '/offers/features', name: 'Features' },
+];
+
 const config = {
   // TODO: Change this to your own GA4 measurement ID.
   googleAnalyticsMeasurementID: 'G-34XRGLEVCF',
@@ -17,4 +23,9 @@ const config = {
   titleHref: '/offers',
 };
 
+export const OffersNavigationAuthenticated = {
+  ...config,
+  navigation: navigationAuthenticated,
+};
+
 export default config;
diff --git a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
new file mode 100644
index 00000000..df49ada9
--- /dev/null
+++ b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx
@@ -0,0 +1,55 @@
+import { JobType } from '@prisma/client';
+import { HorizontalDivider } from '@tih/ui';
+
+import type { JobTitleType } from '~/components/shared/JobTitles';
+import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
+
+import { convertMoneyToString } from '~/utils/offers/currency';
+import { formatDate } from '~/utils/offers/time';
+
+import type { UserProfileOffer } from '~/types/offers';
+
+type Props = Readonly<{
+  disableTopDivider?: boolean;
+  offer: UserProfileOffer;
+}>;
+
+export default function DashboardProfileCard({
+  disableTopDivider,
+  offer: {
+    company,
+    income,
+    jobType,
+    level,
+    location,
+    monthYearReceived,
+    title,
+  },
+}: Props) {
+  return (
+    <>
+      {!disableTopDivider && <HorizontalDivider />}
+      <div className="flex items-end justify-between">
+        <div className="col-span-1 row-span-3">
+          <p className="font-bold">
+            {getLabelForJobTitleType(title as JobTitleType)}
+          </p>
+          <p>
+            {location
+              ? `Company: ${company.name}, ${location}`
+              : `Company: ${company.name}`}
+          </p>
+          {level && <p>Level: {level}</p>}
+        </div>
+        <div className="col-span-1 row-span-3">
+          <p className="text-end">{formatDate(monthYearReceived)}</p>
+          <p className="text-end text-xl">
+            {jobType === JobType.FULLTIME
+              ? `${convertMoneyToString(income)} / year`
+              : `${convertMoneyToString(income)} / month`}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx
new file mode 100644
index 00000000..af4a0cfe
--- /dev/null
+++ b/apps/portal/src/components/offers/dashboard/DashboardProfileCard.tsx
@@ -0,0 +1,105 @@
+import { useRouter } from 'next/router';
+import { ArrowRightIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { Button, useToast } from '@tih/ui';
+
+import DashboardOfferCard from '~/components/offers/dashboard/DashboardOfferCard';
+
+import { formatDate } from '~/utils/offers/time';
+import { trpc } from '~/utils/trpc';
+
+import ProfilePhotoHolder from '../profile/ProfilePhotoHolder';
+
+import type { UserProfile, UserProfileOffer } from '~/types/offers';
+
+type Props = Readonly<{
+  profile: UserProfile;
+}>;
+
+export default function DashboardProfileCard({
+  profile: { createdAt, id, offers, profileName, token },
+}: Props) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const trpcContext = trpc.useContext();
+  const PROFILE_URL = `/offers/profile/${id}?token=${token}`;
+  const removeSavedProfileMutation = trpc.useMutation(
+    'offers.user.profile.removeFromUserProfile',
+    {
+      onError: () => {
+        showToast({
+          title: `Server error.`,
+          variant: 'failure',
+        });
+      },
+      onSuccess: () => {
+        trpcContext.invalidateQueries(['offers.user.profile.getUserProfiles']);
+        showToast({
+          title: `Profile removed from your dashboard successfully!`,
+          variant: 'success',
+        });
+      },
+    },
+  );
+
+  function handleRemoveProfile() {
+    removeSavedProfileMutation.mutate({ profileId: id });
+  }
+
+  return (
+    <div className="space-y-4 bg-white px-4 pt-5 sm:px-4">
+      {/* Header */}
+      <div className="-ml-4 -mt-2 flex flex-wrap items-center justify-between border-b border-gray-300 pb-4 sm:flex-nowrap">
+        <div className="flex items-center gap-x-5">
+          <div>
+            <ProfilePhotoHolder size="sm" />
+          </div>
+          <div className="col-span-10">
+            <p className="text-xl font-bold">{profileName}</p>
+
+            <div className="flex flex-row">
+              <span>Created at {formatDate(createdAt)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex self-start">
+          <Button
+            disabled={removeSavedProfileMutation.isLoading}
+            icon={XMarkIcon}
+            isLabelHidden={true}
+            label="Remove Profile"
+            size="md"
+            variant="tertiary"
+            onClick={handleRemoveProfile}
+          />
+        </div>
+      </div>
+
+      {/* Offers */}
+      <div>
+        {offers.map((offer: UserProfileOffer, index) =>
+          index === 0 ? (
+            <DashboardOfferCard
+              key={offer.id}
+              disableTopDivider={true}
+              offer={offer}
+            />
+          ) : (
+            <DashboardOfferCard key={offer.id} offer={offer} />
+          ),
+        )}
+      </div>
+      <div className="flex justify-end pt-1">
+        <Button
+          disabled={removeSavedProfileMutation.isLoading}
+          icon={ArrowRightIcon}
+          isLabelHidden={false}
+          label="Read full profile"
+          size="md"
+          variant="secondary"
+          onClick={() => router.push(PROFILE_URL)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index b26f78ae..bc9c3c8e 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -10,12 +10,15 @@ import {
 } from '@tih/ui';
 
 import ExpandableCommentCard from '~/components/offers/profile/comments/ExpandableCommentCard';
+import Tooltip from '~/components/offers/util/Tooltip';
 
 import { copyProfileLink } from '~/utils/offers/link';
 import { trpc } from '~/utils/trpc';
 
 import type { OffersDiscussion, Reply } from '~/types/offers';
 
+import 'react-popper-tooltip/dist/styles.css';
+
 type ProfileHeaderProps = Readonly<{
   isDisabled: boolean;
   isEditable: boolean;
@@ -107,39 +110,43 @@ export default function ProfileComments({
     <div className="m-4 h-full">
       <div className="flex-end flex justify-end space-x-4">
         {isEditable && (
+          <Tooltip tooltipContent="Copy this link to edit your profile later">
+            <Button
+              addonPosition="start"
+              disabled={isDisabled}
+              icon={ClipboardDocumentIcon}
+              isLabelHidden={false}
+              label="Copy profile edit link"
+              size="sm"
+              variant="secondary"
+              onClick={() => {
+                copyProfileLink(profileId, token);
+                showToast({
+                  title: `Profile edit link copied to clipboard!`,
+                  variant: 'success',
+                });
+              }}
+            />
+          </Tooltip>
+        )}
+        <Tooltip tooltipContent="Share this profile with your friends">
           <Button
             addonPosition="start"
             disabled={isDisabled}
-            icon={ClipboardDocumentIcon}
+            icon={ShareIcon}
             isLabelHidden={false}
-            label="Copy profile edit link"
+            label="Copy public link"
             size="sm"
             variant="secondary"
             onClick={() => {
-              copyProfileLink(profileId, token);
+              copyProfileLink(profileId);
               showToast({
-                title: `Profile edit link copied to clipboard!`,
+                title: `Public profile link copied to clipboard!`,
                 variant: 'success',
               });
             }}
           />
-        )}
-        <Button
-          addonPosition="start"
-          disabled={isDisabled}
-          icon={ShareIcon}
-          isLabelHidden={false}
-          label="Copy public link"
-          size="sm"
-          variant="secondary"
-          onClick={() => {
-            copyProfileLink(profileId);
-            showToast({
-              title: `Public profile link copied to clipboard!`,
-              variant: 'success',
-            });
-          }}
-        />
+        </Tooltip>
       </div>
       <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
       {isEditable || session?.user?.name ? (
diff --git a/apps/portal/src/components/offers/profile/ProfileHeader.tsx b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
index dc5e8ddb..54c6a9aa 100644
--- a/apps/portal/src/components/offers/profile/ProfileHeader.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileHeader.tsx
@@ -1,27 +1,32 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import {
+  BookmarkIcon as BookmarkIconOutline,
   BuildingOffice2Icon,
   CalendarDaysIcon,
   PencilSquareIcon,
   TrashIcon,
 } from '@heroicons/react/24/outline';
-import { Button, Dialog, Spinner, Tabs } from '@tih/ui';
+import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/24/solid';
+import { Button, Dialog, Spinner, Tabs, useToast } from '@tih/ui';
 
 import ProfilePhotoHolder from '~/components/offers/profile/ProfilePhotoHolder';
 import type { BackgroundDisplayData } from '~/components/offers/types';
 import { JobTypeLabel } from '~/components/offers/types';
 
 import { getProfileEditPath } from '~/utils/offers/link';
+import { trpc } from '~/utils/trpc';
 
 import type { ProfileDetailTab } from '../constants';
 import { profileDetailTabs } from '../constants';
+import Tooltip from '../util/Tooltip';
 
 type ProfileHeaderProps = Readonly<{
   background?: BackgroundDisplayData;
   handleDelete: () => void;
   isEditable: boolean;
   isLoading: boolean;
+  isSaved?: boolean;
   selectedTab: ProfileDetailTab;
   setSelectedTab: (tab: ProfileDetailTab) => void;
 }>;
@@ -31,46 +36,112 @@ export default function ProfileHeader({
   handleDelete,
   isEditable,
   isLoading,
+  isSaved = false,
   selectedTab,
   setSelectedTab,
 }: ProfileHeaderProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  // Const [saved, setSaved] = useState(isSaved);
   const router = useRouter();
+  const trpcContext = trpc.useContext();
   const { offerProfileId = '', token = '' } = router.query;
-
+  const { showToast } = useToast();
   const handleEditClick = () => {
     router.push(getProfileEditPath(offerProfileId as string, token as string));
   };
 
+  const saveMutation = trpc.useMutation(
+    ['offers.user.profile.addToUserProfile'],
+    {
+      onError: () => {
+        showToast({
+          title: `Failed to saved to dashboard!`,
+          variant: 'failure',
+        });
+      },
+      onSuccess: () => {
+        // SetSaved(true);
+        showToast({
+          title: `Saved to dashboard!`,
+          variant: 'success',
+        });
+      },
+    },
+  );
+
+  const unsaveMutation = trpc.useMutation(
+    ['offers.user.profile.removeFromUserProfile'],
+    {
+      onError: () => {
+        showToast({
+          title: `Failed to saved to dashboard!`,
+          variant: 'failure',
+        });
+      },
+      onSuccess: () => {
+        // SetSaved(false);
+        showToast({
+          title: `Removed from dashboard!`,
+          variant: 'success',
+        });
+        trpcContext.invalidateQueries(['offers.profile.listOne']);
+      },
+    },
+  );
+
+  const toggleSaved = () => {
+    if (isSaved) {
+      unsaveMutation.mutate({ profileId: offerProfileId as string });
+    } else {
+      saveMutation.mutate({
+        profileId: offerProfileId as string,
+        token: token as string,
+      });
+    }
+  };
+
   function renderActionList() {
     return (
-      <div className="space-x-2">
-        {/* <Button
-          disabled={isLoading}
-          icon={BookmarkSquareIcon}
-          isLabelHidden={true}
-          label="Save to user account"
-          size="md"
-          variant="tertiary"
-        /> */}
-        <Button
-          disabled={isLoading}
-          icon={PencilSquareIcon}
-          isLabelHidden={true}
-          label="Edit"
-          size="md"
-          variant="tertiary"
-          onClick={handleEditClick}
-        />
-        <Button
-          disabled={isLoading}
-          icon={TrashIcon}
-          isLabelHidden={true}
-          label="Delete"
-          size="md"
-          variant="tertiary"
-          onClick={() => setIsDialogOpen(true)}
-        />
+      <div className="flex justify-center space-x-2">
+        <Tooltip
+          tooltipContent={
+            isSaved ? 'Remove from account' : 'Save to your account'
+          }>
+          <Button
+            disabled={
+              isLoading || saveMutation.isLoading || unsaveMutation.isLoading
+            }
+            icon={isSaved ? BookmarkIconSolid : BookmarkIconOutline}
+            isLabelHidden={true}
+            isLoading={saveMutation.isLoading || unsaveMutation.isLoading}
+            label={isSaved ? 'Remove from account' : 'Save to your account'}
+            size="md"
+            variant="tertiary"
+            onClick={toggleSaved}
+          />
+        </Tooltip>
+        <Tooltip tooltipContent="Edit profile">
+          <Button
+            disabled={isLoading}
+            icon={PencilSquareIcon}
+            isLabelHidden={true}
+            label="Edit"
+            size="md"
+            variant="tertiary"
+            onClick={handleEditClick}
+          />
+        </Tooltip>
+        <Tooltip tooltipContent="Delete profile">
+          <Button
+            disabled={isLoading}
+            icon={TrashIcon}
+            isLabelHidden={true}
+            label="Delete"
+            size="md"
+            variant="tertiary"
+            onClick={() => setIsDialogOpen(true)}
+          />
+        </Tooltip>
         {isDialogOpen && (
           <Dialog
             isShown={isDialogOpen}
diff --git a/apps/portal/src/components/offers/util/Tooltip.tsx b/apps/portal/src/components/offers/util/Tooltip.tsx
new file mode 100644
index 00000000..76f3cdf1
--- /dev/null
+++ b/apps/portal/src/components/offers/util/Tooltip.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { usePopperTooltip } from 'react-popper-tooltip';
+import type { Placement } from '@popperjs/core';
+
+type TooltipProps = Readonly<{
+  children: ReactNode;
+  placement?: Placement;
+  tooltipContent: ReactNode;
+}>;
+
+export default function Tooltip({
+  children,
+  tooltipContent,
+  placement = 'bottom-start',
+}: TooltipProps) {
+  const {
+    getTooltipProps,
+    getArrowProps,
+    setTooltipRef,
+    setTriggerRef,
+    visible,
+  } = usePopperTooltip({
+    interactive: true,
+    placement,
+    trigger: ['focus', 'hover'],
+  });
+  return (
+    <>
+      <div ref={setTriggerRef}>{children}</div>
+      {visible && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({
+            className: 'tooltip-container ',
+          })}>
+          {tooltipContent}
+          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/portal/src/mappers/offers-mappers.ts b/apps/portal/src/mappers/offers-mappers.ts
index 198d2db0..d4f1d1ce 100644
--- a/apps/portal/src/mappers/offers-mappers.ts
+++ b/apps/portal/src/mappers/offers-mappers.ts
@@ -35,7 +35,8 @@ import type {
   SpecificYoe,
   UserProfile,
   UserProfileOffer,
-  Valuation} from '~/types/offers';
+  Valuation,
+} from '~/types/offers';
 
 const analysisOfferDtoMapper = (
   offer: OffersOffer & {
@@ -530,7 +531,7 @@ export const profileDtoMapper = (
     user: User | null;
   },
   inputToken: string | undefined,
-  inputUserId: string | null | undefined
+  inputUserId: string | null | undefined,
 ) => {
   const profileDto: Profile = {
     analysis: profileAnalysisDtoMapper(profile.analysis),
@@ -547,7 +548,7 @@ export const profileDtoMapper = (
     profileDto.editToken = profile.editToken ?? null;
     profileDto.isEditable = true;
 
-    const users = profile.user
+    const users = profile.user;
 
     // TODO: BRYANN UNCOMMENT THIS ONCE U CHANGE THE SCHEMA
     // for (let i = 0; i < users.length; i++) {
@@ -558,7 +559,7 @@ export const profileDtoMapper = (
 
     // TODO: REMOVE THIS ONCE U CHANGE THE SCHEMA
     if (users?.id === inputUserId) {
-      profileDto.isSaved = true
+      profileDto.isSaved = true;
     }
   }
 
@@ -645,83 +646,95 @@ export const getOffersResponseMapper = (
   return getOffersResponse;
 };
 
-export const getUserProfileResponseMapper = (res: User & {
-    OffersProfile: Array<OffersProfile & {
-        offers: Array<OffersOffer & {
-            company: Company;
-            offersFullTime: (OffersFullTime & { totalCompensation: OffersCurrency }) | null;
-            offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
-        }>;
-    }>;
-} | null): Array<UserProfile> => {
+export const getUserProfileResponseMapper = (
+  res:
+    | (User & {
+        OffersProfile: Array<
+          OffersProfile & {
+            offers: Array<
+              OffersOffer & {
+                company: Company;
+                offersFullTime:
+                  | (OffersFullTime & { totalCompensation: OffersCurrency })
+                  | null;
+                offersIntern:
+                  | (OffersIntern & { monthlySalary: OffersCurrency })
+                  | null;
+              }
+            >;
+          }
+        >;
+      })
+    | null,
+): Array<UserProfile> => {
   if (res) {
     return res.OffersProfile.map((profile) => {
       return {
         createdAt: profile.createdAt,
         id: profile.id,
         offers: profile.offers.map((offer) => {
-          return userProfileOfferDtoMapper(offer)
+          return userProfileOfferDtoMapper(offer);
         }),
         profileName: profile.profileName,
-        token: profile.editToken
-      }
-    })
+        token: profile.editToken,
+      };
+    });
   }
 
-  return []
-}
+  return [];
+};
 
 const userProfileOfferDtoMapper = (
   offer: OffersOffer & {
-      company: Company;
-      offersFullTime: (OffersFullTime & { totalCompensation: OffersCurrency }) | null;
-      offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
-  }): UserProfileOffer => {
-    const mappedOffer: UserProfileOffer = {
-      company: offersCompanyDtoMapper(offer.company),
-      id: offer.id,
-      income: {
-        baseCurrency: '',
-        baseValue: -1,
-        currency: '',
-        id: '',
-        value: -1,
-      },
-      jobType: offer.jobType,
-      level: offer.offersFullTime?.level ?? '',
-      location: offer.location,
-      monthYearReceived: offer.monthYearReceived,
-      title:
-        offer.jobType === JobType.FULLTIME
-          ? offer.offersFullTime?.title ?? ''
-          : offer.offersIntern?.title ?? '',
-    }
+    company: Company;
+    offersFullTime:
+      | (OffersFullTime & { totalCompensation: OffersCurrency })
+      | null;
+    offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
+  },
+): UserProfileOffer => {
+  const mappedOffer: UserProfileOffer = {
+    company: offersCompanyDtoMapper(offer.company),
+    id: offer.id,
+    income: {
+      baseCurrency: '',
+      baseValue: -1,
+      currency: '',
+      id: '',
+      value: -1,
+    },
+    jobType: offer.jobType,
+    level: offer.offersFullTime?.level ?? '',
+    location: offer.location,
+    monthYearReceived: offer.monthYearReceived,
+    title:
+      offer.jobType === JobType.FULLTIME
+        ? offer.offersFullTime?.title ?? ''
+        : offer.offersIntern?.title ?? '',
+  };
 
-    if (offer.offersFullTime?.totalCompensation) {
-      mappedOffer.income.value =
-        offer.offersFullTime.totalCompensation.value;
-      mappedOffer.income.currency =
-        offer.offersFullTime.totalCompensation.currency;
-      mappedOffer.income.id = offer.offersFullTime.totalCompensation.id;
-      mappedOffer.income.baseValue =
-        offer.offersFullTime.totalCompensation.baseValue;
-      mappedOffer.income.baseCurrency =
-        offer.offersFullTime.totalCompensation.baseCurrency;
-    } else if (offer.offersIntern?.monthlySalary) {
-      mappedOffer.income.value = offer.offersIntern.monthlySalary.value;
-      mappedOffer.income.currency =
-        offer.offersIntern.monthlySalary.currency;
-      mappedOffer.income.id = offer.offersIntern.monthlySalary.id;
-      mappedOffer.income.baseValue =
-        offer.offersIntern.monthlySalary.baseValue;
-      mappedOffer.income.baseCurrency =
-        offer.offersIntern.monthlySalary.baseCurrency;
-    } else {
-      throw new TRPCError({
-        code: 'NOT_FOUND',
-        message: 'Total Compensation or Salary not found',
-      });
-    }
+  if (offer.offersFullTime?.totalCompensation) {
+    mappedOffer.income.value = offer.offersFullTime.totalCompensation.value;
+    mappedOffer.income.currency =
+      offer.offersFullTime.totalCompensation.currency;
+    mappedOffer.income.id = offer.offersFullTime.totalCompensation.id;
+    mappedOffer.income.baseValue =
+      offer.offersFullTime.totalCompensation.baseValue;
+    mappedOffer.income.baseCurrency =
+      offer.offersFullTime.totalCompensation.baseCurrency;
+  } else if (offer.offersIntern?.monthlySalary) {
+    mappedOffer.income.value = offer.offersIntern.monthlySalary.value;
+    mappedOffer.income.currency = offer.offersIntern.monthlySalary.currency;
+    mappedOffer.income.id = offer.offersIntern.monthlySalary.id;
+    mappedOffer.income.baseValue = offer.offersIntern.monthlySalary.baseValue;
+    mappedOffer.income.baseCurrency =
+      offer.offersIntern.monthlySalary.baseCurrency;
+  } else {
+    throw new TRPCError({
+      code: 'NOT_FOUND',
+      message: 'Total Compensation or Salary not found',
+    });
+  }
 
-    return mappedOffer
-}
\ No newline at end of file
+  return mappedOffer;
+};
diff --git a/apps/portal/src/pages/offers/dashboard.tsx b/apps/portal/src/pages/offers/dashboard.tsx
new file mode 100644
index 00000000..b0da84b1
--- /dev/null
+++ b/apps/portal/src/pages/offers/dashboard.tsx
@@ -0,0 +1,95 @@
+import { useRouter } from 'next/router';
+import { signIn, useSession } from 'next-auth/react';
+import { useState } from 'react';
+import { Button, Spinner } from '@tih/ui';
+
+import DashboardOfferCard from '~/components/offers/dashboard/DashboardProfileCard';
+
+import { trpc } from '~/utils/trpc';
+
+import type { UserProfile } from '~/types/offers';
+
+export default function ProfilesDashboard() {
+  const { status } = useSession();
+  const router = useRouter();
+  const [userProfiles, setUserProfiles] = useState<Array<UserProfile>>([]);
+
+  const userProfilesQuery = trpc.useQuery(
+    ['offers.user.profile.getUserProfiles'],
+    {
+      onError: (error) => {
+        if (error.data?.code === 'UNAUTHORIZED') {
+          signIn();
+        }
+      },
+      onSuccess: (response: Array<UserProfile>) => {
+        setUserProfiles(response);
+      },
+    },
+  );
+
+  if (status === 'loading' || userProfilesQuery.isLoading) {
+    return (
+      <div className="flex h-screen w-screen">
+        <div className="m-auto mx-auto w-full justify-center">
+          <Spinner className="m-10" display="block" size="lg" />
+        </div>
+      </div>
+    );
+  }
+  if (status === 'unauthenticated') {
+    signIn();
+  }
+  if (userProfiles.length === 0) {
+    return (
+      <div className="flex h-screen w-screen">
+        <div className="m-auto mx-auto w-full justify-center text-xl">
+          <div className="mb-8 flex w-full flex-row justify-center">
+            <h2>You have not saved any offer profiles yet.</h2>
+          </div>
+          <div className="flex flex-row justify-center">
+            <Button
+              label="Submit your offers now!"
+              size="lg"
+              variant="primary"
+              onClick={() => router.push('/offers/submit')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      {userProfilesQuery.isLoading && (
+        <div className="flex h-screen w-screen">
+          <div className="m-auto mx-auto w-full justify-center">
+            <Spinner className="m-10" display="block" size="lg" />
+          </div>
+        </div>
+      )}
+      {!userProfilesQuery.isLoading && (
+        <div className="mt-8 overflow-y-auto">
+          <h1 className="mx-auto mb-4 w-3/4 text-start text-4xl font-bold text-slate-900">
+            Your repository
+          </h1>
+          <p className="mx-auto w-3/4 text-start text-xl text-slate-900">
+            Save your offer profiles to respository to easily access and edit
+            them later.
+          </p>
+          <div className="justfy-center mt-8 flex w-screen">
+            <ul className="mx-auto w-3/4 space-y-3" role="list">
+              {userProfiles?.map((profile) => (
+                <li
+                  key={profile.id}
+                  className="overflow-hidden bg-white px-4 py-4 shadow sm:rounded-md sm:px-6">
+                  <DashboardOfferCard key={profile.id} profile={profile} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index b5d90466..8c75f77e 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -188,6 +188,7 @@ export default function OfferProfile() {
               handleDelete={handleDelete}
               isEditable={isEditable}
               isLoading={getProfileQuery.isLoading}
+              isSaved={getProfileQuery.data?.isSaved}
               selectedTab={selectedTab}
               setSelectedTab={setSelectedTab}
             />
diff --git a/apps/portal/src/types/offers.d.ts b/apps/portal/src/types/offers.d.ts
index 5a95406b..4d4c9080 100644
--- a/apps/portal/src/types/offers.d.ts
+++ b/apps/portal/src/types/offers.d.ts
@@ -191,7 +191,7 @@ export type UserProfile = {
   offers: Array<UserProfileOffer>;
   profileName: string;
   token: string;
-}
+};
 
 export type UserProfileOffer = {
   company: OffersCompany;
@@ -202,4 +202,4 @@ export type UserProfileOffer = {
   location: string;
   monthYearReceived: Date;
   title: string;
-}
\ No newline at end of file
+};