From e5c2082bf23c2b04cff99fdd5977a30970937c92 Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com>
Date: Mon, 24 Oct 2022 22:00:48 +0800
Subject: [PATCH 01/12] [offers][feat] add landing page and fix comment bugs
 (#422)

* [offers][fix] fix create commnet and update title

* [offers][fix] update tab name

* [offers][feat] add landing page
---
 .../src/components/offers/OffersNavigation.ts |   5 +-
 .../src/components/offers/OffersTitle.tsx     |   4 +-
 .../offers/landing/LeftTextCard.tsx           |  54 ++++
 .../offers/landing/RightTextCard.tsx          |  54 ++++
 .../offers/profile/ProfileComments.tsx        |  39 ++-
 .../offers/profile/comments/CommentCard.tsx   |   6 +-
 apps/portal/src/pages/offers/home.tsx         |  48 ++++
 apps/portal/src/pages/offers/index.tsx        | 272 +++++++++++++++---
 .../pages/offers/profile/[offerProfileId].tsx |   4 +-
 apps/portal/src/utils/offers/time.tsx         |   6 +-
 10 files changed, 443 insertions(+), 49 deletions(-)
 create mode 100644 apps/portal/src/components/offers/landing/LeftTextCard.tsx
 create mode 100644 apps/portal/src/components/offers/landing/RightTextCard.tsx
 create mode 100644 apps/portal/src/pages/offers/home.tsx

diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index cfa314dc..9b340cec 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,13 +1,14 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/submit', name: 'Benchmark your offer' },
+  { href: '/offers/home', name: 'Home' },
+  { href: '/offers/submit', name: 'Analyse your offers' },
 ];
 
 const config = {
   navigation,
   showGlobalNav: false,
-  title: 'Tech Offers Repo',
+  title: 'Offer Profile Repository',
   titleHref: '/offers',
 };
 
diff --git a/apps/portal/src/components/offers/OffersTitle.tsx b/apps/portal/src/components/offers/OffersTitle.tsx
index 2668ac4e..52798611 100644
--- a/apps/portal/src/components/offers/OffersTitle.tsx
+++ b/apps/portal/src/components/offers/OffersTitle.tsx
@@ -3,14 +3,14 @@ export default function OffersTitle() {
     <>
       <div className="flex items-end justify-center">
         <h1 className="text-primary-600 mt-16 text-center text-4xl font-bold">
-          Tech Handbook Offers Repo
+          Offer Profile Repository
         </h1>
       </div>
       <div className="text-primary-500 mt-2 text-center text-2xl font-normal">
         Reveal profile stories behind offers
       </div>
       <div className="items-top flex justify-center text-xl font-normal">
-        Benchmark your offers and profiles, learn from other's offer profile,
+        Click into offers to view profiles, benchmark your offers and profiles,
         and discuss with the community
       </div>
     </>
diff --git a/apps/portal/src/components/offers/landing/LeftTextCard.tsx b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
new file mode 100644
index 00000000..27886018
--- /dev/null
+++ b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+
+type LeftTextCardProps = Readonly<{
+  description: string;
+  icon: ReactNode;
+  imageAlt: string;
+  imageSrc: string;
+  title: string;
+}>;
+
+const baseUrl = '/offers/home';
+export default function LeftTextCard({
+  description,
+  icon,
+  imageAlt,
+  imageSrc,
+  title,
+}: LeftTextCardProps) {
+  return (
+    <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
+        <div>
+          <div>
+            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+              {icon}
+            </span>
+          </div>
+          <div className="mt-6">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900">
+              {title}
+            </h2>
+            <p className="mt-4 text-lg text-gray-500">{description}</p>
+            <div className="mt-6">
+              <a
+                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={baseUrl}>
+                Get started
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-12 sm:mt-16 lg:mt-0">
+        <div className="-mr-48 pl-4 sm:pl-6 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0">
+          <img
+            alt={imageAlt}
+            className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+            src={imageSrc}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/landing/RightTextCard.tsx b/apps/portal/src/components/offers/landing/RightTextCard.tsx
new file mode 100644
index 00000000..551c246a
--- /dev/null
+++ b/apps/portal/src/components/offers/landing/RightTextCard.tsx
@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+
+type RightTextCarddProps = Readonly<{
+  description: string;
+  icon: ReactNode;
+  imageAlt: string;
+  imageSrc: string;
+  title: string;
+}>;
+
+const baseUrl = '/offers/home';
+export default function RightTextCard({
+  description,
+  icon,
+  imageAlt,
+  imageSrc,
+  title,
+}: RightTextCarddProps) {
+  return (
+    <div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
+      <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
+        <div>
+          <div>
+            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+              {icon}
+            </span>
+          </div>
+          <div className="mt-6">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900">
+              {title}
+            </h2>
+            <p className="mt-4 text-lg text-gray-500">{description}</p>
+            <div className="mt-6">
+              <a
+                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={baseUrl}>
+                Get started
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0">
+        <div className="-ml-48 pr-4 sm:pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
+          <img
+            alt={imageAlt}
+            className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
+            src={imageSrc}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index 5a8ba614..ebed5bfd 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -142,6 +142,39 @@ export default function ProfileComments({
         />
       </div>
       <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
+      {isEditable || session?.user?.name ? (
+        <div>
+          <TextArea
+            label={`Comment as ${
+              isEditable ? profileName : session?.user?.name ?? 'anonymous'
+            }`}
+            placeholder="Type your comment here"
+            value={currentReply}
+            onChange={(value) => setCurrentReply(value)}
+          />
+          <div className="mt-2 flex w-full justify-end">
+            <div className="w-fit">
+              <Button
+                disabled={
+                  commentsQuery.isLoading ||
+                  !currentReply.length ||
+                  createCommentMutation.isLoading
+                }
+                display="block"
+                isLabelHidden={false}
+                isLoading={createCommentMutation.isLoading}
+                label="Comment"
+                size="sm"
+                variant="primary"
+                onClick={() => handleComment(currentReply)}
+              />
+            </div>
+          </div>
+          <HorizontalDivider />
+        </div>
+      ) : (
+        <div>Please log in before commenting on this profile.</div>
+      )}
       <div>
         <TextArea
           label={`Comment as ${
@@ -154,7 +187,11 @@ export default function ProfileComments({
         <div className="mt-2 flex w-full justify-end">
           <div className="w-fit">
             <Button
-              disabled={commentsQuery.isLoading || !currentReply.length}
+              disabled={
+                commentsQuery.isLoading ||
+                !currentReply.length ||
+                createCommentMutation.isLoading
+              }
               display="block"
               isLabelHidden={false}
               isLoading={createCommentMutation.isLoading}
diff --git a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
index c5face80..f0ce4f6d 100644
--- a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
@@ -128,7 +128,7 @@ export default function CommentCard({
               <TextArea
                 isLabelHidden={true}
                 label="Comment"
-                placeholder="Type your comment here"
+                placeholder="Type your reply here"
                 resize="none"
                 value={currentReply}
                 onChange={(value) => setCurrentReply(value)}
@@ -136,7 +136,9 @@ export default function CommentCard({
               <div className="mt-2 flex w-full justify-end">
                 <div className="w-fit">
                   <Button
-                    disabled={!currentReply.length}
+                    disabled={
+                      !currentReply.length || createCommentMutation.isLoading
+                    }
                     display="block"
                     isLabelHidden={false}
                     isLoading={createCommentMutation.isLoading}
diff --git a/apps/portal/src/pages/offers/home.tsx b/apps/portal/src/pages/offers/home.tsx
new file mode 100644
index 00000000..c25dc7f7
--- /dev/null
+++ b/apps/portal/src/pages/offers/home.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Select } from '@tih/ui';
+
+import { titleOptions } from '~/components/offers/constants';
+import OffersTitle from '~/components/offers/OffersTitle';
+import OffersTable from '~/components/offers/table/OffersTable';
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+
+export default function OffersHomePage() {
+  const [jobTitleFilter, setjobTitleFilter] = useState('Software Engineer');
+  const [companyFilter, setCompanyFilter] = useState('');
+
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="grid-rows grid h-1/2 bg-slate-100">
+        <OffersTitle />
+        <div className="flex items-start justify-center">
+          <div className="mt-4 flex items-center">
+            Viewing offers for
+            <div className="mx-4">
+              <Select
+                isLabelHidden={true}
+                label="Select a job title"
+                options={titleOptions}
+                value={jobTitleFilter}
+                onChange={setjobTitleFilter}
+              />
+            </div>
+            in
+            <div className="ml-4">
+              <CompaniesTypeahead
+                isLabelHidden={true}
+                placeHolder="All companies"
+                onSelect={({ value }) => setCompanyFilter(value)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-center bg-white pb-20 pt-10">
+        <OffersTable
+          companyFilter={companyFilter}
+          jobTitleFilter={jobTitleFilter}
+        />
+      </div>
+    </main>
+  );
+}
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index c25dc7f7..fb67eb8c 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -1,48 +1,244 @@
-import { useState } from 'react';
-import { Select } from '@tih/ui';
+import type { SVGProps } from 'react';
+import {
+  BookmarkSquareIcon,
+  ChartBarSquareIcon,
+  InformationCircleIcon,
+  ShareIcon,
+  TableCellsIcon,
+  UsersIcon,
+} from '@heroicons/react/24/outline';
 
-import { titleOptions } from '~/components/offers/constants';
-import OffersTitle from '~/components/offers/OffersTitle';
-import OffersTable from '~/components/offers/table/OffersTable';
-import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import LeftTextCard from '~/components/offers/landing/LeftTextCard';
+import RightTextCard from '~/components/offers/landing/RightTextCard';
+const baseUrl = '/offers/home';
 
-export default function OffersHomePage() {
-  const [jobTitleFilter, setjobTitleFilter] = useState('Software Engineer');
-  const [companyFilter, setCompanyFilter] = useState('');
+const features = [
+  {
+    description:
+      'Name of the profile creator is stricly anonymous by using randomly generated names.',
+    icon: UsersIcon,
+    name: 'Anonymisd Profile Name',
+  },
+  {
+    description:
+      ' Only people with the edit link can edit that profile. Share profiles to others using public link without giving edit permission.',
+    icon: ShareIcon,
+    name: 'Edit Link v.s. Public Link',
+  },
+  {
+    description:
+      "Offer profiles will not be automatically saved under creator's account in database unless explicit permission is given.",
+    icon: BookmarkSquareIcon,
+    name: 'No Auto-Save to User Account',
+  },
+];
 
+const footerNavigation = {
+  social: [
+    {
+      href: '#',
+      icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            clipRule="evenodd"
+            d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+            fillRule="evenodd"
+          />
+        </svg>
+      ),
+      name: 'Facebook',
+    },
+    {
+      href: '#',
+      icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            clipRule="evenodd"
+            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+            fillRule="evenodd"
+          />
+        </svg>
+      ),
+      name: 'Instagram',
+    },
+    {
+      href: 'https://github.com/yangshun/tech-interview-handbook',
+      icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            clipRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            fillRule="evenodd"
+          />
+        </svg>
+      ),
+      name: 'GitHub',
+    },
+  ],
+};
+
+export default function LandingPage() {
   return (
-    <main className="flex-1 overflow-y-auto">
-      <div className="grid-rows grid h-1/2 bg-slate-100">
-        <OffersTitle />
-        <div className="flex items-start justify-center">
-          <div className="mt-4 flex items-center">
-            Viewing offers for
-            <div className="mx-4">
-              <Select
-                isLabelHidden={true}
-                label="Select a job title"
-                options={titleOptions}
-                value={jobTitleFilter}
-                onChange={setjobTitleFilter}
-              />
+    <div className="overflow-y-auto bg-white">
+      <main>
+        {/* Hero section */}
+        <div className="relative h-full">
+          <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+            <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+              <span className="block">Choosing offers made easier</span>
+              <span className="from-primary-600 -mb-1 block bg-gradient-to-r to-purple-500 bg-clip-text pb-1 text-transparent">
+                using profiles behind offers.
+              </span>
+            </h1>
+            <p className="text-primary-600 mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
+              Analyse your offers using profiles from fellow software engineers.
+            </p>
+            <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
+              <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
+                <a
+                  className="border-grey-600 flex items-center justify-center rounded-md border bg-white bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
+                  href={baseUrl}>
+                  Get started
+                </a>
+                <a
+                  className="bg-primary-600 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
+                  href="#">
+                  Live demo
+                </a>
+              </div>
             </div>
-            in
-            <div className="ml-4">
-              <CompaniesTypeahead
-                isLabelHidden={true}
-                placeHolder="All companies"
-                onSelect={({ value }) => setCompanyFilter(value)}
-              />
+          </div>
+        </div>
+
+        {/* Alternating Feature Sections */}
+        <div className="relative overflow-hidden pt-16 pb-32">
+          <div
+            aria-hidden="true"
+            className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"
+          />
+          <div className="relative">
+            <LeftTextCard
+              description="An offer profile includes not only offers that a person get in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contaxtualize offers."
+              icon={
+                <InformationCircleIcon
+                  aria-hidden="true"
+                  className="h-6 w-6 text-white"
+                />
+              }
+              imageAlt="Offer table page"
+              imageSrc="https://tailwindui.com/img/component-images/inbox-app-screenshot-1.jpg"
+              title="Choosing an offer needs context"
+            />
+          </div>
+          <div className="mt-36">
+            <RightTextCard
+              description="With our offer engine analysis, you can compare your offers with other offers on the market and make an informed decision."
+              icon={
+                <ChartBarSquareIcon
+                  aria-hidden="true"
+                  className="h-6 w-6 text-white"
+                />
+              }
+              imageAlt="Customer profile user interface"
+              imageSrc="https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg"
+              title="Better understand your offers"
+            />
+          </div>
+          <div className="mt-36">
+            <LeftTextCard
+              description="Filter relevant offers by job title, company, submission date, salary and more."
+              icon={
+                <TableCellsIcon
+                  aria-hidden="true"
+                  className="h-6 w-6 text-white"
+                />
+              }
+              imageAlt="Offer table page"
+              imageSrc="https://tailwindui.com/img/component-images/inbox-app-screenshot-1.jpg"
+              title="Stay informed of recent offers"
+            />
+          </div>
+        </div>
+
+        {/* Gradient Feature Section */}
+        <div className="bg-gradient-to-r from-purple-800 to-indigo-700">
+          <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
+            <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
+              Your privacy is our priority.
+            </h2>
+            <p className="mt-4 flex flex-row justify-center text-lg text-purple-200">
+              All offer profiles are anonymised and we do not store information
+              about your personal identity.
+            </p>
+            <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
+              {features.map((feature) => (
+                <div key={feature.name}>
+                  <div>
+                    <span className="flex h-12 w-12 items-center justify-center rounded-md bg-white bg-opacity-10">
+                      <feature.icon
+                        aria-hidden="true"
+                        className="h-6 w-6 text-white"
+                      />
+                    </span>
+                  </div>
+                  <div className="mt-6">
+                    <h3 className="text-lg font-medium text-white">
+                      {feature.name}
+                    </h3>
+                    <p className="mt-2 text-base text-purple-200">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* CTA Section */}
+        <div className="bg-white">
+          <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
+            <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              <span className="block">Ready to get started?</span>
+              <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
+                Create your own offer profile today.
+              </span>
+            </h2>
+            <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
+              <a
+                className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={baseUrl}>
+                Get Started
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer aria-labelledby="footer-heading" className="bg-gray-50">
+        <h2 className="sr-only" id="footer-heading">
+          Footer
+        </h2>
+        <div className="mx-auto max-w-7xl px-4 pt-0 pb-8 sm:px-6 lg:px-8">
+          <div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
+            <div className="flex space-x-6 md:order-2">
+              {footerNavigation.social.map((item) => (
+                <a
+                  key={item.name}
+                  className="text-gray-400 hover:text-gray-500"
+                  href={item.href}>
+                  <span className="sr-only">{item.name}</span>
+                  <item.icon aria-hidden="true" className="h-6 w-6" />
+                </a>
+              ))}
             </div>
+            <p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
+              &copy; 2022 Tech Interview Handbook Offer Profile Repository. All
+              rights reserved.
+            </p>
           </div>
         </div>
-      </div>
-      <div className="flex justify-center bg-white pb-20 pt-10">
-        <OffersTable
-          companyFilter={companyFilter}
-          jobTitleFilter={jobTitleFilter}
-        />
-      </div>
-    </main>
+      </footer>
+    </div>
   );
 }
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index ae9956b0..9c53360e 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -44,7 +44,7 @@ export default function OfferProfile() {
       enabled: typeof offerProfileId === 'string',
       onSuccess: (data: Profile) => {
         if (!data) {
-          router.push('/offers');
+          router.push('/offers/home');
         }
         // If the profile is not editable with a wrong token, redirect to the profile page
         if (!data?.isEditable && token !== '') {
@@ -140,7 +140,7 @@ export default function OfferProfile() {
     },
     onSuccess: () => {
       trpcContext.invalidateQueries(['offers.profile.listOne']);
-      router.push('/offers');
+      router.push('/offers/home');
       showToast({
         title: `Offers profile successfully deleted!`,
         variant: 'success',
diff --git a/apps/portal/src/utils/offers/time.tsx b/apps/portal/src/utils/offers/time.tsx
index 4f68adeb..ffa3c545 100644
--- a/apps/portal/src/utils/offers/time.tsx
+++ b/apps/portal/src/utils/offers/time.tsx
@@ -25,9 +25,11 @@ export function timeSinceNow(date: Date | number | string) {
   }
   interval = seconds / 60;
   if (interval > 1) {
-    return `${Math.floor(interval)} minutes`;
+    const time: number = Math.floor(interval);
+    return time === 1 ? `${time} minute` : `${time} minutes`;
   }
-  return `${Math.floor(interval)} seconds`;
+  const time: number = Math.floor(interval);
+  return time === 1 ? `${time} second` : `${time} seconds`;
 }
 
 export function formatDate(value: Date | number | string) {

From 64cd69d0243c8f025cee8db21116f2b969561e57 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 21:55:21 +0800
Subject: [PATCH 02/12] [resumes][feat] move badge to the right instead

---
 .../src/components/resumes/badges/ResumeUserBadge.tsx | 11 ++++++-----
 .../components/resumes/badges/resumeBadgeConstants.ts |  6 +++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index 52d0de40..adf647a2 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -14,11 +14,12 @@ export default function ResumeUserBadge({
   return (
     <div className="group relative flex items-center justify-center">
       <div
-        className="absolute -top-3 hidden w-48 -translate-y-full flex-col
-        justify-center gap-1 rounded-lg bg-white px-2 py-2 text-center drop-shadow-xl
-        after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2
-        after:border-8 after:border-x-transparent after:border-b-transparent
-       after:border-t-white after:drop-shadow-lg after:content-['']
+        className="absolute left-6 z-10 hidden w-48 flex-col
+        justify-center gap-1 rounded-xl bg-white px-2 py-2 text-center drop-shadow-lg
+
+        before:absolute before:top-12 before:-translate-x-6
+        before:border-8 before:border-y-transparent before:border-l-transparent
+        before:border-r-white before:drop-shadow-lg before:content-['']
         group-hover:flex">
         <Icon className="h-12 w-12 self-center" />
         <p className="font-medium">{title}</p>
diff --git a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
index 3b01ee9e..bb3f36ad 100644
--- a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
+++ b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
@@ -33,7 +33,7 @@ const TIER_ONE = 5;
 
 export const RESUME_USER_BADGES: Array<BadgeInfo> = [
   {
-    description: `Reviewed over ${TIER_THREE} resumes`,
+    description: `Reviewed ${TIER_THREE} resumes`,
     icon: ResumeBadgeSuperheroIcon,
     id: 'Superhero',
     isValid: (payload: BadgePayload) =>
@@ -41,7 +41,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
     title: 'True saviour of the people',
   },
   {
-    description: `Reviewed over ${TIER_TWO} resumes`,
+    description: `Reviewed ${TIER_TWO} resumes`,
     icon: ResumeBadgeDetectiveIcon,
     id: 'Detective',
     isValid: (payload: BadgePayload) =>
@@ -50,7 +50,7 @@ export const RESUME_USER_BADGES: Array<BadgeInfo> = [
     title: 'Keen eye for details like a private eye',
   },
   {
-    description: `Reviewed over ${TIER_ONE} resumes`,
+    description: `Reviewed ${TIER_ONE} resumes`,
     icon: ResumeBadgeEagleIcon,
     id: 'Eagle',
     isValid: (payload: BadgePayload) =>

From bf35f97961306fa3dad817309cac0e48dd7b289b Mon Sep 17 00:00:00 2001
From: Ai Ling <50992674+ailing35@users.noreply.github.com>
Date: Mon, 24 Oct 2022 22:34:28 +0800
Subject: [PATCH 03/12] [offers][fix] Use title typeahead, add default currency
 and remove specialization field (#423)

---
 .../portal/src/components/offers/constants.ts | 20 ----
 .../offersSubmission/OffersSubmissionForm.tsx | 33 ++++---
 .../submissionForm/BackgroundForm.tsx         | 60 +++++++----
 .../submissionForm/OfferDetailsForm.tsx       | 99 +++++++------------
 .../src/components/offers/table/OffersRow.tsx |  7 +-
 apps/portal/src/pages/offers/home.tsx         | 15 ++-
 .../pages/offers/profile/[offerProfileId].tsx | 14 ++-
 7 files changed, 116 insertions(+), 132 deletions(-)

diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts
index 10e3b0b1..e2b14d96 100644
--- a/apps/portal/src/components/offers/constants.ts
+++ b/apps/portal/src/components/offers/constants.ts
@@ -2,26 +2,6 @@ import { EducationBackgroundType } from './types';
 
 export const emptyOption = '----';
 
-// TODO: use enums
-export const titleOptions = [
-  {
-    label: 'Software Engineer',
-    value: 'Software Engineer',
-  },
-  {
-    label: 'Frontend Engineer',
-    value: 'Frontend Engineer',
-  },
-  {
-    label: 'Backend Engineer',
-    value: 'Backend Engineer',
-  },
-  {
-    label: 'Full-stack Engineer',
-    value: 'Full-stack Engineer',
-  },
-];
-
 export const locationOptions = [
   {
     label: 'Singapore, Singapore',
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 95d43be8..0e1127ab 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -115,7 +115,7 @@ export default function OffersSubmissionForm({
       ),
       hasNext: true,
       hasPrevious: false,
-      label: 'Offer details',
+      label: 'Offers',
     },
     {
       component: <BackgroundForm key={1} />,
@@ -125,28 +125,33 @@ export default function OffersSubmissionForm({
     },
     {
       component: (
-        <OfferAnalysis
+        <OffersProfileSave
           key={2}
-          allAnalysis={analysis}
-          isError={generateAnalysisMutation.isError}
-          isLoading={generateAnalysisMutation.isLoading}
+          profileId={createProfileResponse.id || ''}
+          token={createProfileResponse.token}
         />
       ),
       hasNext: true,
       hasPrevious: false,
-      label: 'Analysis',
+      label: 'Save profile',
     },
     {
       component: (
-        <OffersProfileSave
-          key={3}
-          profileId={createProfileResponse.id || ''}
-          token={createProfileResponse.token}
-        />
+        <div>
+          <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
+            Result
+          </h5>
+          <OfferAnalysis
+            key={3}
+            allAnalysis={analysis}
+            isError={generateAnalysisMutation.isError}
+            isLoading={generateAnalysisMutation.isLoading}
+          />
+        </div>
       ),
       hasNext: false,
-      hasPrevious: false,
-      label: 'Save',
+      hasPrevious: true,
+      label: 'Analysis',
     },
   ];
 
@@ -231,7 +236,7 @@ export default function OffersSubmissionForm({
           <FormProvider {...formMethods}>
             <form onSubmit={handleSubmit(onSubmit)}>
               {formSteps[formStep].component}
-              {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
+              <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre>
               {formSteps[formStep].hasNext && (
                 <div className="flex justify-end">
                   <Button
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index 6c89684a..9f80aee0 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -8,13 +8,17 @@ import {
   emptyOption,
   FieldError,
   locationOptions,
-  titleOptions,
 } from '~/components/offers/constants';
 import type { BackgroundPostData } from '~/components/offers/types';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
-import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum';
+import {
+  Currency,
+  CURRENCY_OPTIONS,
+} from '~/utils/offers/currency/CurrencyEnum';
 
+import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
 import FormRadioList from '../../forms/FormRadioList';
 import FormSelect from '../../forms/FormSelect';
 import FormTextInput from '../../forms/FormTextInput';
@@ -92,13 +96,13 @@ function FullTimeJobFields() {
   return (
     <>
       <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
-          display="block"
-          label="Title"
-          options={titleOptions}
-          placeholder={emptyOption}
-          {...register(`background.experiences.0.title`)}
-        />
+        <div>
+          <JobTitlesTypeahead
+            onSelect={({ value }) =>
+              setValue(`background.experiences.0.title`, value)
+            }
+          />
+        </div>
         <div>
           <CompaniesTypeahead
             onSelect={({ value }) =>
@@ -112,6 +116,7 @@ function FullTimeJobFields() {
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
@@ -177,13 +182,13 @@ function InternshipJobFields() {
   return (
     <>
       <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
-          display="block"
-          label="Title"
-          options={titleOptions}
-          placeholder={emptyOption}
-          {...register(`background.experiences.0.title`)}
-        />
+        <div>
+          <JobTitlesTypeahead
+            onSelect={({ value }) =>
+              setValue(`background.experiences.0.title`, value)
+            }
+          />
+        </div>
         <div>
           <CompaniesTypeahead
             onSelect={({ value }) =>
@@ -197,6 +202,7 @@ function InternshipJobFields() {
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
@@ -310,6 +316,22 @@ function EducationSection() {
               {...register(`background.educations.0.school`)}
             />
           </div>
+          <div className="grid grid-cols-2 space-x-3">
+            <FormMonthYearPicker
+              monthLabel="Candidature Start"
+              yearLabel=""
+              {...register(`background.educations.0.startDate`, {
+                required: FieldError.REQUIRED,
+              })}
+            />
+            <FormMonthYearPicker
+              monthLabel="Candidature End"
+              yearLabel=""
+              {...register(`background.educations.0.endDate`, {
+                required: FieldError.REQUIRED,
+              })}
+            />
+          </div>
         </Collapsible>
       </div>
     </>
@@ -319,13 +341,9 @@ function EducationSection() {
 export default function BackgroundForm() {
   return (
     <div>
-      <h5 className="mb-2 text-center text-4xl font-bold text-slate-900">
+      <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Help us better gauge your offers
       </h5>
-      <h6 className="text-md mx-10 mb-8 text-center font-light text-slate-600">
-        This section is mostly optional, but your background information helps
-        us benchmark your offers.
-      </h6>
       <div>
         <YoeSection />
         <CurrentJobSection />
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index eb9fcc3f..5b64586d 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
@@ -13,6 +13,7 @@ import { JobType } from '@prisma/client';
 import { Button, Dialog } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
 import {
   defaultFullTimeOfferValues,
@@ -23,7 +24,6 @@ import {
   FieldError,
   internshipCycleOptions,
   locationOptions,
-  titleOptions,
   yearOptions,
 } from '../../constants';
 import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
@@ -32,7 +32,10 @@ import FormTextArea from '../../forms/FormTextArea';
 import FormTextInput from '../../forms/FormTextInput';
 import type { OfferFormData } from '../../types';
 import { JobTypeLabel } from '../../types';
-import { CURRENCY_OPTIONS } from '../../../../utils/offers/currency/CurrencyEnum';
+import {
+  Currency,
+  CURRENCY_OPTIONS,
+} from '../../../../utils/offers/currency/CurrencyEnum';
 
 type FullTimeOfferDetailsFormProps = Readonly<{
   index: number;
@@ -64,32 +67,11 @@ function FullTimeOfferDetailsForm({
   return (
     <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.offersFullTime?.title?.message}
-          label="Title"
-          options={titleOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.offersFullTime.title`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-        <FormTextInput
-          errorMessage={offerFields?.offersFullTime?.specialization?.message}
-          label="Focus / Specialization"
-          placeholder="e.g. Front End"
-          required={true}
-          {...register(`offers.${index}.offersFullTime.specialization`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5 flex grid grid-cols-2 space-x-3">
         <div>
-          <CompaniesTypeahead
+          <JobTitlesTypeahead
+            required={true}
             onSelect={({ value }) =>
-              setValue(`offers.${index}.companyId`, value)
+              setValue(`offers.${index}.offersFullTime.title`, value)
             }
           />
         </div>
@@ -103,7 +85,15 @@ function FullTimeOfferDetailsForm({
           })}
         />
       </div>
-      <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
+      <div className="mb-5 flex grid grid-cols-2 space-x-3">
+        <div>
+          <CompaniesTypeahead
+            required={true}
+            onSelect={({ value }) =>
+              setValue(`offers.${index}.companyId`, value)
+            }
+          />
+        </div>
         <FormSelect
           display="block"
           errorMessage={offerFields?.location?.message}
@@ -115,6 +105,8 @@ function FullTimeOfferDetailsForm({
             required: FieldError.REQUIRED,
           })}
         />
+      </div>
+      <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
         <FormMonthYearPicker
           monthLabel="Date Received"
           monthRequired={true}
@@ -129,6 +121,7 @@ function FullTimeOfferDetailsForm({
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
@@ -165,14 +158,12 @@ function FullTimeOfferDetailsForm({
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
               {...register(
                 `offers.${index}.offersFullTime.baseSalary.currency`,
-                {
-                  required: FieldError.REQUIRED,
-                },
               )}
             />
           }
@@ -180,13 +171,11 @@ function FullTimeOfferDetailsForm({
           errorMessage={offerFields?.offersFullTime?.baseSalary?.value?.message}
           label="Base Salary (Annual)"
           placeholder="0"
-          required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
           {...register(`offers.${index}.offersFullTime.baseSalary.value`, {
             min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            required: FieldError.REQUIRED,
             valueAsNumber: true,
           })}
         />
@@ -194,25 +183,22 @@ function FullTimeOfferDetailsForm({
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.offersFullTime.bonus.currency`, {
-                required: FieldError.REQUIRED,
-              })}
+              {...register(`offers.${index}.offersFullTime.bonus.currency`)}
             />
           }
           endAddOnType="element"
           errorMessage={offerFields?.offersFullTime?.bonus?.value?.message}
           label="Bonus (Annual)"
           placeholder="0"
-          required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
           {...register(`offers.${index}.offersFullTime.bonus.value`, {
             min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            required: FieldError.REQUIRED,
             valueAsNumber: true,
           })}
         />
@@ -222,25 +208,22 @@ function FullTimeOfferDetailsForm({
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.offersFullTime.stocks.currency`, {
-                required: FieldError.REQUIRED,
-              })}
+              {...register(`offers.${index}.offersFullTime.stocks.currency`)}
             />
           }
           endAddOnType="element"
           errorMessage={offerFields?.offersFullTime?.stocks?.value?.message}
           label="Stocks (Annual)"
           placeholder="0"
-          required={true}
           startAddOn="$"
           startAddOnType="label"
           type="number"
           {...register(`offers.${index}.offersFullTime.stocks.value`, {
             min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            required: FieldError.REQUIRED,
             valueAsNumber: true,
           })}
         />
@@ -291,32 +274,19 @@ function InternshipOfferDetailsForm({
   return (
     <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.offersIntern?.title?.message}
-          label="Title"
-          options={titleOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.offersIntern.title`, {
-            minLength: 1,
-            required: FieldError.REQUIRED,
-          })}
-        />
-        <FormTextInput
-          errorMessage={offerFields?.offersIntern?.specialization?.message}
-          label="Focus / Specialization"
-          placeholder="e.g. Front End"
-          required={true}
-          {...register(`offers.${index}.offersIntern.specialization`, {
-            minLength: 1,
-            required: FieldError.REQUIRED,
-          })}
-        />
+        <div>
+          <JobTitlesTypeahead
+            required={true}
+            onSelect={({ value }) =>
+              setValue(`offers.${index}.offersIntern.title`, value)
+            }
+          />
+        </div>
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <div>
           <CompaniesTypeahead
+            required={true}
             onSelect={({ value }) =>
               setValue(`offers.${index}.companyId`, value)
             }
@@ -374,6 +344,7 @@ function InternshipOfferDetailsForm({
           endAddOn={
             <FormSelect
               borderStyle="borderless"
+              defaultValue={Currency.SGD}
               isLabelHidden={true}
               label="Currency"
               options={CURRENCY_OPTIONS}
diff --git a/apps/portal/src/components/offers/table/OffersRow.tsx b/apps/portal/src/components/offers/table/OffersRow.tsx
index 065e705b..1f4d8856 100644
--- a/apps/portal/src/components/offers/table/OffersRow.tsx
+++ b/apps/portal/src/components/offers/table/OffersRow.tsx
@@ -1,5 +1,8 @@
 import Link from 'next/link';
 
+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';
 
@@ -19,7 +22,9 @@ export default function OfferTableRow({
         scope="row">
         {company.name}
       </th>
-      <td className="py-4 px-6">{title}</td>
+      <td className="py-4 px-6">
+        {getLabelForJobTitleType(title as JobTitleType)}
+      </td>
       <td className="py-4 px-6">{totalYoe}</td>
       <td className="py-4 px-6">{convertMoneyToString(income)}</td>
       <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
diff --git a/apps/portal/src/pages/offers/home.tsx b/apps/portal/src/pages/offers/home.tsx
index c25dc7f7..31a9ab3c 100644
--- a/apps/portal/src/pages/offers/home.tsx
+++ b/apps/portal/src/pages/offers/home.tsx
@@ -1,13 +1,12 @@
 import { useState } from 'react';
-import { Select } from '@tih/ui';
 
-import { titleOptions } from '~/components/offers/constants';
 import OffersTitle from '~/components/offers/OffersTitle';
 import OffersTable from '~/components/offers/table/OffersTable';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
 export default function OffersHomePage() {
-  const [jobTitleFilter, setjobTitleFilter] = useState('Software Engineer');
+  const [jobTitleFilter, setjobTitleFilter] = useState('software-engineer');
   const [companyFilter, setCompanyFilter] = useState('');
 
   return (
@@ -18,19 +17,17 @@ export default function OffersHomePage() {
           <div className="mt-4 flex items-center">
             Viewing offers for
             <div className="mx-4">
-              <Select
+              <JobTitlesTypeahead
                 isLabelHidden={true}
-                label="Select a job title"
-                options={titleOptions}
-                value={jobTitleFilter}
-                onChange={setjobTitleFilter}
+                placeHolder="Software Engineer"
+                onSelect={({ value }) => setjobTitleFilter(value)}
               />
             </div>
             in
             <div className="ml-4">
               <CompaniesTypeahead
                 isLabelHidden={true}
-                placeHolder="All companies"
+                placeHolder="All Companies"
                 onSelect={({ value }) => setCompanyFilter(value)}
               />
             </div>
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index 9c53360e..e90d8f77 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -10,6 +10,8 @@ import type {
   BackgroundDisplayData,
   OfferDisplayData,
 } from '~/components/offers/types';
+import type { JobTitleType } from '~/components/shared/JobTitles';
+import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
 import { useToast } from '~/../../../packages/ui/dist';
 import { convertMoneyToString } from '~/utils/offers/currency';
@@ -62,7 +64,9 @@ export default function OfferProfile() {
                   companyName: res.company.name,
                   id: res.offersFullTime.id,
                   jobLevel: res.offersFullTime.level,
-                  jobTitle: res.offersFullTime.title,
+                  jobTitle: getLabelForJobTitleType(
+                    res.offersFullTime.title as JobTitleType,
+                  ),
                   location: res.location,
                   negotiationStrategy: res.negotiationStrategy,
                   otherComment: res.comments,
@@ -77,7 +81,9 @@ export default function OfferProfile() {
               const filteredOffer: OfferDisplayData = {
                 companyName: res.company.name,
                 id: res.offersIntern!.id,
-                jobTitle: res.offersIntern!.title,
+                jobTitle: getLabelForJobTitleType(
+                  res.offersIntern!.title as JobTitleType,
+                ),
                 location: res.location,
                 monthlySalary: convertMoneyToString(
                   res.offersIntern!.monthlySalary,
@@ -107,7 +113,9 @@ export default function OfferProfile() {
                 companyName: experience.company?.name,
                 duration: experience.durationInMonths,
                 jobLevel: experience.level,
-                jobTitle: experience.title,
+                jobTitle: experience.title
+                  ? getLabelForJobTitleType(experience.title as JobTitleType)
+                  : null,
                 monthlySalary: experience.monthlySalary
                   ? convertMoneyToString(experience.monthlySalary)
                   : null,

From 471a28be8ae06cc3513fd2a17435626cefa9cbf2 Mon Sep 17 00:00:00 2001
From: hpkoh <53825802+hpkoh@users.noreply.github.com>
Date: Mon, 24 Oct 2022 22:56:50 +0800
Subject: [PATCH 04/12] [questions][feat] pagination (#410)

* [questions][feat] pagination

* [questions][feat] update aggregated data

* [questions][feat] add next cursors

* [questions][fix] fix bug

* [questions][chore] fix lint error

* [questions][chore] update cursor to support adapter

* [questions][feat] paginate browse queries

* [questions][ui] change page size to 10

* [question][refactor] clean up router code

* [questions][fix] fix type errors

* [questions][feat] add upvotes tracking

* [questions][chore] add default upovte value

Co-authored-by: Jeff Sieu <jeffsy00@gmail.com>
---
 .../migration.sql                             |  14 +
 .../migration.sql                             |   2 +
 apps/portal/prisma/schema.prisma              |   3 +
 .../questions/filter/FilterSection.tsx        |  51 +--
 .../questions/typeahead/ExpandedTypeahead.tsx |  29 +-
 apps/portal/src/pages/questions/browse.tsx    | 308 +++++++++++-------
 .../router/questions-answer-comment-router.ts |  88 +++--
 .../server/router/questions-answer-router.ts  |  87 +++--
 .../questions-question-comment-router.ts      |  86 +++--
 .../questions-question-encounter-router.ts    |   5 +
 .../router/questions-question-router.ts       | 147 ++++++++-
 apps/portal/src/types/questions.d.ts          |   6 +-
 12 files changed, 596 insertions(+), 230 deletions(-)
 create mode 100644 apps/portal/prisma/migrations/20221024123252_add_upvotes_to_schema/migration.sql
 create mode 100644 apps/portal/prisma/migrations/20221024123849_add_upvotes_default_value/migration.sql

diff --git a/apps/portal/prisma/migrations/20221024123252_add_upvotes_to_schema/migration.sql b/apps/portal/prisma/migrations/20221024123252_add_upvotes_to_schema/migration.sql
new file mode 100644
index 00000000..81d336ec
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221024123252_add_upvotes_to_schema/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - Added the required column `upvotes` to the `QuestionsAnswerComment` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "QuestionsAnswer" ADD COLUMN     "upvotes" INTEGER NOT NULL DEFAULT 0;
+
+-- AlterTable
+ALTER TABLE "QuestionsAnswerComment" ADD COLUMN     "upvotes" INTEGER NOT NULL;
+
+-- AlterTable
+ALTER TABLE "QuestionsQuestionComment" ADD COLUMN     "upvotes" INTEGER NOT NULL DEFAULT 0;
diff --git a/apps/portal/prisma/migrations/20221024123849_add_upvotes_default_value/migration.sql b/apps/portal/prisma/migrations/20221024123849_add_upvotes_default_value/migration.sql
new file mode 100644
index 00000000..f4a342af
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221024123849_add_upvotes_default_value/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "QuestionsAnswerComment" ALTER COLUMN "upvotes" SET DEFAULT 0;
diff --git a/apps/portal/prisma/schema.prisma b/apps/portal/prisma/schema.prisma
index fb263f80..ae5a9f16 100644
--- a/apps/portal/prisma/schema.prisma
+++ b/apps/portal/prisma/schema.prisma
@@ -454,6 +454,7 @@ model QuestionsQuestionComment {
   id         String   @id @default(cuid())
   questionId String
   userId     String?
+  upvotes    Int      @default(0)
   content    String   @db.Text
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
@@ -482,6 +483,7 @@ model QuestionsAnswer {
   questionId String
   userId     String?
   content    String   @db.Text
+  upvotes    Int      @default(0)
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
 
@@ -510,6 +512,7 @@ model QuestionsAnswerComment {
   answerId  String
   userId    String?
   content   String   @db.Text
+  upvotes   Int      @default(0)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
diff --git a/apps/portal/src/components/questions/filter/FilterSection.tsx b/apps/portal/src/components/questions/filter/FilterSection.tsx
index b72bc7ff..4d878887 100644
--- a/apps/portal/src/components/questions/filter/FilterSection.tsx
+++ b/apps/portal/src/components/questions/filter/FilterSection.tsx
@@ -17,29 +17,26 @@ export type FilterChoices<V extends string = string> = ReadonlyArray<
   FilterChoice<V>
 >;
 
-type FilterSectionType<FilterOptions extends Array<FilterOption>> =
+type FilterSectionType<V extends string> =
   | {
       isSingleSelect: true;
-      onOptionChange: (optionValue: FilterOptions[number]['value']) => void;
+      onOptionChange: (option: FilterOption<V>) => void;
     }
   | {
       isSingleSelect?: false;
-      onOptionChange: (
-        optionValue: FilterOptions[number]['value'],
-        checked: boolean,
-      ) => void;
+      onOptionChange: (option: FilterOption<V>) => void;
     };
 
-export type FilterSectionProps<FilterOptions extends Array<FilterOption>> =
-  FilterSectionType<FilterOptions> & {
+export type FilterSectionProps<V extends string = string> =
+  FilterSectionType<V> & {
     label: string;
-    options: FilterOptions;
+    options: Array<FilterOption<V>>;
   } & (
       | {
           renderInput: (props: {
             field: UseFormRegisterReturn<'search'>;
-            onOptionChange: FilterSectionType<FilterOptions>['onOptionChange'];
-            options: FilterOptions;
+            onOptionChange: FilterSectionType<V>['onOptionChange'];
+            options: Array<FilterOption<V>>;
           }) => React.ReactNode;
           showAll?: never;
         }
@@ -53,16 +50,14 @@ export type FilterSectionFormData = {
   search: string;
 };
 
-export default function FilterSection<
-  FilterOptions extends Array<FilterOption>,
->({
+export default function FilterSection<V extends string>({
   label,
   options,
   showAll,
   onOptionChange,
   isSingleSelect,
   renderInput,
-}: FilterSectionProps<FilterOptions>) {
+}: FilterSectionProps<V>) {
   const { register, reset } = useForm<FilterSectionFormData>();
 
   const registerSearch = register('search');
@@ -76,7 +71,9 @@ export default function FilterSection<
   };
 
   const autocompleteOptions = useMemo(() => {
-    return options.filter((option) => !option.checked) as FilterOptions;
+    return options.filter((option) => !option.checked) as Array<
+      FilterOption<V>
+    >;
   }, [options]);
 
   const selectedCount = useMemo(() => {
@@ -102,11 +99,12 @@ export default function FilterSection<
             <div className="z-10">
               {renderInput({
                 field,
-                onOptionChange: async (
-                  optionValue: FilterOptions[number]['value'],
-                ) => {
+                onOptionChange: async (option: FilterOption<V>) => {
                   reset();
-                  return onOptionChange(optionValue, true);
+                  return onOptionChange({
+                    ...option,
+                    checked: true,
+                  });
                 },
                 options: autocompleteOptions,
               })}
@@ -119,7 +117,13 @@ export default function FilterSection<
                 label={label}
                 value={options.find((option) => option.checked)?.value}
                 onChange={(value) => {
-                  onOptionChange(value);
+                  const changedOption = options.find(
+                    (option) => option.value === value,
+                  )!;
+                  onOptionChange({
+                    ...changedOption,
+                    checked: !changedOption.checked,
+                  });
                 }}>
                 {options.map((option) => (
                   <RadioList.Item
@@ -140,7 +144,10 @@ export default function FilterSection<
                     label={option.label}
                     value={option.checked}
                     onChange={(checked) => {
-                      onOptionChange(option.value, checked);
+                      onOptionChange({
+                        ...option,
+                        checked,
+                      });
                     }}
                   />
                 ))}
diff --git a/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx b/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
index 6e96894d..a485c6ed 100644
--- a/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
@@ -1,4 +1,6 @@
 import type { ComponentProps } from 'react';
+import { useState } from 'react';
+import { useMemo } from 'react';
 import { Button, Typeahead } from '@tih/ui';
 
 import type { RequireAllOrNone } from '~/utils/questions/RequireAllOrNone';
@@ -7,6 +9,8 @@ type TypeaheadProps = ComponentProps<typeof Typeahead>;
 type TypeaheadOption = TypeaheadProps['options'][number];
 
 export type ExpandedTypeaheadProps = RequireAllOrNone<{
+  clearOnSelect?: boolean;
+  filterOption: (option: TypeaheadOption) => boolean;
   onSuggestionClick: (option: TypeaheadOption) => void;
   suggestedCount: number;
 }> &
@@ -15,9 +19,20 @@ export type ExpandedTypeaheadProps = RequireAllOrNone<{
 export default function ExpandedTypeahead({
   suggestedCount = 0,
   onSuggestionClick,
+  filterOption = () => true,
+  clearOnSelect = false,
+  options,
+  onSelect,
   ...typeaheadProps
 }: ExpandedTypeaheadProps) {
-  const suggestions = typeaheadProps.options.slice(0, suggestedCount);
+  const [key, setKey] = useState(0);
+  const filteredOptions = useMemo(() => {
+    return options.filter(filterOption);
+  }, [options, filterOption]);
+  const suggestions = useMemo(
+    () => filteredOptions.slice(0, suggestedCount),
+    [filteredOptions, suggestedCount],
+  );
 
   return (
     <div className="flex flex-wrap gap-x-2">
@@ -32,7 +47,17 @@ export default function ExpandedTypeahead({
         />
       ))}
       <div className="flex-1">
-        <Typeahead {...typeaheadProps} />
+        <Typeahead
+          key={key}
+          options={filteredOptions}
+          {...typeaheadProps}
+          onSelect={(option) => {
+            if (clearOnSelect) {
+              setKey((key + 1) % 2);
+            }
+            onSelect(option);
+          }}
+        />
       </div>
     </div>
   );
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 163d4842..cb895f27 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -5,24 +5,22 @@ import { useEffect, useMemo, useState } from 'react';
 import { Bars3BottomLeftIcon } from '@heroicons/react/20/solid';
 import { NoSymbolIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
-import { Button, SlideOut, Typeahead } from '@tih/ui';
+import { Button, SlideOut } from '@tih/ui';
 
 import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
+import type { FilterOption } from '~/components/questions/filter/FilterSection';
 import FilterSection from '~/components/questions/filter/FilterSection';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
+import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
+import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahead';
+import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
 
 import type { QuestionAge } from '~/utils/questions/constants';
 import { SORT_TYPES } from '~/utils/questions/constants';
 import { SORT_ORDERS } from '~/utils/questions/constants';
 import { APP_TITLE } from '~/utils/questions/constants';
-import { ROLES } from '~/utils/questions/constants';
-import {
-  COMPANIES,
-  LOCATIONS,
-  QUESTION_AGES,
-  QUESTION_TYPES,
-} from '~/utils/questions/constants';
+import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
 import {
   useSearchParam,
@@ -148,12 +146,18 @@ export default function QuestionsBrowsePage() {
       : undefined;
   }, [selectedQuestionAge]);
 
-  const { data: questions } = trpc.useQuery(
+  const {
+    data: questionsQueryData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = trpc.useInfiniteQuery(
     [
       'questions.questions.getQuestionsByFilter',
       {
         companyNames: selectedCompanies,
         endDate: today,
+        limit: 10,
         locations: selectedLocations,
         questionTypes: selectedQuestionTypes,
         roles: selectedRoles,
@@ -163,10 +167,21 @@ export default function QuestionsBrowsePage() {
       },
     ],
     {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
       keepPreviousData: true,
     },
   );
 
+  const questionCount = useMemo(() => {
+    if (!questionsQueryData) {
+      return undefined;
+    }
+    return questionsQueryData.pages.reduce(
+      (acc, page) => acc + page.data.length,
+      0,
+    );
+  }, [questionsQueryData]);
+
   const utils = trpc.useContext();
   const { mutate: createQuestion } = trpc.useMutation(
     'questions.questions.create',
@@ -180,12 +195,17 @@ export default function QuestionsBrowsePage() {
   const [loaded, setLoaded] = useState(false);
   const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 
-  const companyFilterOptions = useMemo(() => {
-    return COMPANIES.map((company) => ({
-      ...company,
-      checked: selectedCompanies.includes(company.value),
-    }));
-  }, [selectedCompanies]);
+  const [selectedCompanyOptions, setSelectedCompanyOptions] = useState<
+    Array<FilterOption>
+  >([]);
+
+  const [selectedRoleOptions, setSelectedRoleOptions] = useState<
+    Array<FilterOption>
+  >([]);
+
+  const [selectedLocationOptions, setSelectedLocationOptions] = useState<
+    Array<FilterOption>
+  >([]);
 
   const questionTypeFilterOptions = useMemo(() => {
     return QUESTION_TYPES.map((questionType) => ({
@@ -201,20 +221,6 @@ export default function QuestionsBrowsePage() {
     }));
   }, [selectedQuestionAge]);
 
-  const roleFilterOptions = useMemo(() => {
-    return ROLES.map((role) => ({
-      ...role,
-      checked: selectedRoles.includes(role.value),
-    }));
-  }, [selectedRoles]);
-
-  const locationFilterOptions = useMemo(() => {
-    return LOCATIONS.map((location) => ({
-      ...location,
-      checked: selectedLocations.includes(location.value),
-    }));
-  }, [selectedLocations]);
-
   const areSearchOptionsInitialized = useMemo(() => {
     return (
       areCompaniesInitialized &&
@@ -287,35 +293,89 @@ export default function QuestionsBrowsePage() {
           setSelectedQuestionAge('all');
           setSelectedRoles([]);
           setSelectedLocations([]);
+          setSelectedCompanyOptions([]);
+          setSelectedRoleOptions([]);
+          setSelectedLocationOptions([]);
         }}
       />
       <FilterSection
-        label="Company"
-        options={companyFilterOptions}
-        renderInput={({
-          onOptionChange,
-          options,
-          field: { ref: _, ...field },
-        }) => (
-          <Typeahead
+        label="Companies"
+        options={selectedCompanyOptions}
+        renderInput={({ onOptionChange, field: { ref: _, ...field } }) => (
+          <CompanyTypeahead
             {...field}
+            clearOnSelect={true}
+            filterOption={(option) => {
+              return !selectedCompanyOptions.some((selectedOption) => {
+                return selectedOption.value === option.value;
+              });
+            }}
             isLabelHidden={true}
-            label="Companies"
-            options={options}
             placeholder="Search companies"
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onQueryChange={() => {}}
-            onSelect={({ value }) => {
-              onOptionChange(value, true);
+            onSelect={(option) => {
+              onOptionChange({
+                ...option,
+                checked: true,
+              });
             }}
           />
         )}
-        onOptionChange={(optionValue, checked) => {
-          if (checked) {
-            setSelectedCompanies([...selectedCompanies, optionValue]);
+        onOptionChange={(option) => {
+          if (option.checked) {
+            setSelectedCompanies([...selectedCompanies, option.label]);
+            setSelectedCompanyOptions((prevOptions) => [
+              ...prevOptions,
+              { ...option, checked: true },
+            ]);
           } else {
             setSelectedCompanies(
-              selectedCompanies.filter((company) => company !== optionValue),
+              selectedCompanies.filter((company) => company !== option.label),
+            );
+            setSelectedCompanyOptions((prevOptions) =>
+              prevOptions.filter(
+                (prevOption) => prevOption.label !== option.label,
+              ),
+            );
+          }
+        }}
+      />
+      <FilterSection
+        label="Roles"
+        options={selectedRoleOptions}
+        renderInput={({ onOptionChange, field: { ref: _, ...field } }) => (
+          <RoleTypeahead
+            {...field}
+            clearOnSelect={true}
+            filterOption={(option) => {
+              return !selectedRoleOptions.some((selectedOption) => {
+                return selectedOption.value === option.value;
+              });
+            }}
+            isLabelHidden={true}
+            placeholder="Search roles"
+            onSelect={(option) => {
+              onOptionChange({
+                ...option,
+                checked: true,
+              });
+            }}
+          />
+        )}
+        onOptionChange={(option) => {
+          if (option.checked) {
+            setSelectedRoles([...selectedRoles, option.value]);
+            setSelectedRoleOptions((prevOptions) => [
+              ...prevOptions,
+              { ...option, checked: true },
+            ]);
+          } else {
+            setSelectedRoles(
+              selectedCompanies.filter((role) => role !== option.value),
+            );
+            setSelectedRoleOptions((prevOptions) =>
+              prevOptions.filter(
+                (prevOption) => prevOption.value !== option.value,
+              ),
             );
           }
         }}
@@ -324,13 +384,13 @@ export default function QuestionsBrowsePage() {
         label="Question types"
         options={questionTypeFilterOptions}
         showAll={true}
-        onOptionChange={(optionValue, checked) => {
-          if (checked) {
-            setSelectedQuestionTypes([...selectedQuestionTypes, optionValue]);
+        onOptionChange={(option) => {
+          if (option.checked) {
+            setSelectedQuestionTypes([...selectedQuestionTypes, option.value]);
           } else {
             setSelectedQuestionTypes(
               selectedQuestionTypes.filter(
-                (questionType) => questionType !== optionValue,
+                (questionType) => questionType !== option.value,
               ),
             );
           }
@@ -341,68 +401,47 @@ export default function QuestionsBrowsePage() {
         label="Question age"
         options={questionAgeFilterOptions}
         showAll={true}
-        onOptionChange={(optionValue) => {
-          setSelectedQuestionAge(optionValue);
+        onOptionChange={({ value }) => {
+          setSelectedQuestionAge(value);
         }}
       />
       <FilterSection
-        label="Roles"
-        options={roleFilterOptions}
-        renderInput={({
-          onOptionChange,
-          options,
-          field: { ref: _, ...field },
-        }) => (
-          <Typeahead
+        label="Locations"
+        options={selectedLocationOptions}
+        renderInput={({ onOptionChange, field: { ref: _, ...field } }) => (
+          <LocationTypeahead
             {...field}
-            isLabelHidden={true}
-            label="Roles"
-            options={options}
-            placeholder="Search roles"
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onQueryChange={() => {}}
-            onSelect={({ value }) => {
-              onOptionChange(value, true);
+            clearOnSelect={true}
+            filterOption={(option) => {
+              return !selectedLocationOptions.some((selectedOption) => {
+                return selectedOption.value === option.value;
+              });
             }}
-          />
-        )}
-        onOptionChange={(optionValue, checked) => {
-          if (checked) {
-            setSelectedRoles([...selectedRoles, optionValue]);
-          } else {
-            setSelectedRoles(
-              selectedRoles.filter((role) => role !== optionValue),
-            );
-          }
-        }}
-      />
-      <FilterSection
-        label="Location"
-        options={locationFilterOptions}
-        renderInput={({
-          onOptionChange,
-          options,
-          field: { ref: _, ...field },
-        }) => (
-          <Typeahead
-            {...field}
             isLabelHidden={true}
-            label="Locations"
-            options={options}
             placeholder="Search locations"
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onQueryChange={() => {}}
-            onSelect={({ value }) => {
-              onOptionChange(value, true);
+            onSelect={(option) => {
+              onOptionChange({
+                ...option,
+                checked: true,
+              });
             }}
           />
         )}
-        onOptionChange={(optionValue, checked) => {
-          if (checked) {
-            setSelectedLocations([...selectedLocations, optionValue]);
+        onOptionChange={(option) => {
+          if (option.checked) {
+            setSelectedLocations([...selectedLocations, option.value]);
+            setSelectedLocationOptions((prevOptions) => [
+              ...prevOptions,
+              { ...option, checked: true },
+            ]);
           } else {
             setSelectedLocations(
-              selectedLocations.filter((location) => location !== optionValue),
+              selectedLocations.filter((role) => role !== option.value),
+            );
+            setSelectedLocationOptions((prevOptions) =>
+              prevOptions.filter(
+                (prevOption) => prevOption.value !== option.value,
+              ),
             );
           }
         }}
@@ -443,29 +482,50 @@ export default function QuestionsBrowsePage() {
                   onSortOrderChange={setSortOrder}
                   onSortTypeChange={setSortType}
                 />
-                <div className="flex flex-col gap-4 pb-4">
-                  {(questions ?? []).map((question) => (
-                    <QuestionOverviewCard
-                      key={question.id}
-                      answerCount={question.numAnswers}
-                      companies={{ [question.company]: 1 }}
-                      content={question.content}
-                      href={`/questions/${question.id}/${createSlug(
-                        question.content,
-                      )}`}
-                      locations={{ [question.location]: 1 }}
-                      questionId={question.id}
-                      receivedCount={question.receivedCount}
-                      roles={{ [question.role]: 1 }}
-                      timestamp={question.seenAt.toLocaleDateString(undefined, {
-                        month: 'short',
-                        year: 'numeric',
-                      })}
-                      type={question.type}
-                      upvoteCount={question.numVotes}
-                    />
-                  ))}
-                  {questions?.length === 0 && (
+                <div className="flex flex-col gap-2 pb-4">
+                  {(questionsQueryData?.pages ?? []).flatMap(
+                    ({ data: questions }) =>
+                      questions.map((question) => (
+                        <QuestionOverviewCard
+                          key={question.id}
+                          answerCount={question.numAnswers}
+                          companies={
+                            question.aggregatedQuestionEncounters.companyCounts
+                          }
+                          content={question.content}
+                          href={`/questions/${question.id}/${createSlug(
+                            question.content,
+                          )}`}
+                          locations={
+                            question.aggregatedQuestionEncounters.locationCounts
+                          }
+                          questionId={question.id}
+                          receivedCount={question.receivedCount}
+                          roles={
+                            question.aggregatedQuestionEncounters.roleCounts
+                          }
+                          timestamp={question.seenAt.toLocaleDateString(
+                            undefined,
+                            {
+                              month: 'short',
+                              year: 'numeric',
+                            },
+                          )}
+                          type={question.type}
+                          upvoteCount={question.numVotes}
+                        />
+                      )),
+                  )}
+                  <Button
+                    disabled={!hasNextPage || isFetchingNextPage}
+                    isLoading={isFetchingNextPage}
+                    label={hasNextPage ? 'Load more' : 'Nothing more to load'}
+                    variant="tertiary"
+                    onClick={() => {
+                      fetchNextPage();
+                    }}
+                  />
+                  {questionCount === 0 && (
                     <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
                       <NoSymbolIcon className="h-6 w-6" />
                       <p>Nothing found.</p>
diff --git a/apps/portal/src/server/router/questions-answer-comment-router.ts b/apps/portal/src/server/router/questions-answer-comment-router.ts
index 75977b41..63a9ede4 100644
--- a/apps/portal/src/server/router/questions-answer-comment-router.ts
+++ b/apps/portal/src/server/router/questions-answer-comment-router.ts
@@ -166,13 +166,29 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
 
       const { answerCommentId, vote } = input;
 
-      return await ctx.prisma.questionsAnswerCommentVote.create({
-        data: {
-          answerCommentId,
-          userId,
-          vote,
-        },
-      });
+      const incrementValue = vote === Vote.UPVOTE ? 1 : -1;
+
+      const [answerCommentVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerCommentVote.create({
+          data: {
+            answerCommentId,
+            userId,
+            vote,
+          },
+        }),
+        ctx.prisma.questionsAnswerComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: answerCommentId,
+          },
+        }),
+      ]);
+
+      return answerCommentVote;
     },
   })
   .mutation('updateVote', {
@@ -198,14 +214,30 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsAnswerCommentVote.update({
-        data: {
-          vote,
-        },
-        where: {
-          id,
-        },
-      });
+      const incrementValue = vote === Vote.UPVOTE ? 2 : -2;
+
+      const [answerCommentVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerCommentVote.update({
+          data: {
+            vote,
+          },
+          where: {
+            id,
+          },
+        }),
+        ctx.prisma.questionsAnswerComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToUpdate.answerCommentId,
+          },
+        }),
+      ]);
+
+      return answerCommentVote;
     },
   })
   .mutation('deleteVote', {
@@ -229,10 +261,26 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsAnswerCommentVote.delete({
-        where: {
-          id: input.id,
-        },
-      });
+      const incrementValue = voteToDelete.vote === Vote.UPVOTE ? -1 : 1;
+
+      const [answerCommentVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerCommentVote.delete({
+          where: {
+            id: input.id,
+          },
+        }),
+        ctx.prisma.questionsAnswerComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToDelete.answerCommentId,
+          },
+        }),
+      ]);
+      return answerCommentVote;
+
     },
   });
diff --git a/apps/portal/src/server/router/questions-answer-router.ts b/apps/portal/src/server/router/questions-answer-router.ts
index 5d386854..e2318ba7 100644
--- a/apps/portal/src/server/router/questions-answer-router.ts
+++ b/apps/portal/src/server/router/questions-answer-router.ts
@@ -229,13 +229,28 @@ export const questionsAnswerRouter = createProtectedRouter()
 
       const { answerId, vote } = input;
 
-      return await ctx.prisma.questionsAnswerVote.create({
-        data: {
-          answerId,
-          userId,
-          vote,
-        },
-      });
+      const incrementValue = vote === Vote.UPVOTE ? 1 : -1;
+
+      const [answerVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerVote.create({
+          data: {
+            answerId,
+            userId,
+            vote,
+          },
+        }),
+        ctx.prisma.questionsAnswer.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: answerId,
+          },
+        }),
+      ]);
+      return answerVote;
     },
   })
   .mutation('updateVote', {
@@ -260,14 +275,30 @@ export const questionsAnswerRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsAnswerVote.update({
-        data: {
-          vote,
-        },
-        where: {
-          id,
-        },
-      });
+      const incrementValue = vote === Vote.UPVOTE ? 2 : -2;
+
+      const [questionsAnswerVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerVote.update({
+          data: {
+            vote,
+          },
+          where: {
+            id,
+          },
+        }),
+        ctx.prisma.questionsAnswer.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToUpdate.answerId,
+          },
+        }),
+      ]);
+
+      return questionsAnswerVote;
     },
   })
   .mutation('deleteVote', {
@@ -290,10 +321,26 @@ export const questionsAnswerRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsAnswerVote.delete({
-        where: {
-          id: input.id,
-        },
-      });
+      const incrementValue = voteToDelete.vote === Vote.UPVOTE ? -1 : 1;
+
+      const [questionsAnswerVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsAnswerVote.delete({
+          where: {
+            id: input.id,
+          },
+        }),
+        ctx.prisma.questionsAnswer.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToDelete.answerId,
+          },
+        }),
+      ]);
+      return questionsAnswerVote;
+
     },
   });
diff --git a/apps/portal/src/server/router/questions-question-comment-router.ts b/apps/portal/src/server/router/questions-question-comment-router.ts
index e2f786f9..28cf3b9d 100644
--- a/apps/portal/src/server/router/questions-question-comment-router.ts
+++ b/apps/portal/src/server/router/questions-question-comment-router.ts
@@ -166,13 +166,28 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
       const userId = ctx.session?.user?.id;
       const { questionCommentId, vote } = input;
 
-      return await ctx.prisma.questionsQuestionCommentVote.create({
-        data: {
-          questionCommentId,
-          userId,
-          vote,
-        },
-      });
+      const incrementValue: number = vote === Vote.UPVOTE ? 1 : -1;
+
+      const [ questionCommentVote ] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsQuestionCommentVote.create({
+          data: {
+            questionCommentId,
+            userId,
+            vote,
+          },
+        }),
+        ctx.prisma.questionsQuestionComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: questionCommentId,
+          },
+        }),
+      ]);
+      return questionCommentVote;
     },
   })
   .mutation('updateVote', {
@@ -198,14 +213,30 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsQuestionCommentVote.update({
-        data: {
-          vote,
-        },
-        where: {
-          id,
-        },
-      });
+      const incrementValue = vote === Vote.UPVOTE ? 2 : -2;
+
+      const [questionCommentVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsQuestionCommentVote.update({
+          data: {
+            vote,
+          },
+          where: {
+            id,
+          },
+        }),
+        ctx.prisma.questionsQuestionComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToUpdate.questionCommentId,
+          },
+        }),
+      ]);
+
+      return questionCommentVote;
     },
   })
   .mutation('deleteVote', {
@@ -229,10 +260,25 @@ export const questionsQuestionCommentRouter = createProtectedRouter()
         });
       }
 
-      return await ctx.prisma.questionsQuestionCommentVote.delete({
-        where: {
-          id: input.id,
-        },
-      });
+      const incrementValue = voteToDelete.vote === Vote.UPVOTE ? -1 : 1;
+
+      const [questionCommentVote] = await ctx.prisma.$transaction([
+        ctx.prisma.questionsQuestionCommentVote.delete({
+          where: {
+            id: input.id,
+          },
+        }),
+        ctx.prisma.questionsQuestionComment.update({
+          data: {
+            upvotes: {
+              increment: incrementValue,
+            },
+          },
+          where: {
+            id: voteToDelete.questionCommentId,
+          },
+        }),
+      ]);
+      return questionCommentVote;
     },
   });
diff --git a/apps/portal/src/server/router/questions-question-encounter-router.ts b/apps/portal/src/server/router/questions-question-encounter-router.ts
index 1f328dc6..0f597ad3 100644
--- a/apps/portal/src/server/router/questions-question-encounter-router.ts
+++ b/apps/portal/src/server/router/questions-question-encounter-router.ts
@@ -25,9 +25,13 @@ export const questionsQuestionEncounterRouter = createProtectedRouter()
       const locationCounts: Record<string, number> = {};
       const roleCounts: Record<string, number> = {};
 
+      let latestSeenAt = questionEncountersData[0].seenAt;
+
       for (let i = 0; i < questionEncountersData.length; i++) {
         const encounter = questionEncountersData[i];
 
+        latestSeenAt = latestSeenAt < encounter.seenAt ? encounter.seenAt : latestSeenAt;
+
         if (!(encounter.company!.name in companyCounts)) {
           companyCounts[encounter.company!.name] = 1;
         }
@@ -46,6 +50,7 @@ export const questionsQuestionEncounterRouter = createProtectedRouter()
 
       const questionEncounter: AggregatedQuestionEncounter = {
         companyCounts,
+        latestSeenAt,
         locationCounts,
         roleCounts,
       };
diff --git a/apps/portal/src/server/router/questions-question-router.ts b/apps/portal/src/server/router/questions-question-router.ts
index 3768b852..3c4f8f8b 100644
--- a/apps/portal/src/server/router/questions-question-router.ts
+++ b/apps/portal/src/server/router/questions-question-router.ts
@@ -11,9 +11,16 @@ export const questionsQuestionRouter = createProtectedRouter()
   .query('getQuestionsByFilter', {
     input: z.object({
       companyNames: z.string().array(),
+      cursor: z
+        .object({
+          idCursor: z.string().optional(),
+          lastSeenCursor: z.date().optional(),
+          upvoteCursor: z.number().optional(),
+        })
+        .nullish(),
       endDate: z.date().default(new Date()),
+      limit: z.number().min(1).default(50),
       locations: z.string().array(),
-      pageSize: z.number().default(50),
       questionTypes: z.nativeEnum(QuestionsQuestionType).array(),
       roles: z.string().array(),
       sortOrder: z.nativeEnum(SortOrder),
@@ -21,16 +28,36 @@ export const questionsQuestionRouter = createProtectedRouter()
       startDate: z.date().optional(),
     }),
     async resolve({ ctx, input }) {
+      const { cursor } = input;
+
       const sortCondition =
         input.sortType === SortType.TOP
-          ? {
-              upvotes: input.sortOrder,
-            }
-          : {
-              lastSeenAt: input.sortOrder,
-            };
+          ? [
+              {
+                upvotes: input.sortOrder,
+              },
+              {
+                id: input.sortOrder,
+              },
+            ]
+          : [
+              {
+                lastSeenAt: input.sortOrder,
+              },
+              {
+                id: input.sortOrder,
+              },
+            ];
+
+      const toSkip = cursor ? 1 : 0;
 
       const questionsData = await ctx.prisma.questionsQuestion.findMany({
+        cursor:
+          cursor !== undefined
+            ? {
+                id: cursor ? cursor!.idCursor : undefined,
+              }
+            : undefined,
         include: {
           _count: {
             select: {
@@ -53,9 +80,9 @@ export const questionsQuestionRouter = createProtectedRouter()
           },
           votes: true,
         },
-        orderBy: {
-          ...sortCondition,
-        },
+        orderBy: sortCondition,
+        skip: toSkip,
+        take: input.limit + 1,
         where: {
           ...(input.questionTypes.length > 0
             ? {
@@ -98,7 +125,7 @@ export const questionsQuestionRouter = createProtectedRouter()
         },
       });
 
-      return questionsData.map((data) => {
+      const processedQuestionsData = questionsData.map((data) => {
         const votes: number = data.votes.reduce(
           (previousValue: number, currentValue) => {
             let result: number = previousValue;
@@ -116,23 +143,78 @@ export const questionsQuestionRouter = createProtectedRouter()
           0,
         );
 
+        const companyCounts: Record<string, number> = {};
+        const locationCounts: Record<string, number> = {};
+        const roleCounts: Record<string, number> = {};
+
+        let latestSeenAt = data.encounters[0].seenAt;
+
+        for (let i = 0; i < data.encounters.length; i++) {
+          const encounter = data.encounters[i];
+
+          latestSeenAt =
+            latestSeenAt < encounter.seenAt ? encounter.seenAt : latestSeenAt;
+
+          if (!(encounter.company!.name in companyCounts)) {
+            companyCounts[encounter.company!.name] = 1;
+          }
+          companyCounts[encounter.company!.name] += 1;
+
+          if (!(encounter.location in locationCounts)) {
+            locationCounts[encounter.location] = 1;
+          }
+          locationCounts[encounter.location] += 1;
+
+          if (!(encounter.role in roleCounts)) {
+            roleCounts[encounter.role] = 1;
+          }
+          roleCounts[encounter.role] += 1;
+        }
+
         const question: Question = {
-          company: data.encounters[0].company!.name ?? 'Unknown company',
+          aggregatedQuestionEncounters: {
+            companyCounts,
+            latestSeenAt,
+            locationCounts,
+            roleCounts,
+          },
           content: data.content,
           id: data.id,
-          location: data.encounters[0].location ?? 'Unknown location',
           numAnswers: data._count.answers,
           numComments: data._count.comments,
           numVotes: votes,
           receivedCount: data.encounters.length,
-          role: data.encounters[0].role ?? 'Unknown role',
-          seenAt: data.encounters[0].seenAt,
+          seenAt: latestSeenAt,
           type: data.questionType,
           updatedAt: data.updatedAt,
           user: data.user?.name ?? '',
         };
         return question;
       });
+
+      let nextCursor: typeof cursor | undefined = undefined;
+
+      if (questionsData.length > input.limit) {
+        const nextItem = questionsData.pop()!;
+        processedQuestionsData.pop();
+
+        const nextIdCursor: string | undefined = nextItem.id;
+        const nextLastSeenCursor =
+          input.sortType === SortType.NEW ? nextItem.lastSeenAt : undefined;
+        const nextUpvoteCursor =
+          input.sortType === SortType.TOP ? nextItem.upvotes : undefined;
+
+        nextCursor = {
+          idCursor: nextIdCursor,
+          lastSeenCursor: nextLastSeenCursor,
+          upvoteCursor: nextUpvoteCursor,
+        };
+      }
+
+      return {
+        data: processedQuestionsData,
+        nextCursor,
+      };
     },
   })
   .query('getQuestionById', {
@@ -190,16 +272,45 @@ export const questionsQuestionRouter = createProtectedRouter()
         0,
       );
 
+      const companyCounts: Record<string, number> = {};
+      const locationCounts: Record<string, number> = {};
+      const roleCounts: Record<string, number> = {};
+
+      let latestSeenAt = questionData.encounters[0].seenAt;
+
+      for (const encounter of questionData.encounters) {
+        latestSeenAt =
+          latestSeenAt < encounter.seenAt ? encounter.seenAt : latestSeenAt;
+
+        if (!(encounter.company!.name in companyCounts)) {
+          companyCounts[encounter.company!.name] = 1;
+        }
+        companyCounts[encounter.company!.name] += 1;
+
+        if (!(encounter.location in locationCounts)) {
+          locationCounts[encounter.location] = 1;
+        }
+        locationCounts[encounter.location] += 1;
+
+        if (!(encounter.role in roleCounts)) {
+          roleCounts[encounter.role] = 1;
+        }
+        roleCounts[encounter.role] += 1;
+      }
+
       const question: Question = {
-        company: questionData.encounters[0].company!.name ?? 'Unknown company',
+        aggregatedQuestionEncounters: {
+          companyCounts,
+          latestSeenAt,
+          locationCounts,
+          roleCounts,
+        },
         content: questionData.content,
         id: questionData.id,
-        location: questionData.encounters[0].location ?? 'Unknown location',
         numAnswers: questionData._count.answers,
         numComments: questionData._count.comments,
         numVotes: votes,
         receivedCount: questionData.encounters.length,
-        role: questionData.encounters[0].role ?? 'Unknown role',
         seenAt: questionData.encounters[0].seenAt,
         type: questionData.questionType,
         updatedAt: questionData.updatedAt,
diff --git a/apps/portal/src/types/questions.d.ts b/apps/portal/src/types/questions.d.ts
index 4157eb37..aea8d31e 100644
--- a/apps/portal/src/types/questions.d.ts
+++ b/apps/portal/src/types/questions.d.ts
@@ -1,16 +1,13 @@
 import type { QuestionsQuestionType } from '@prisma/client';
 
 export type Question = {
-  // TODO: company, location, role maps
-  company: string;
+  aggregatedQuestionEncounters: AggregatedQuestionEncounter;
   content: string;
   id: string;
-  location: string;
   numAnswers: number;
   numComments: number;
   numVotes: number;
   receivedCount: number;
-  role: string;
   seenAt: Date;
   type: QuestionsQuestionType;
   updatedAt: Date;
@@ -19,6 +16,7 @@ export type Question = {
 
 export type AggregatedQuestionEncounter = {
   companyCounts: Record<string, number>;
+  latestSeenAt: Date;
   locationCounts: Record<string, number>;
   roleCounts: Record<string, number>;
 };

From b52f15a937a0cc4b90fddd76c42638a22a3b7cb6 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:00:37 +0800
Subject: [PATCH 05/12] [portal][ui] add error message to checkbox input

---
 .../ui/src/CheckboxInput/CheckboxInput.tsx    | 106 ++++++++++--------
 1 file changed, 58 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/CheckboxInput/CheckboxInput.tsx b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
index edeb9d3a..fec43b7e 100644
--- a/packages/ui/src/CheckboxInput/CheckboxInput.tsx
+++ b/packages/ui/src/CheckboxInput/CheckboxInput.tsx
@@ -7,6 +7,7 @@ type Props = Readonly<{
   defaultValue?: boolean;
   description?: string;
   disabled?: boolean;
+  errorMessage?: string;
   label: string;
   name?: string;
   onChange?: (
@@ -21,6 +22,7 @@ function CheckboxInput(
     defaultValue,
     description,
     disabled = false,
+    errorMessage,
     label,
     name,
     value,
@@ -30,59 +32,67 @@ function CheckboxInput(
 ) {
   const id = useId();
   const descriptionId = useId();
+  const errorId = useId();
 
   return (
-    <div
-      className={clsx(
-        'relative flex',
-        // Vertically center only when there's no description.
-        description == null && 'items-center',
-      )}>
-      <div className="flex h-5 items-center">
-        <input
-          ref={ref}
-          aria-describedby={description != null ? descriptionId : undefined}
-          checked={value}
-          className={clsx(
-            'h-4 w-4 rounded border-slate-300',
-            disabled
-              ? 'bg-slate-100 text-slate-400'
-              : 'text-primary-600 focus:ring-primary-500',
-          )}
-          defaultChecked={defaultValue}
-          disabled={disabled}
-          id={id}
-          name={name}
-          type="checkbox"
-          onChange={
-            onChange != null
-              ? (event) => {
-                  onChange?.(event.target.checked, event);
-                }
-              : undefined
-          }
-        />
-      </div>
-      <div className="ml-3 text-sm">
-        <label
-          className={clsx(
-            'block font-medium',
-            disabled ? 'text-slate-400' : 'text-slate-700',
-          )}
-          htmlFor={id}>
-          {label}
-        </label>
-        {description && (
-          <p
+    <div>
+      <div
+        className={clsx(
+          'relative flex',
+          // Vertically center only when there's no description.
+          description == null && 'items-center',
+        )}>
+        <div className="flex h-5 items-center">
+          <input
+            ref={ref}
+            aria-describedby={description != null ? descriptionId : undefined}
+            checked={value}
             className={clsx(
-              'text-xs',
-              disabled ? 'text-slate-400' : 'text-slate-500',
+              'h-4 w-4 rounded border-slate-300',
+              disabled
+                ? 'bg-slate-100 text-slate-400'
+                : 'text-primary-600 focus:ring-primary-500',
             )}
-            id={descriptionId}>
-            {description}
-          </p>
-        )}
+            defaultChecked={defaultValue}
+            disabled={disabled}
+            id={id}
+            name={name}
+            type="checkbox"
+            onChange={(event) => {
+              if (!onChange) {
+                return;
+              }
+
+              onChange(event.target.checked, event);
+            }}
+          />
+        </div>
+        <div className="ml-3 text-sm">
+          <label
+            className={clsx(
+              'block font-medium',
+              disabled ? 'text-slate-400' : 'text-slate-700',
+            )}
+            htmlFor={id}>
+            {label}
+          </label>
+          {description && (
+            <p
+              className={clsx(
+                'text-xs',
+                disabled ? 'text-slate-400' : 'text-slate-500',
+              )}
+              id={descriptionId}>
+              {description}
+            </p>
+          )}
+        </div>
       </div>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }

From 64670923e15a080356edba62caa4f71879fa9ee0 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:00:50 +0800
Subject: [PATCH 06/12] [resumes][feat] add error message to submit form

---
 apps/portal/src/pages/resumes/submit.tsx | 66 ++++++++++++++----------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index c851cafa..7901056b 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -86,10 +86,16 @@ export default function SubmitResumeForm({
     setValue,
     reset,
     watch,
+    clearErrors,
     formState: { errors, isDirty, dirtyFields },
   } = useForm<IFormInput>({
     defaultValues: {
+      additionalInfo: '',
+      experience: '',
       isChecked: false,
+      location: '',
+      role: '',
+      title: '',
       ...initFormDetails,
     },
   });
@@ -296,7 +302,7 @@ export default function SubmitResumeForm({
                   options={ROLES}
                   placeholder=" "
                   required={true}
-                  onChange={(val) => setValue('role', val)}
+                  onChange={(val) => onValueChange('role', val)}
                 />
                 <Select
                   {...register('experience', { required: true })}
@@ -305,7 +311,7 @@ export default function SubmitResumeForm({
                   options={EXPERIENCES}
                   placeholder=" "
                   required={true}
-                  onChange={(val) => setValue('experience', val)}
+                  onChange={(val) => onValueChange('experience', val)}
                 />
               </div>
               <Select
@@ -315,7 +321,7 @@ export default function SubmitResumeForm({
                 options={LOCATIONS}
                 placeholder=" "
                 required={true}
-                onChange={(val) => setValue('location', val)}
+                onChange={(val) => onValueChange('location', val)}
               />
               {/* Upload resume form */}
               {isNewForm && (
@@ -335,6 +341,16 @@ export default function SubmitResumeForm({
                         : 'border-slate-300',
                       'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
                     )}>
+                    <input
+                      {...register('file', { required: true })}
+                      {...getInputProps()}
+                      accept="application/pdf"
+                      className="sr-only"
+                      disabled={isLoading}
+                      id="file-upload"
+                      name="file-upload"
+                      type="file"
+                    />
                     <div className="space-y-1 text-center">
                       {resumeFile == null ? (
                         <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
@@ -345,29 +361,15 @@ export default function SubmitResumeForm({
                           {resumeFile.name}
                         </p>
                       )}
-                      <div className="flex items-center text-sm">
-                        <label
-                          className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
-                          htmlFor="file-upload">
-                          <span className="font-medium">Drop file here</span>
-                          <span className="mr-1 ml-1 font-light">or</span>
-                          <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
-                            {resumeFile == null
-                              ? 'Select file'
-                              : 'Replace file'}
-                          </span>
-                          <input
-                            {...register('file', { required: true })}
-                            {...getInputProps()}
-                            accept="application/pdf"
-                            className="sr-only"
-                            disabled={isLoading}
-                            id="file-upload"
-                            name="file-upload"
-                            type="file"
-                          />
-                        </label>
-                      </div>
+                      <label
+                        className="focus-within:ring-primary-500 flex items-center rounded-md text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
+                        htmlFor="file-upload">
+                        <span className="font-medium">Drop file here</span>
+                        <span className="mr-1 ml-1 font-light">or</span>
+                        <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
+                          {resumeFile == null ? 'Select file' : 'Replace file'}
+                        </span>
+                      </label>
                       <p className="text-xs text-slate-500">
                         PDF up to {FILE_SIZE_LIMIT_MB}MB
                       </p>
@@ -394,8 +396,18 @@ export default function SubmitResumeForm({
                   <CheckboxInput
                     {...register('isChecked', { required: true })}
                     disabled={isLoading}
+                    errorMessage={
+                      !errors.file && errors.isChecked
+                        ? 'Please tick the checkbox after reading through the guidelines.'
+                        : undefined
+                    }
                     label="I have read and will follow the guidelines stated."
-                    onChange={(val) => setValue('isChecked', val)}
+                    onChange={(val) => {
+                      if (val) {
+                        clearErrors('isChecked');
+                      }
+                      setValue('isChecked', val);
+                    }}
                   />
                 </>
               )}

From 0d53dab7a835f40cd974c91abb6c17bd593372df Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com>
Date: Mon, 24 Oct 2022 23:18:23 +0800
Subject: [PATCH 07/12] [offers][fix] fix landing page description (#424)

* [offers][fix] fix landing page width

* [offers][fix] fix landing page typo

* [offers][chore] fix British English in landing page

* [offers][chore] fix description in landing page
---
 .../src/components/offers/OffersNavigation.ts |  2 +-
 .../offers/landing/LeftTextCard.tsx           |  9 ++--
 .../offers/landing/RightTextCard.tsx          |  9 ++--
 .../offers/profile/ProfileComments.tsx        | 31 +------------
 apps/portal/src/components/offers/types.ts    |  2 +
 .../src/pages/offers/{home.tsx => browse.tsx} |  0
 apps/portal/src/pages/offers/index.tsx        | 44 +++++++++----------
 .../pages/offers/profile/[offerProfileId].tsx |  5 ++-
 8 files changed, 39 insertions(+), 63 deletions(-)
 rename apps/portal/src/pages/offers/{home.tsx => browse.tsx} (100%)

diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
index 9b340cec..0c43c644 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -1,7 +1,7 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/home', name: 'Home' },
+  { href: '/offers/browse', name: 'Browse' },
   { href: '/offers/submit', name: 'Analyse your offers' },
 ];
 
diff --git a/apps/portal/src/components/offers/landing/LeftTextCard.tsx b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
index 27886018..329a58f5 100644
--- a/apps/portal/src/components/offers/landing/LeftTextCard.tsx
+++ b/apps/portal/src/components/offers/landing/LeftTextCard.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type LeftTextCardProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type LeftTextCardProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function LeftTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function LeftTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function LeftTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>
diff --git a/apps/portal/src/components/offers/landing/RightTextCard.tsx b/apps/portal/src/components/offers/landing/RightTextCard.tsx
index 551c246a..9028ad16 100644
--- a/apps/portal/src/components/offers/landing/RightTextCard.tsx
+++ b/apps/portal/src/components/offers/landing/RightTextCard.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type RightTextCarddProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type RightTextCarddProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function RightTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function RightTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function RightTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>
diff --git a/apps/portal/src/components/offers/profile/ProfileComments.tsx b/apps/portal/src/components/offers/profile/ProfileComments.tsx
index ebed5bfd..b26f78ae 100644
--- a/apps/portal/src/components/offers/profile/ProfileComments.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileComments.tsx
@@ -175,36 +175,7 @@ export default function ProfileComments({
       ) : (
         <div>Please log in before commenting on this profile.</div>
       )}
-      <div>
-        <TextArea
-          label={`Comment as ${
-            isEditable ? profileName : session?.user?.name ?? 'anonymous'
-          }`}
-          placeholder="Type your comment here"
-          value={currentReply}
-          onChange={(value) => setCurrentReply(value)}
-        />
-        <div className="mt-2 flex w-full justify-end">
-          <div className="w-fit">
-            <Button
-              disabled={
-                commentsQuery.isLoading ||
-                !currentReply.length ||
-                createCommentMutation.isLoading
-              }
-              display="block"
-              isLabelHidden={false}
-              isLoading={createCommentMutation.isLoading}
-              label="Comment"
-              size="sm"
-              variant="primary"
-              onClick={() => handleComment(currentReply)}
-            />
-          </div>
-        </div>
-        <HorizontalDivider />
-      </div>
-      <div className="h-full overflow-y-scroll">
+      <div className="h-full overflow-y-auto">
         <div className="h-content mb-96 w-full">
           {replies?.map((reply: Reply) => (
             <ExpandableCommentCard
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index 53b2c36e..b790bd40 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -2,6 +2,8 @@ import type { JobType } from '@prisma/client';
 
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
+export const HOME_URL = '/offers/browse';
+
 /*
  *  Offer Profile
  */
diff --git a/apps/portal/src/pages/offers/home.tsx b/apps/portal/src/pages/offers/browse.tsx
similarity index 100%
rename from apps/portal/src/pages/offers/home.tsx
rename to apps/portal/src/pages/offers/browse.tsx
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index fb67eb8c..11218b77 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -10,26 +10,26 @@ import {
 
 import LeftTextCard from '~/components/offers/landing/LeftTextCard';
 import RightTextCard from '~/components/offers/landing/RightTextCard';
-const baseUrl = '/offers/home';
+import { HOME_URL } from '~/components/offers/types';
 
 const features = [
   {
     description:
-      'Name of the profile creator is stricly anonymous by using randomly generated names.',
+      'Profile names are randomly generated to keep your offers strictly anonymous.',
     icon: UsersIcon,
-    name: 'Anonymisd Profile Name',
+    name: 'Anonymized Profile Name',
   },
   {
     description:
-      ' Only people with the edit link can edit that profile. Share profiles to others using public link without giving edit permission.',
+      'Only users with the edit link can edit that profile. Share profiles to others using a public link without giving edit permission.',
     icon: ShareIcon,
     name: 'Edit Link v.s. Public Link',
   },
   {
     description:
-      "Offer profiles will not be automatically saved under creator's account in database unless explicit permission is given.",
+      "Offer profiles will not be automatically saved under creators' account in our database unless explicit permission is given.",
     icon: BookmarkSquareIcon,
-    name: 'No Auto-Save to User Account',
+    name: 'Save with Permission',
   },
 ];
 
@@ -79,29 +79,29 @@ const footerNavigation = {
 
 export default function LandingPage() {
   return (
-    <div className="overflow-y-auto bg-white">
+    <div className="mx-auto w-full overflow-y-auto bg-white">
       <main>
         {/* Hero section */}
         <div className="relative h-full">
           <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
             <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
-              <span className="block">Choosing offers made easier</span>
-              <span className="from-primary-600 -mb-1 block bg-gradient-to-r to-purple-500 bg-clip-text pb-1 text-transparent">
-                using profiles behind offers.
+              <span>Choosing offers </span>
+              <span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
+                made easier
               </span>
             </h1>
-            <p className="text-primary-600 mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
-              Analyse your offers using profiles from fellow software engineers.
+            <p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
+              Analyze your offers using profiles from fellow software engineers.
             </p>
             <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
               <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
                 <a
                   className="border-grey-600 flex items-center justify-center rounded-md border bg-white bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
-                  href={baseUrl}>
+                  href={HOME_URL}>
                   Get started
                 </a>
                 <a
-                  className="bg-primary-600 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
+                  className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
                   href="#">
                   Live demo
                 </a>
@@ -118,7 +118,7 @@ export default function LandingPage() {
           />
           <div className="relative">
             <LeftTextCard
-              description="An offer profile includes not only offers that a person get in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contaxtualize offers."
+              description="An offer profile includes not only offers that a person received in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contextualize offers."
               icon={
                 <InformationCircleIcon
                   aria-hidden="true"
@@ -161,13 +161,13 @@ export default function LandingPage() {
         </div>
 
         {/* Gradient Feature Section */}
-        <div className="bg-gradient-to-r from-purple-800 to-indigo-700">
+        <div className="to-primary-600 bg-gradient-to-r from-purple-800">
           <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
             <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
               Your privacy is our priority.
             </h2>
-            <p className="mt-4 flex flex-row justify-center text-lg text-purple-200">
-              All offer profiles are anonymised and we do not store information
+            <p className="text-primary-100 mt-4 flex flex-row justify-center text-lg">
+              All offer profiles are anonymized and we do not store information
               about your personal identity.
             </p>
             <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
@@ -185,7 +185,7 @@ export default function LandingPage() {
                     <h3 className="text-lg font-medium text-white">
                       {feature.name}
                     </h3>
-                    <p className="mt-2 text-base text-purple-200">
+                    <p className="text-primary-100 mt-2 text-base">
                       {feature.description}
                     </p>
                   </div>
@@ -200,14 +200,14 @@ export default function LandingPage() {
           <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
             <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
               <span className="block">Ready to get started?</span>
-              <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
+              <span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent">
                 Create your own offer profile today.
               </span>
             </h2>
             <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
               <a
-                className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get Started
               </a>
             </div>
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index e90d8f77..8933112c 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -10,6 +10,7 @@ import type {
   BackgroundDisplayData,
   OfferDisplayData,
 } from '~/components/offers/types';
+import { HOME_URL } from '~/components/offers/types';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
@@ -46,7 +47,7 @@ export default function OfferProfile() {
       enabled: typeof offerProfileId === 'string',
       onSuccess: (data: Profile) => {
         if (!data) {
-          router.push('/offers/home');
+          router.push(HOME_URL);
         }
         // If the profile is not editable with a wrong token, redirect to the profile page
         if (!data?.isEditable && token !== '') {
@@ -148,7 +149,7 @@ export default function OfferProfile() {
     },
     onSuccess: () => {
       trpcContext.invalidateQueries(['offers.profile.listOne']);
-      router.push('/offers/home');
+      router.push(HOME_URL);
       showToast({
         title: `Offers profile successfully deleted!`,
         variant: 'success',

From c118ed59d490e9cc6dc66650d695b5059c80a10a Mon Sep 17 00:00:00 2001
From: hpkoh <53825802+hpkoh@users.noreply.github.com>
Date: Mon, 24 Oct 2022 23:20:51 +0800
Subject: [PATCH 08/12] [questions][fix] fix pagination off by one (#425)

---
 .../src/server/router/questions-question-encounter-router.ts | 1 -
 apps/portal/src/server/router/questions-question-router.ts   | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/portal/src/server/router/questions-question-encounter-router.ts b/apps/portal/src/server/router/questions-question-encounter-router.ts
index 0f597ad3..8fa4a0e4 100644
--- a/apps/portal/src/server/router/questions-question-encounter-router.ts
+++ b/apps/portal/src/server/router/questions-question-encounter-router.ts
@@ -77,7 +77,6 @@ export const questionsQuestionEncounterRouter = createProtectedRouter()
     },
   })
   .mutation('update', {
-    //
     input: z.object({
       companyId: z.string().optional(),
       id: z.string(),
diff --git a/apps/portal/src/server/router/questions-question-router.ts b/apps/portal/src/server/router/questions-question-router.ts
index 3c4f8f8b..3ea33bce 100644
--- a/apps/portal/src/server/router/questions-question-router.ts
+++ b/apps/portal/src/server/router/questions-question-router.ts
@@ -14,7 +14,7 @@ export const questionsQuestionRouter = createProtectedRouter()
       cursor: z
         .object({
           idCursor: z.string().optional(),
-          lastSeenCursor: z.date().optional(),
+          lastSeenCursor: z.date().nullish().optional(),
           upvoteCursor: z.number().optional(),
         })
         .nullish(),
@@ -49,8 +49,6 @@ export const questionsQuestionRouter = createProtectedRouter()
               },
             ];
 
-      const toSkip = cursor ? 1 : 0;
-
       const questionsData = await ctx.prisma.questionsQuestion.findMany({
         cursor:
           cursor !== undefined
@@ -81,7 +79,6 @@ export const questionsQuestionRouter = createProtectedRouter()
           votes: true,
         },
         orderBy: sortCondition,
-        skip: toSkip,
         take: input.limit + 1,
         where: {
           ...(input.questionTypes.length > 0

From 98e422953c397b60c0156a8bcea7a7e4f32e0f6a Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:56:04 +0800
Subject: [PATCH 09/12] [resumes][feat] add shadow to buttons

---
 apps/portal/src/pages/resumes/[resumeId].tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index bc703d4b..38c7cf31 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -100,7 +100,7 @@ export default function ResumeReviewPage() {
     }
     return (
       <Button
-        className="h-10 py-2"
+        className="h-10 py-2 shadow-md"
         display="block"
         label="Add your review"
         variant="tertiary"
@@ -151,18 +151,18 @@ export default function ResumeReviewPage() {
               <h1 className="pr-2 text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
                 {detailsQuery.data.title}
               </h1>
-              <div className="flex gap-4 xl:pr-4">
+              <div className="flex gap-3 xl:pr-4">
                 {userIsOwner && (
                   <button
-                    className="p h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center"
+                    className="h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center shadow-md hover:bg-slate-50"
                     type="button"
                     onClick={onEditButtonClick}>
-                    <PencilSquareIcon className="text-primary-600 hover:text-primary-300 h-6 w-6" />
+                    <PencilSquareIcon className="text-primary-600 h-6 w-6" />
                   </button>
                 )}
 
                 <button
-                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50  disabled:hover:bg-white"
+                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50  disabled:hover:bg-white"
                   disabled={starMutation.isLoading || unstarMutation.isLoading}
                   type="button"
                   onClick={onStarButtonClick}>

From 4de0a1f681d8ed8bfe073a3ffcc3f010d3f71d25 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Mon, 24 Oct 2022 23:56:14 +0800
Subject: [PATCH 10/12] [resumes][feat] improve badge UI

---
 .../resumes/badges/ResumeUserBadge.tsx           | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index adf647a2..5f45adbb 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -14,18 +14,20 @@ export default function ResumeUserBadge({
   return (
     <div className="group relative flex items-center justify-center">
       <div
-        className="absolute left-6 z-10 hidden w-48 flex-col
-        justify-center gap-1 rounded-xl bg-white px-2 py-2 text-center drop-shadow-lg
+        className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
+        gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
 
-        before:absolute before:top-12 before:-translate-x-6
+        before:absolute before:top-14 before:-translate-x-4
         before:border-8 before:border-y-transparent before:border-l-transparent
         before:border-r-white before:drop-shadow-lg before:content-['']
         group-hover:flex">
-        <Icon className="h-12 w-12 self-center" />
-        <p className="font-medium">{title}</p>
-        <p className="text-sm">{description}.</p>
+        <Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
+        <div className="px-2">
+          <p className="font-medium">{title}</p>
+          <p className="text-sm">{description}.</p>
+        </div>
       </div>
-      <Icon className="h-4 w-4" />
+      <Icon className="h-5 w-5 rounded-xl border bg-slate-200 shadow-sm" />
     </div>
   );
 }

From f8423afe2a7ca708284b1444e9fe7b751267100e Mon Sep 17 00:00:00 2001
From: Ai Ling <50992674+ailing35@users.noreply.github.com>
Date: Tue, 25 Oct 2022 00:24:44 +0800
Subject: [PATCH 11/12] [offers][fix] Fix UI and remove specialization on the
 backend (#426)

* [offers][fix] Remove specialization on the frontend

* [offers][fix] Rename refresh OEA button

* [offers][chore] Remove specialisation and make bonus, stocks and baseSalary optional

* [offers][fix] Fix OEA profile job title

Co-authored-by: Bryann Yeap Kok Keong <bryannyeapkk@gmail.com>
---
 .../migration.sql                             |  19 ++
 apps/portal/prisma/schema.prisma              |  21 +-
 .../offers/offerAnalysis/OfferProfileCard.tsx |   7 +-
 .../offersSubmission/OffersSubmissionForm.tsx |   2 +-
 .../submissionForm/BackgroundForm.tsx         |  14 +-
 .../components/offers/profile/OfferCard.tsx   |  21 +-
 .../offers/profile/ProfileDetails.tsx         |   2 +-
 apps/portal/src/components/offers/types.ts    |   9 +-
 apps/portal/src/mappers/offers-mappers.ts     |  64 ++---
 .../pages/offers/profile/[offerProfileId].tsx |  15 +-
 .../src/pages/offers/test/createProfile.tsx   | 229 +----------------
 .../router/offers/offers-analysis-router.ts   |   6 +-
 .../router/offers/offers-profile-router.ts    | 231 +++++++++---------
 .../portal/src/server/router/offers/offers.ts |  51 ++--
 apps/portal/src/types/offers.d.ts             |  11 +-
 15 files changed, 244 insertions(+), 458 deletions(-)
 create mode 100644 apps/portal/prisma/migrations/20221024154046_remove_specialization_and_make_base_bonus_and_stocks_optional/migration.sql

diff --git a/apps/portal/prisma/migrations/20221024154046_remove_specialization_and_make_base_bonus_and_stocks_optional/migration.sql b/apps/portal/prisma/migrations/20221024154046_remove_specialization_and_make_base_bonus_and_stocks_optional/migration.sql
new file mode 100644
index 00000000..b6002921
--- /dev/null
+++ b/apps/portal/prisma/migrations/20221024154046_remove_specialization_and_make_base_bonus_and_stocks_optional/migration.sql
@@ -0,0 +1,19 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `specialization` on the `OffersExperience` table. All the data in the column will be lost.
+  - You are about to drop the column `specialization` on the `OffersFullTime` table. All the data in the column will be lost.
+  - You are about to drop the column `specialization` on the `OffersIntern` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "OffersExperience" DROP COLUMN "specialization";
+
+-- AlterTable
+ALTER TABLE "OffersFullTime" DROP COLUMN "specialization",
+ALTER COLUMN "baseSalaryId" DROP NOT NULL,
+ALTER COLUMN "bonusId" DROP NOT NULL,
+ALTER COLUMN "stocksId" DROP NOT NULL;
+
+-- AlterTable
+ALTER TABLE "OffersIntern" DROP COLUMN "specialization";
diff --git a/apps/portal/prisma/schema.prisma b/apps/portal/prisma/schema.prisma
index ae5a9f16..c2c6938b 100644
--- a/apps/portal/prisma/schema.prisma
+++ b/apps/portal/prisma/schema.prisma
@@ -234,7 +234,6 @@ model OffersExperience {
 
   // Add more fields
   durationInMonths Int?
-  specialization   String?
   location         String?
 
   // FULLTIME fields
@@ -340,7 +339,6 @@ model OffersIntern {
   id String @id @default(cuid())
 
   title           String
-  specialization  String
   internshipCycle String
   startYear       Int
   monthlySalary   OffersCurrency @relation(fields: [monthlySalaryId], references: [id], onDelete: Cascade)
@@ -350,18 +348,17 @@ model OffersIntern {
 }
 
 model OffersFullTime {
-  id                  String         @id @default(cuid())
+  id                  String          @id @default(cuid())
   title               String
-  specialization      String
   level               String
-  totalCompensation   OffersCurrency @relation("OfferTotalCompensation", fields: [totalCompensationId], references: [id], onDelete: Cascade)
-  totalCompensationId String         @unique
-  baseSalary          OffersCurrency @relation("OfferBaseSalary", fields: [baseSalaryId], references: [id], onDelete: Cascade)
-  baseSalaryId        String         @unique
-  bonus               OffersCurrency @relation("OfferBonus", fields: [bonusId], references: [id], onDelete: Cascade)
-  bonusId             String         @unique
-  stocks              OffersCurrency @relation("OfferStocks", fields: [stocksId], references: [id], onDelete: Cascade)
-  stocksId            String         @unique
+  totalCompensation   OffersCurrency  @relation("OfferTotalCompensation", fields: [totalCompensationId], references: [id], onDelete: Cascade)
+  totalCompensationId String          @unique
+  baseSalary          OffersCurrency? @relation("OfferBaseSalary", fields: [baseSalaryId], references: [id], onDelete: Cascade)
+  baseSalaryId        String?         @unique
+  bonus               OffersCurrency? @relation("OfferBonus", fields: [bonusId], references: [id], onDelete: Cascade)
+  bonusId             String?         @unique
+  stocks              OffersCurrency? @relation("OfferStocks", fields: [stocksId], references: [id], onDelete: Cascade)
+  stocksId            String?         @unique
 
   OffersOffer OffersOffer?
 }
diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
index af786c4b..13cbd2d8 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
@@ -4,6 +4,9 @@ import {
 } from '@heroicons/react/24/outline';
 import { JobType } from '@prisma/client';
 
+import type { JobTitleType } from '~/components/shared/JobTitles';
+import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
+
 import { HorizontalDivider } from '~/../../../packages/ui/dist';
 import { convertMoneyToString } from '~/utils/offers/currency';
 import { formatDate } from '~/utils/offers/time';
@@ -54,7 +57,9 @@ export default function OfferProfileCard({
       <HorizontalDivider />
       <div className="flex items-end justify-between">
         <div className="col-span-1 row-span-3">
-          <p className="font-bold">{title}</p>
+          <p className="font-bold">
+            {getLabelForJobTitleType(title as JobTitleType)}
+          </p>
           <p>
             Company: {company.name}, {location}
           </p>
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 0e1127ab..39544921 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -236,7 +236,7 @@ export default function OffersSubmissionForm({
           <FormProvider {...formMethods}>
             <form onSubmit={handleSubmit(onSubmit)}>
               {formSteps[formStep].component}
-              <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre>
+              {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
               {formSteps[formStep].hasNext && (
                 <div className="flex justify-end">
                   <Button
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index 9f80aee0..8dcfae54 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -140,24 +140,19 @@ function FullTimeJobFields() {
       </div>
       <Collapsible label="Add more details">
         <div className="mb-5 grid grid-cols-2 space-x-3">
-          <FormTextInput
-            label="Focus / Specialization"
-            placeholder="e.g. Front End"
-            {...register(`background.experiences.0.specialization`)}
-          />
           <FormTextInput
             label="Level"
             placeholder="e.g. L4, Junior"
             {...register(`background.experiences.0.level`)}
           />
-        </div>
-        <div className="mb-5 grid grid-cols-2 space-x-3">
           <FormSelect
             display="block"
             label="Location"
             options={locationOptions}
             {...register(`background.experiences.0.location`)}
           />
+        </div>
+        <div className="mb-5 grid grid-cols-2 space-x-3">
           <FormTextInput
             errorMessage={experiencesField?.durationInMonths?.message}
             label="Duration (months)"
@@ -224,11 +219,6 @@ function InternshipJobFields() {
       </div>
       <Collapsible label="Add more details">
         <div className="mb-5 grid grid-cols-2 space-x-3">
-          <FormTextInput
-            label="Focus / Specialization"
-            placeholder="e.g. Front End"
-            {...register(`background.experiences.0.specialization`)}
-          />
           <FormSelect
             display="block"
             label="Location"
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 9f08e8b5..33901edf 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -72,18 +72,17 @@ export default function OfferCard({
         <HorizontalDivider />
         <div className="px-8">
           <div className="flex flex-col py-2">
-            {totalCompensation ||
-              (monthlySalary && (
-                <div className="flex flex-row">
-                  <CurrencyDollarIcon className="mr-1 h-5" />
-                  <p>
-                    {totalCompensation && `TC: ${totalCompensation}`}
-                    {monthlySalary && `Monthly Salary: ${monthlySalary}`}
-                  </p>
-                </div>
-              ))}
+            {(totalCompensation || monthlySalary) && (
+              <div className="flex flex-row">
+                <CurrencyDollarIcon className="mr-1 h-5" />
+                <p>
+                  {totalCompensation && `TC: ${totalCompensation}`}
+                  {monthlySalary && `Monthly Salary: ${monthlySalary}`}
+                </p>
+              </div>
+            )}
             {totalCompensation && (
-              <div className="ml-6 flex flex-row font-light text-slate-400">
+              <div className="ml-6 flex flex-row font-light">
                 <p>
                   Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
                   {bonus}
diff --git a/apps/portal/src/components/offers/profile/ProfileDetails.tsx b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
index 38eecd5c..14b585cd 100644
--- a/apps/portal/src/components/offers/profile/ProfileDetails.tsx
+++ b/apps/portal/src/components/offers/profile/ProfileDetails.tsx
@@ -121,7 +121,7 @@ function ProfileAnalysis({
           <Button
             addonPosition="start"
             icon={ArrowPathIcon}
-            label="Refresh Analysis"
+            label="Regenerate Analysis"
             variant="secondary"
             onClick={() => generateAnalysisMutation.mutate({ profileId })}
           />
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts
index b790bd40..c09b8da2 100644
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@@ -51,7 +51,6 @@ type ExperiencePostData = {
   level?: string | null;
   location?: string | null;
   monthlySalary?: Money | null;
-  specialization?: string | null;
   title?: string | null;
   totalCompensation?: Money | null;
   totalCompensationId?: string | null;
@@ -91,12 +90,11 @@ export type OfferFormData = Omit<OfferPostData, 'monthYearReceived'> & {
 };
 
 export type OfferFullTimePostData = {
-  baseSalary: Money;
-  bonus: Money;
+  baseSalary: Money | null;
+  bonus: Money | null;
   id?: string;
   level: string;
-  specialization: string;
-  stocks: Money;
+  stocks: Money | null;
   title: string;
   totalCompensation: Money;
 };
@@ -105,7 +103,6 @@ export type OfferInternPostData = {
   id?: string;
   internshipCycle: string;
   monthlySalary: Money;
-  specialization: string;
   startYear: number;
   title: string;
 };
diff --git a/apps/portal/src/mappers/offers-mappers.ts b/apps/portal/src/mappers/offers-mappers.ts
index eea48397..d012078f 100644
--- a/apps/portal/src/mappers/offers-mappers.ts
+++ b/apps/portal/src/mappers/offers-mappers.ts
@@ -73,10 +73,6 @@ const analysisOfferDtoMapper = (
         ?.filter((exp) => exp.company != null)
         .map((exp) => exp.company?.name ?? '') ?? [],
     profileName,
-    specialization:
-      offer.jobType === JobType.FULLTIME
-        ? offer.offersFullTime?.specialization ?? ''
-        : offer.offersIntern?.specialization ?? '',
     title:
       offer.jobType === JobType.FULLTIME
         ? offer.offersFullTime?.title ?? ''
@@ -120,22 +116,14 @@ const analysisDtoMapper = (
     OffersOffer & {
       company: Company;
       offersFullTime:
-        | (OffersFullTime & {
-            totalCompensation: OffersCurrency;
-          })
-        | null;
-      offersIntern:
-        | (OffersIntern & {
-            monthlySalary: OffersCurrency;
-          })
+        | (OffersFullTime & { totalCompensation: OffersCurrency })
         | null;
+      offersIntern: (OffersIntern & { monthlySalary: OffersCurrency }) | null;
       profile: OffersProfile & {
         background:
           | (OffersBackground & {
               experiences: Array<
-                OffersExperience & {
-                  company: Company | null;
-                }
+                OffersExperience & { company: Company | null }
               >;
             })
           | null;
@@ -168,10 +156,6 @@ const analysisHighestOfferDtoMapper = (
     id: offer.id,
     level: offer.offersFullTime?.level ?? '',
     location: offer.location,
-    specialization:
-      offer.jobType === JobType.FULLTIME
-        ? offer.offersFullTime?.specialization ?? ''
-        : offer.offersIntern?.specialization ?? '',
     totalYoe: offer.profile.background?.totalYoe ?? -1,
   };
   return analysisHighestOfferDto;
@@ -327,12 +311,11 @@ export const experienceDtoMapper = (
     location: experience.location,
     monthlySalary: experience.monthlySalary
       ? valuationDtoMapper(experience.monthlySalary)
-      : experience.monthlySalary,
-    specialization: experience.specialization,
+      : null,
     title: experience.title,
     totalCompensation: experience.totalCompensation
       ? valuationDtoMapper(experience.totalCompensation)
-      : experience.totalCompensation,
+      : null,
   };
   return experienceDto;
 };
@@ -398,9 +381,9 @@ export const profileOfferDtoMapper = (
     company: Company;
     offersFullTime:
       | (OffersFullTime & {
-          baseSalary: OffersCurrency;
-          bonus: OffersCurrency;
-          stocks: OffersCurrency;
+          baseSalary: OffersCurrency | null;
+          bonus: OffersCurrency | null;
+          stocks: OffersCurrency | null;
           totalCompensation: OffersCurrency;
         })
       | null;
@@ -421,12 +404,20 @@ export const profileOfferDtoMapper = (
 
   if (offer.offersFullTime) {
     profileOfferDto.offersFullTime = {
-      baseSalary: valuationDtoMapper(offer.offersFullTime.baseSalary),
-      bonus: valuationDtoMapper(offer.offersFullTime.bonus),
+      baseSalary:
+        offer.offersFullTime?.baseSalary != null
+          ? valuationDtoMapper(offer.offersFullTime.baseSalary)
+          : null,
+      bonus:
+        offer.offersFullTime?.bonus != null
+          ? valuationDtoMapper(offer.offersFullTime.bonus)
+          : null,
       id: offer.offersFullTime.id,
       level: offer.offersFullTime.level,
-      specialization: offer.offersFullTime.specialization,
-      stocks: valuationDtoMapper(offer.offersFullTime.stocks),
+      stocks:
+        offer.offersFullTime?.stocks != null
+          ? valuationDtoMapper(offer.offersFullTime.stocks)
+          : null,
       title: offer.offersFullTime.title,
       totalCompensation: valuationDtoMapper(
         offer.offersFullTime.totalCompensation,
@@ -437,7 +428,6 @@ export const profileOfferDtoMapper = (
       id: offer.offersIntern.id,
       internshipCycle: offer.offersIntern.internshipCycle,
       monthlySalary: valuationDtoMapper(offer.offersIntern.monthlySalary),
-      specialization: offer.offersIntern.specialization,
       startYear: offer.offersIntern.startYear,
       title: offer.offersIntern.title,
     };
@@ -527,9 +517,9 @@ export const profileDtoMapper = (
         company: Company;
         offersFullTime:
           | (OffersFullTime & {
-              baseSalary: OffersCurrency;
-              bonus: OffersCurrency;
-              stocks: OffersCurrency;
+              baseSalary: OffersCurrency | null;
+              bonus: OffersCurrency | null;
+              stocks: OffersCurrency | null;
               totalCompensation: OffersCurrency;
             })
           | null;
@@ -550,7 +540,7 @@ export const profileDtoMapper = (
   };
 
   if (inputToken === profile.editToken) {
-    profileDto.editToken = profile.editToken;
+    profileDto.editToken = profile.editToken ?? null;
     profileDto.isEditable = true;
   }
 
@@ -587,9 +577,9 @@ export const dashboardOfferDtoMapper = (
     company: Company;
     offersFullTime:
       | (OffersFullTime & {
-          baseSalary: OffersCurrency;
-          bonus: OffersCurrency;
-          stocks: OffersCurrency;
+          baseSalary: OffersCurrency | null;
+          bonus: OffersCurrency | null;
+          stocks: OffersCurrency | null;
           totalCompensation: OffersCurrency;
         })
       | null;
diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
index 8933112c..7cf2811d 100644
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@@ -60,8 +60,14 @@ export default function OfferProfile() {
           ? data?.offers.map((res: ProfileOffer) => {
               if (res.offersFullTime) {
                 const filteredOffer: OfferDisplayData = {
-                  base: convertMoneyToString(res.offersFullTime.baseSalary),
-                  bonus: convertMoneyToString(res.offersFullTime.bonus),
+                  base:
+                    res.offersFullTime.baseSalary != null
+                      ? convertMoneyToString(res.offersFullTime.baseSalary)
+                      : undefined,
+                  bonus:
+                    res.offersFullTime.bonus != null
+                      ? convertMoneyToString(res.offersFullTime.bonus)
+                      : undefined,
                   companyName: res.company.name,
                   id: res.offersFullTime.id,
                   jobLevel: res.offersFullTime.level,
@@ -72,7 +78,10 @@ export default function OfferProfile() {
                   negotiationStrategy: res.negotiationStrategy,
                   otherComment: res.comments,
                   receivedMonth: formatDate(res.monthYearReceived),
-                  stocks: convertMoneyToString(res.offersFullTime.stocks),
+                  stocks:
+                    res.offersFullTime.stocks != null
+                      ? convertMoneyToString(res.offersFullTime.stocks)
+                      : undefined,
                   totalCompensation: convertMoneyToString(
                     res.offersFullTime.totalCompensation,
                   ),
diff --git a/apps/portal/src/pages/offers/test/createProfile.tsx b/apps/portal/src/pages/offers/test/createProfile.tsx
index 972ba6ee..5f625321 100644
--- a/apps/portal/src/pages/offers/test/createProfile.tsx
+++ b/apps/portal/src/pages/offers/test/createProfile.tsx
@@ -107,8 +107,7 @@ function Test() {
             durationInMonths: 24,
             jobType: 'FULLTIME',
             level: 'Junior',
-            specialization: 'Front End',
-            title: 'Software Engineer',
+            title: 'software-engineer',
             totalCompensation: {
               currency: 'SGD',
               value: 104100,
@@ -146,12 +145,11 @@ function Test() {
               value: 2222,
             },
             level: 'Junior',
-            specialization: 'Front End',
             stocks: {
               currency: 'SGD',
               value: 0,
             },
-            title: 'Software Engineer',
+            title: 'software-engineer',
             totalCompensation: {
               currency: 'SGD',
               value: 4444,
@@ -175,12 +173,11 @@ function Test() {
               value: 20000,
             },
             level: 'Junior',
-            specialization: 'Front End',
             stocks: {
               currency: 'SGD',
               value: 100,
             },
-            title: 'Software Engineer',
+            title: 'software-engineer',
             totalCompensation: {
               currency: 'SGD',
               value: 104100,
@@ -269,8 +266,7 @@ function Test() {
             level: 'Junior',
             monthlySalary: null,
             monthlySalaryId: null,
-            specialization: 'Front End',
-            title: 'Software Engineer',
+            title: 'software-engineer',
             totalCompensation: {
               currency: 'SGD',
               id: 'cl9i68fvc0005tthj7r1rhvb1',
@@ -335,14 +331,13 @@ function Test() {
             bonusId: 'cl9i68fve000rtthjqo2ktljt',
             id: 'cl9i68fve000otthjqk0g01k0',
             level: 'EXPERT',
-            specialization: 'FRONTEND',
             stocks: {
               currency: 'SGD',
               id: 'cl9i68fvf000ttthjt2ode0cc',
               value: -558038585,
             },
             stocksId: 'cl9i68fvf000ttthjt2ode0cc',
-            title: 'Software Engineer',
+            title: 'software-engineer',
             totalCompensation: {
               currency: 'SGD',
               id: 'cl9i68fvf000vtthjg90s48nj',
@@ -355,220 +350,8 @@ function Test() {
           offersInternId: null,
           profileId: 'cl9i68fv60000tthj8t3zkox0',
         },
-        // {
-        //   comments: '',
-        //   company: {
-        //     createdAt: new Date('2022-10-12T16:19:05.196Z'),
-        //     description:
-        //       'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
-        //     id: 'cl9j4yawz0003utlp1uaa1t8o',
-        //     logoUrl: 'https://logo.clearbit.com/meta.com',
-        //     name: 'Meta',
-        //     slug: 'meta',
-        //     updatedAt: new Date('2022-10-12T16:19:05.196Z'),
-        //   },
-        //   companyId: 'cl9j4yawz0003utlp1uaa1t8o',
-        //   id: 'cl9i68fvf000ytthj0ltsqt1d',
-        //   jobType: 'FULLTIME',
-        //   location: 'Singapore, Singapore',
-        //   monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
-        //   negotiationStrategy: 'Leveraged having million offers',
-        //   offersFullTime: {
-        //     baseSalary: {
-        //       currency: 'SGD',
-        //       id: 'cl9i68fvf0010tthj0iym6woh',
-        //       value: 84000,
-        //     },
-        //     baseSalaryId: 'cl9i68fvf0010tthj0iym6woh',
-        //     bonus: {
-        //       currency: 'SGD',
-        //       id: 'cl9i68fvf0012tthjioltnspk',
-        //       value: 123456789,
-        //     },
-        //     bonusId: 'cl9i68fvf0012tthjioltnspk',
-        //     id: 'cl9i68fvf000ztthjcovbiehc',
-        //     level: 'Junior',
-        //     specialization: 'Front End',
-        //     stocks: {
-        //       currency: 'SGD',
-        //       id: 'cl9i68fvf0014tthjz2gff3hs',
-        //       value: 100,
-        //     },
-        //     stocksId: 'cl9i68fvf0014tthjz2gff3hs',
-        //     title: 'Software Engineer',
-        //     totalCompensation: {
-        //       currency: 'SGD',
-        //       id: 'cl9i68fvf0016tthjrtb7iuvj',
-        //       value: 104100,
-        //     },
-        //     totalCompensationId: 'cl9i68fvf0016tthjrtb7iuvj',
-        //   },
-        //   offersFullTimeId: 'cl9i68fvf000ztthjcovbiehc',
-        //   offersIntern: null,
-        //   offersInternId: null,
-        //   profileId: 'cl9i68fv60000tthj8t3zkox0',
-        // },
-        // {
-        //   comments: '',
-        //   company: {
-        //     createdAt: new Date('2022-10-12T16:19:05.196Z'),
-        //     description:
-        //       'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
-        //     id: 'cl9j4yawz0003utlp1uaa1t8o',
-        //     logoUrl: 'https://logo.clearbit.com/meta.com',
-        //     name: 'Meta',
-        //     slug: 'meta',
-        //     updatedAt: new Date('2022-10-12T16:19:05.196Z'),
-        //   },
-        //   companyId: 'cl9j4yawz0003utlp1uaa1t8o',
-        //   id: 'cl96stky9003bw32gc3l955vr',
-        //   jobType: 'FULLTIME',
-        //   location: 'Singapore, Singapore',
-        //   monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
-        //   negotiationStrategy: 'LOst out having multiple offers',
-        //   offersFullTime: {
-        //     baseSalary: {
-        //       currency: 'SGD',
-        //       id: 'cl96stky9003dw32gcvqbijlo',
-        //       value: 1,
-        //     },
-        //     baseSalaryId: 'cl96stky9003dw32gcvqbijlo',
-        //     bonus: {
-        //       currency: 'SGD',
-        //       id: 'cl96stky9003fw32goc3zqxwr',
-        //       value: 0,
-        //     },
-        //     bonusId: 'cl96stky9003fw32goc3zqxwr',
-        //     id: 'cl96stky9003cw32g5v10izfu',
-        //     level: 'Senior',
-        //     specialization: 'Front End',
-        //     stocks: {
-        //       currency: 'SGD',
-        //       id: 'cl96stky9003hw32g1lbbkqqr',
-        //       value: 999999,
-        //     },
-        //     stocksId: 'cl96stky9003hw32g1lbbkqqr',
-        //     title: 'Software Engineer DOG',
-        //     totalCompensation: {
-        //       currency: 'SGD',
-        //       id: 'cl96stky9003jw32gzumcoi7v',
-        //       value: 999999,
-        //     },
-        //     totalCompensationId: 'cl96stky9003jw32gzumcoi7v',
-        //   },
-        //   offersFullTimeId: 'cl96stky9003cw32g5v10izfu',
-        //   offersIntern: null,
-        //   offersInternId: null,
-        //   profileId: 'cl96stky5002ew32gx2kale2x',
-        // },
-        // {
-        //   comments: 'this IS SO COOL',
-        //   company: {
-        //     createdAt: new Date('2022-10-12T16:19:05.196Z'),
-        //     description:
-        //       'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
-        //     id: 'cl9j4yawz0003utlp1uaa1t8o',
-        //     logoUrl: 'https://logo.clearbit.com/meta.com',
-        //     name: 'Meta',
-        //     slug: 'meta',
-        //     updatedAt: new Date('2022-10-12T16:19:05.196Z'),
-        //   },
-        //   companyId: 'cl9j4yawz0003utlp1uaa1t8o',
-        //   id: 'cl976wf28000t7iyga4noyz7s',
-        //   jobType: 'FULLTIME',
-        //   location: 'Singapore, Singapore',
-        //   monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
-        //   negotiationStrategy: 'Charmed the guy with my face',
-        //   offersFullTime: {
-        //     baseSalary: {
-        //       currency: 'SGD',
-        //       id: 'cl976wf28000v7iygmk1b7qaq',
-        //       value: 1999999999,
-        //     },
-        //     baseSalaryId: 'cl976wf28000v7iygmk1b7qaq',
-        //     bonus: {
-        //       currency: 'SGD',
-        //       id: 'cl976wf28000x7iyg63w7kcli',
-        //       value: 1410065407,
-        //     },
-        //     bonusId: 'cl976wf28000x7iyg63w7kcli',
-        //     id: 'cl976wf28000u7iyg6euei8e9',
-        //     level: 'EXPERT',
-        //     specialization: 'FRONTEND',
-        //     stocks: {
-        //       currency: 'SGD',
-        //       id: 'cl976wf28000z7iyg9ivun6ap',
-        //       value: 111222333,
-        //     },
-        //     stocksId: 'cl976wf28000z7iyg9ivun6ap',
-        //     title: 'Software Engineer',
-        //     totalCompensation: {
-        //       currency: 'SGD',
-        //       id: 'cl976wf2800117iygmzsc0xit',
-        //       value: 55555555,
-        //     },
-        //     totalCompensationId: 'cl976wf2800117iygmzsc0xit',
-        //   },
-        //   offersFullTimeId: 'cl976wf28000u7iyg6euei8e9',
-        //   offersIntern: null,
-        //   offersInternId: null,
-        //   profileId: 'cl96stky5002ew32gx2kale2x',
-        // },
-        // {
-        //   comments: 'this rocks',
-        //   company: {
-        //     createdAt: new Date('2022-10-12T16:19:05.196Z'),
-        //     description:
-        //       'Meta Platforms, Inc., doing business as Meta and formerly named Facebook, Inc., and TheFacebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. The company owns Facebook, Instagram, and WhatsApp, among other products and services.',
-        //     id: 'cl9j4yawz0003utlp1uaa1t8o',
-        //     logoUrl: 'https://logo.clearbit.com/meta.com',
-        //     name: 'Meta',
-        //     slug: 'meta',
-        //     updatedAt: new Date('2022-10-12T16:19:05.196Z'),
-        //   },
-        //   companyId: 'cl9j4yawz0003utlp1uaa1t8o',
-        //   id: 'cl96tbb3o0051w32gjrpaiiit',
-        //   jobType: 'FULLTIME',
-        //   location: 'Singapore, Singapore',
-        //   monthYearReceived: new Date('2022-09-30T07:58:54.000Z'),
-        //   negotiationStrategy: 'Charmed the guy with my face',
-        //   offersFullTime: {
-        //     baseSalary: {
-        //       currency: 'SGD',
-        //       id: 'cl96tbb3o0053w32gz11paaxu',
-        //       value: 1999999999,
-        //     },
-        //     baseSalaryId: 'cl96tbb3o0053w32gz11paaxu',
-        //     bonus: {
-        //       currency: 'SGD',
-        //       id: 'cl96tbb3o0055w32gpyqgz5hx',
-        //       value: 1410065407,
-        //     },
-        //     bonusId: 'cl96tbb3o0055w32gpyqgz5hx',
-        //     id: 'cl96tbb3o0052w32guguajzin',
-        //     level: 'EXPERT',
-        //     specialization: 'FRONTEND',
-        //     stocks: {
-        //       currency: 'SGD',
-        //       id: 'cl96tbb3o0057w32gu4nyxguf',
-        //       value: 500,
-        //     },
-        //     stocksId: 'cl96tbb3o0057w32gu4nyxguf',
-        //     title: 'Software Engineer',
-        //     totalCompensation: {
-        //       currency: 'SGD',
-        //       id: 'cl96tbb3o0059w32gm3iy1zk4',
-        //       value: 55555555,
-        //     },
-        //     totalCompensationId: 'cl96tbb3o0059w32gm3iy1zk4',
-        //   },
-        //   offersFullTimeId: 'cl96tbb3o0052w32guguajzin',
-        //   offersIntern: null,
-        //   offersInternId: null,
-        //   profileId: 'cl96stky5002ew32gx2kale2x',
-        // },
       ],
-      // ProfileName: 'ailing bryann stuart ziqing',
+
       token: '24bafa6fef803f447d7f2e229b14cb8ee43f0c22dffbe41ee1c1e5e6e870f117',
       userId: null,
     });
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 751e6cd2..9ee081cd 100644
--- a/apps/portal/src/server/router/offers/offers-analysis-router.ts
+++ b/apps/portal/src/server/router/offers/offers-analysis-router.ts
@@ -19,9 +19,9 @@ const searchOfferPercentile = (
     company: Company;
     offersFullTime:
       | (OffersFullTime & {
-          baseSalary: OffersCurrency;
-          bonus: OffersCurrency;
-          stocks: OffersCurrency;
+          baseSalary: OffersCurrency | null;
+          bonus: OffersCurrency | null;
+          stocks: OffersCurrency | null;
           totalCompensation: OffersCurrency;
         })
       | null;
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 9cac7feb..bf86613a 100644
--- a/apps/portal/src/server/router/offers/offers-profile-router.ts
+++ b/apps/portal/src/server/router/offers/offers-profile-router.ts
@@ -10,7 +10,10 @@ import {
 } from '~/mappers/offers-mappers';
 import { baseCurrencyString } from '~/utils/offers/currency';
 import { convert } from '~/utils/offers/currency/currencyExchange';
-import { generateRandomName, generateRandomStringForToken } from '~/utils/offers/randomGenerator';
+import {
+  generateRandomName,
+  generateRandomStringForToken,
+} from '~/utils/offers/randomGenerator';
 import { createValidationRegex } from '~/utils/offers/zodRegex';
 
 import { createRouter } from '../context';
@@ -48,7 +51,6 @@ const offer = z.object({
       bonusId: z.string().nullish(),
       id: z.string().optional(),
       level: z.string().nullish(),
-      specialization: z.string(),
       stocks: valuation.nullish(),
       stocksId: z.string().nullish(),
       title: z.string(),
@@ -62,7 +64,6 @@ const offer = z.object({
       id: z.string().optional(),
       internshipCycle: z.string().nullish(),
       monthlySalary: valuation.nullish(),
-      specialization: z.string(),
       startYear: z.number().nullish(),
       title: z.string(),
       totalCompensation: valuation.nullish(), // Full time
@@ -86,7 +87,6 @@ const experience = z.object({
   location: z.string().nullish(),
   monthlySalary: valuation.nullish(),
   monthlySalaryId: z.string().nullish(),
-  specialization: z.string().nullish(),
   title: z.string().nullish(),
   totalCompensation: valuation.nullish(),
   totalCompensationId: z.string().nullish(),
@@ -300,7 +300,6 @@ export const offersProfileRouter = createRouter()
                         durationInMonths: x.durationInMonths,
                         jobType: x.jobType,
                         level: x.level,
-                        specialization: x.specialization,
                         title: x.title,
                         totalCompensation: {
                           create: {
@@ -321,7 +320,6 @@ export const offersProfileRouter = createRouter()
                       jobType: x.jobType,
                       level: x.level,
                       location: x.location,
-                      specialization: x.specialization,
                       title: x.title,
                       totalCompensation: {
                         create: {
@@ -363,7 +361,6 @@ export const offersProfileRouter = createRouter()
                             value: x.monthlySalary.value,
                           },
                         },
-                        specialization: x.specialization,
                         title: x.title,
                       };
                     }
@@ -382,7 +379,6 @@ export const offersProfileRouter = createRouter()
                           value: x.monthlySalary.value,
                         },
                       },
-                      specialization: x.specialization,
                       title: x.title,
                     };
                   }
@@ -442,7 +438,6 @@ export const offersProfileRouter = createRouter()
                             value: x.offersIntern.monthlySalary.value,
                           },
                         },
-                        specialization: x.offersIntern.specialization,
                         startYear: x.offersIntern.startYear,
                         title: x.offersIntern.title,
                       },
@@ -452,17 +447,10 @@ export const offersProfileRouter = createRouter()
                 if (
                   x.jobType === JobType.FULLTIME &&
                   x.offersFullTime &&
-                  x.offersFullTime.baseSalary?.currency != null &&
-                  x.offersFullTime.baseSalary?.value != null &&
-                  x.offersFullTime.bonus?.currency != null &&
-                  x.offersFullTime.bonus?.value != null &&
-                  x.offersFullTime.stocks?.currency != null &&
-                  x.offersFullTime.stocks?.value != null &&
                   x.offersFullTime.totalCompensation?.currency != null &&
                   x.offersFullTime.totalCompensation?.value != null &&
                   x.offersFullTime.level != null &&
-                  x.offersFullTime.title != null &&
-                  x.offersFullTime.specialization != null
+                  x.offersFullTime.title != null
                 ) {
                   return {
                     comments: x.comments,
@@ -477,44 +465,53 @@ export const offersProfileRouter = createRouter()
                     negotiationStrategy: x.negotiationStrategy,
                     offersFullTime: {
                       create: {
-                        baseSalary: {
-                          create: {
-                            baseCurrency: baseCurrencyString,
-                            baseValue: await convert(
-                              x.offersFullTime.baseSalary.value,
-                              x.offersFullTime.baseSalary.currency,
-                              baseCurrencyString,
-                            ),
-                            currency: x.offersFullTime.baseSalary.currency,
-                            value: x.offersFullTime.baseSalary.value,
-                          },
-                        },
-                        bonus: {
-                          create: {
-                            baseCurrency: baseCurrencyString,
-                            baseValue: await convert(
-                              x.offersFullTime.bonus.value,
-                              x.offersFullTime.bonus.currency,
-                              baseCurrencyString,
-                            ),
-                            currency: x.offersFullTime.bonus.currency,
-                            value: x.offersFullTime.bonus.value,
-                          },
-                        },
+                        baseSalary:
+                          x.offersFullTime?.baseSalary != null
+                            ? {
+                                create: {
+                                  baseCurrency: baseCurrencyString,
+                                  baseValue: await convert(
+                                    x.offersFullTime.baseSalary.value,
+                                    x.offersFullTime.baseSalary.currency,
+                                    baseCurrencyString,
+                                  ),
+                                  currency:
+                                    x.offersFullTime.baseSalary.currency,
+                                  value: x.offersFullTime.baseSalary.value,
+                                },
+                              }
+                            : undefined,
+                        bonus:
+                          x.offersFullTime?.bonus != null
+                            ? {
+                                create: {
+                                  baseCurrency: baseCurrencyString,
+                                  baseValue: await convert(
+                                    x.offersFullTime.bonus.value,
+                                    x.offersFullTime.bonus.currency,
+                                    baseCurrencyString,
+                                  ),
+                                  currency: x.offersFullTime.bonus.currency,
+                                  value: x.offersFullTime.bonus.value,
+                                },
+                              }
+                            : undefined,
                         level: x.offersFullTime.level,
-                        specialization: x.offersFullTime.specialization,
-                        stocks: {
-                          create: {
-                            baseCurrency: baseCurrencyString,
-                            baseValue: await convert(
-                              x.offersFullTime.stocks.value,
-                              x.offersFullTime.stocks.currency,
-                              baseCurrencyString,
-                            ),
-                            currency: x.offersFullTime.stocks.currency,
-                            value: x.offersFullTime.stocks.value,
-                          },
-                        },
+                        stocks:
+                          x.offersFullTime?.stocks != null
+                            ? {
+                                create: {
+                                  baseCurrency: baseCurrencyString,
+                                  baseValue: await convert(
+                                    x.offersFullTime.stocks.value,
+                                    x.offersFullTime.stocks.currency,
+                                    baseCurrencyString,
+                                  ),
+                                  currency: x.offersFullTime.stocks.currency,
+                                  value: x.offersFullTime.stocks.value,
+                                },
+                              }
+                            : undefined,
                         title: x.offersFullTime.title,
                         totalCompensation: {
                           create: {
@@ -714,7 +711,6 @@ export const offersProfileRouter = createRouter()
                 companyId: exp.companyId, // TODO: check if can change with connect or whether there is a difference
                 durationInMonths: exp.durationInMonths,
                 level: exp.level,
-                specialization: exp.specialization,
               },
               where: {
                 id: exp.id,
@@ -821,7 +817,6 @@ export const offersProfileRouter = createRouter()
                           jobType: exp.jobType,
                           level: exp.level,
                           location: exp.location,
-                          specialization: exp.specialization,
                           title: exp.title,
                           totalCompensation: {
                             create: {
@@ -851,7 +846,6 @@ export const offersProfileRouter = createRouter()
                           jobType: exp.jobType,
                           level: exp.level,
                           location: exp.location,
-                          specialization: exp.specialization,
                           title: exp.title,
                           totalCompensation: {
                             create: {
@@ -887,7 +881,6 @@ export const offersProfileRouter = createRouter()
                         jobType: exp.jobType,
                         level: exp.level,
                         location: exp.location,
-                        specialization: exp.specialization,
                         title: exp.title,
                       },
                     },
@@ -905,7 +898,6 @@ export const offersProfileRouter = createRouter()
                         jobType: exp.jobType,
                         level: exp.level,
                         location: exp.location,
-                        specialization: exp.specialization,
                         title: exp.title,
                       },
                     },
@@ -945,7 +937,6 @@ export const offersProfileRouter = createRouter()
                               value: exp.monthlySalary.value,
                             },
                           },
-                          specialization: exp.specialization,
                           title: exp.title,
                         },
                       },
@@ -974,7 +965,6 @@ export const offersProfileRouter = createRouter()
                               value: exp.monthlySalary.value,
                             },
                           },
-                          specialization: exp.specialization,
                           title: exp.title,
                         },
                       },
@@ -997,7 +987,6 @@ export const offersProfileRouter = createRouter()
                         durationInMonths: exp.durationInMonths,
                         jobType: exp.jobType,
                         location: exp.location,
-                        specialization: exp.specialization,
                         title: exp.title,
                       },
                     },
@@ -1014,7 +1003,6 @@ export const offersProfileRouter = createRouter()
                         durationInMonths: exp.durationInMonths,
                         jobType: exp.jobType,
                         location: exp.location,
-                        specialization: exp.specialization,
                         title: exp.title,
                       },
                     },
@@ -1121,7 +1109,6 @@ export const offersProfileRouter = createRouter()
                 data: {
                   internshipCycle:
                     offerToUpdate.offersIntern.internshipCycle ?? undefined,
-                  specialization: offerToUpdate.offersIntern.specialization,
                   startYear: offerToUpdate.offersIntern.startYear ?? undefined,
                   title: offerToUpdate.offersIntern.title,
                 },
@@ -1150,7 +1137,6 @@ export const offersProfileRouter = createRouter()
               await ctx.prisma.offersFullTime.update({
                 data: {
                   level: offerToUpdate.offersFullTime.level ?? undefined,
-                  specialization: offerToUpdate.offersFullTime.specialization,
                   title: offerToUpdate.offersFullTime.title,
                 },
                 where: {
@@ -1174,7 +1160,7 @@ export const offersProfileRouter = createRouter()
                   },
                 });
               }
-              if (offerToUpdate.offersFullTime.bonus) {
+              if (offerToUpdate.offersFullTime.bonus != null) {
                 await ctx.prisma.offersCurrency.update({
                   data: {
                     baseCurrency: baseCurrencyString,
@@ -1191,7 +1177,7 @@ export const offersProfileRouter = createRouter()
                   },
                 });
               }
-              if (offerToUpdate.offersFullTime.stocks) {
+              if (offerToUpdate.offersFullTime.stocks != null) {
                 await ctx.prisma.offersCurrency.update({
                   data: {
                     baseCurrency: baseCurrencyString,
@@ -1269,8 +1255,6 @@ export const offersProfileRouter = createRouter()
                                 offerToUpdate.offersIntern.monthlySalary.value,
                             },
                           },
-                          specialization:
-                            offerToUpdate.offersIntern.specialization,
                           startYear: offerToUpdate.offersIntern.startYear,
                           title: offerToUpdate.offersIntern.title,
                         },
@@ -1286,12 +1270,6 @@ export const offersProfileRouter = createRouter()
             if (
               offerToUpdate.jobType === JobType.FULLTIME &&
               offerToUpdate.offersFullTime &&
-              offerToUpdate.offersFullTime.baseSalary?.currency != null &&
-              offerToUpdate.offersFullTime.baseSalary?.value != null &&
-              offerToUpdate.offersFullTime.bonus?.currency != null &&
-              offerToUpdate.offersFullTime.bonus?.value != null &&
-              offerToUpdate.offersFullTime.stocks?.currency != null &&
-              offerToUpdate.offersFullTime.stocks?.value != null &&
               offerToUpdate.offersFullTime.totalCompensation?.currency !=
                 null &&
               offerToUpdate.offersFullTime.totalCompensation?.value != null &&
@@ -1313,51 +1291,66 @@ export const offersProfileRouter = createRouter()
                       negotiationStrategy: offerToUpdate.negotiationStrategy,
                       offersFullTime: {
                         create: {
-                          baseSalary: {
-                            create: {
-                              baseCurrency: baseCurrencyString,
-                              baseValue: await convert(
-                                offerToUpdate.offersFullTime.baseSalary.value,
-                                offerToUpdate.offersFullTime.baseSalary
-                                  .currency,
-                                baseCurrencyString,
-                              ),
-                              currency:
-                                offerToUpdate.offersFullTime.baseSalary
-                                  .currency,
-                              value:
-                                offerToUpdate.offersFullTime.baseSalary.value,
-                            },
-                          },
-                          bonus: {
-                            create: {
-                              baseCurrency: baseCurrencyString,
-                              baseValue: await convert(
-                                offerToUpdate.offersFullTime.bonus.value,
-                                offerToUpdate.offersFullTime.bonus.currency,
-                                baseCurrencyString,
-                              ),
-                              currency:
-                                offerToUpdate.offersFullTime.bonus.currency,
-                              value: offerToUpdate.offersFullTime.bonus.value,
-                            },
-                          },
+                          baseSalary:
+                            offerToUpdate.offersFullTime?.baseSalary != null
+                              ? {
+                                  create: {
+                                    baseCurrency: baseCurrencyString,
+                                    baseValue: await convert(
+                                      offerToUpdate.offersFullTime.baseSalary
+                                        .value,
+                                      offerToUpdate.offersFullTime.baseSalary
+                                        .currency,
+                                      baseCurrencyString,
+                                    ),
+                                    currency:
+                                      offerToUpdate.offersFullTime.baseSalary
+                                        .currency,
+                                    value:
+                                      offerToUpdate.offersFullTime.baseSalary
+                                        .value,
+                                  },
+                                }
+                              : undefined,
+                          bonus:
+                            offerToUpdate.offersFullTime?.bonus != null
+                              ? {
+                                  create: {
+                                    baseCurrency: baseCurrencyString,
+                                    baseValue: await convert(
+                                      offerToUpdate.offersFullTime.bonus.value,
+                                      offerToUpdate.offersFullTime.bonus
+                                        .currency,
+                                      baseCurrencyString,
+                                    ),
+                                    currency:
+                                      offerToUpdate.offersFullTime.bonus
+                                        .currency,
+                                    value:
+                                      offerToUpdate.offersFullTime.bonus.value,
+                                  },
+                                }
+                              : undefined,
                           level: offerToUpdate.offersFullTime.level,
-                          specialization:
-                            offerToUpdate.offersFullTime.specialization,
-                          stocks: {
-                            create: {
-                              baseCurrency: baseCurrencyString,
-                              baseValue: await convert(
-                                offerToUpdate.offersFullTime.stocks.value,
-                                offerToUpdate.offersFullTime.stocks.currency,
-                                baseCurrencyString,
-                              ),
-                              currency:
-                                offerToUpdate.offersFullTime.stocks.currency,
-                              value: offerToUpdate.offersFullTime.stocks.value,
-                            },
-                          },
+                          stocks:
+                            offerToUpdate.offersFullTime?.stocks != null
+                              ? {
+                                  create: {
+                                    baseCurrency: baseCurrencyString,
+                                    baseValue: await convert(
+                                      offerToUpdate.offersFullTime.stocks.value,
+                                      offerToUpdate.offersFullTime.stocks
+                                        .currency,
+                                      baseCurrencyString,
+                                    ),
+                                    currency:
+                                      offerToUpdate.offersFullTime.stocks
+                                        .currency,
+                                    value:
+                                      offerToUpdate.offersFullTime.stocks.value,
+                                  },
+                                }
+                              : undefined,
                           title: offerToUpdate.offersFullTime.title,
                           totalCompensation: {
                             create: {
diff --git a/apps/portal/src/server/router/offers/offers.ts b/apps/portal/src/server/router/offers/offers.ts
index b333fa66..84756179 100644
--- a/apps/portal/src/server/router/offers/offers.ts
+++ b/apps/portal/src/server/router/offers/offers.ts
@@ -317,27 +317,36 @@ export const offersRouter = createRouter().query('list', {
                 offer.offersFullTime.totalCompensation.updatedAt,
               );
             offer.offersFullTime.totalCompensation.currency = currency;
-            offer.offersFullTime.baseSalary.value = await convertWithDate(
-              offer.offersFullTime.baseSalary.value,
-              offer.offersFullTime.baseSalary.currency,
-              currency,
-              offer.offersFullTime.baseSalary.updatedAt,
-            );
-            offer.offersFullTime.baseSalary.currency = currency;
-            offer.offersFullTime.stocks.value = await convertWithDate(
-              offer.offersFullTime.stocks.value,
-              offer.offersFullTime.stocks.currency,
-              currency,
-              offer.offersFullTime.stocks.updatedAt,
-            );
-            offer.offersFullTime.stocks.currency = currency;
-            offer.offersFullTime.bonus.value = await convertWithDate(
-              offer.offersFullTime.bonus.value,
-              offer.offersFullTime.bonus.currency,
-              currency,
-              offer.offersFullTime.bonus.updatedAt,
-            );
-            offer.offersFullTime.bonus.currency = currency;
+
+            if (offer.offersFullTime?.baseSalary != null) {
+              offer.offersFullTime.baseSalary.value = await convertWithDate(
+                offer.offersFullTime.baseSalary.value,
+                offer.offersFullTime.baseSalary.currency,
+                currency,
+                offer.offersFullTime.baseSalary.updatedAt,
+              );
+              offer.offersFullTime.baseSalary.currency = currency;
+            }
+
+            if (offer.offersFullTime?.stocks != null) {
+              offer.offersFullTime.stocks.value = await convertWithDate(
+                offer.offersFullTime.stocks.value,
+                offer.offersFullTime.stocks.currency,
+                currency,
+                offer.offersFullTime.stocks.updatedAt,
+              );
+              offer.offersFullTime.stocks.currency = currency;
+            }
+
+            if (offer.offersFullTime?.bonus != null) {
+              offer.offersFullTime.bonus.value = await convertWithDate(
+                offer.offersFullTime.bonus.value,
+                offer.offersFullTime.bonus.currency,
+                currency,
+                offer.offersFullTime.bonus.updatedAt,
+              );
+              offer.offersFullTime.bonus.currency = currency;
+            }
           } else if (offer.offersIntern?.monthlySalary != null) {
             offer.offersIntern.monthlySalary.value = await convertWithDate(
               offer.offersIntern.monthlySalary.value,
diff --git a/apps/portal/src/types/offers.d.ts b/apps/portal/src/types/offers.d.ts
index 487ae0c9..f2b26332 100644
--- a/apps/portal/src/types/offers.d.ts
+++ b/apps/portal/src/types/offers.d.ts
@@ -26,7 +26,6 @@ export type Experience = {
   level: string?;
   location: string?;
   monthlySalary: Valuation?;
-  specialization: string?;
   title: string?;
   totalCompensation: Valuation?;
 };
@@ -87,12 +86,11 @@ export type ProfileOffer = {
 };
 
 export type FullTime = {
-  baseSalary: Valuation;
-  bonus: Valuation;
+  baseSalary: Valuation?;
+  bonus: Valuation?;
   id: string;
   level: string;
-  specialization: string;
-  stocks: Valuation;
+  stocks: Valuation?;
   title: string;
   totalCompensation: Valuation;
 };
@@ -101,7 +99,6 @@ export type Intern = {
   id: string;
   internshipCycle: string;
   monthlySalary: Valuation;
-  specialization: string;
   startYear: number;
   title: string;
 };
@@ -163,7 +160,6 @@ export type AnalysisHighestOffer = {
   id: string;
   level: string;
   location: string;
-  specialization: string;
   totalYoe: number;
 };
 
@@ -178,7 +174,6 @@ export type AnalysisOffer = {
   negotiationStrategy: string;
   previousCompanies: Array<string>;
   profileName: string;
-  specialization: string;
   title: string;
   totalYoe: number;
 };

From ce906c0470bbd4454ddc39c8c39ab0f0c3d35246 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Tue, 25 Oct 2022 00:27:54 +0800
Subject: [PATCH 12/12] [ui][text input] change pl to px for startAddOn

---
 packages/ui/src/TextInput/TextInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/TextInput/TextInput.tsx b/packages/ui/src/TextInput/TextInput.tsx
index 98b150f2..81f64190 100644
--- a/packages/ui/src/TextInput/TextInput.tsx
+++ b/packages/ui/src/TextInput/TextInput.tsx
@@ -154,14 +154,14 @@ function TextInput(
           switch (startAddOnType) {
             case 'label':
               return (
-                <div className="pointer-events-none flex items-center pl-3 text-slate-500">
+                <div className="pointer-events-none flex items-center px-2 text-slate-500">
                   {startAddOn}
                 </div>
               );
             case 'icon': {
               const StartAddOn = startAddOn;
               return (
-                <div className="pointer-events-none flex items-center pl-3">
+                <div className="pointer-events-none flex items-center px-2">
                   <StartAddOn
                     aria-hidden="true"
                     className="h-5 w-5 text-slate-400"