[offers][feat] integrate location for offer table and profile

apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx

@@ -36,7 +36,7 @@ export default function DashboardProfileCard({
           </p>
           <p>
             {location
-              ? `Company: ${company.name}, ${location}`
+              ? `Company: ${company.name}, ${location.cityName}`
               : `Company: ${company.name}`}
           </p>
           {level && <p>Level: {level}</p>}

apps/portal/src/components/offers/profile/OfferCard.tsx

@@ -40,7 +40,7 @@ export default function OfferCard({
               <BuildingOffice2Icon className="mr-3 h-5" />
             </span>
             <span className="font-bold">
-              {location ? `${companyName}, ${location}` : companyName}
+              {location ? `${companyName}, ${location.cityName}` : companyName}
             </span>
           </div>
           <div className="ml-8 flex flex-row">
@@ -92,11 +92,11 @@ export default function OfferCard({
                 </span>
               </div>
             )}
-            {totalCompensation && (
+            {(base || stocks || bonus) && totalCompensation && (
               <div className="ml-8 flex flex-row font-light">
                 <p>
-                  Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
+                  Base / year: {base ?? 'N/A'} ⋅ Stocks / year:{' '}
-                  {bonus}
+                  {stocks ?? 'N/A'} ⋅ Bonus / year: {bonus ?? 'N/A'}
                 </p>
               </div>
             )}

apps/portal/src/components/offers/table/OffersTable.tsx

@@ -21,10 +21,12 @@ import type { DashboardOffer, GetOffersResponse, Paging } from '~/types/offers';
 
 const NUMBER_OF_OFFERS_IN_PAGE = 10;
 export type OffersTableProps = Readonly<{
+  cityFilter: string;
   companyFilter: string;
   jobTitleFilter: string;
 }>;
 export default function OffersTable({
+  cityFilter,
   companyFilter,
   jobTitleFilter,
 }: OffersTableProps) {
@@ -53,10 +55,11 @@ export default function OffersTable({
     [
       'offers.list',
       {
+        // Location: 'Singapore, Singapore', // TODO: Geolocation
+        cityId: cityFilter,
         companyId: companyFilter,
         currency,
         limit: NUMBER_OF_OFFERS_IN_PAGE,
-        location: 'Singapore, Singapore', // TODO: Geolocation
         offset: pagination.currentPage,
         sortBy: OfferTableSortBy[selectedFilter] ?? '-monthYearReceived',
         title: jobTitleFilter,
@@ -102,8 +105,8 @@ export default function OffersTable({
           ))}
         </DropdownMenu>
         <div className="divide-x-slate-200 flex items-center space-x-4 divide-x">
-          <div className="justify-left flex items-center space-x-2">
+          <div className="justify-left flex items-center space-x-2 font-medium text-slate-700">
-            <span>View all offers in</span>
+            <span>Display offers in</span>
             <CurrencySelector
               handleCurrencyChange={(value: string) => setCurrency(value)}
               selectedCurrency={currency}

apps/portal/src/components/offers/types.ts

@@ -2,6 +2,8 @@ import type { JobType } from '@prisma/client';
 
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
+import type { Location } from '~/types/offers';
+
 export const HOME_URL = '/offers';
 
 /*
@@ -50,7 +52,7 @@ type ExperiencePostData = {
   id?: string;
   jobType?: string | null;
   level?: string | null;
-  location?: string | null;
+  location?: Location | null;
   monthlySalary?: Money | null;
   title?: string | null;
   totalCompensation?: Money | null;
@@ -132,7 +134,7 @@ export type OfferDisplayData = {
   jobLevel?: string | null;
   jobTitle?: string | null;
   jobType?: JobType;
-  location?: string | null;
+  location?: Location | null;
   monthlySalary?: string | null;
   negotiationStrategy?: string | null;
   otherComment?: string | null;

apps/portal/src/pages/offers/index.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { useState } from 'react';
+import { MapPinIcon } from '@heroicons/react/24/outline';
 import { Banner } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
@@ -7,9 +8,12 @@ import OffersTable from '~/components/offers/table/OffersTable';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
+import CitiesTypeahead from '../../components/shared/CitiesTypeahead';
+
 export default function OffersHomePage() {
   const [jobTitleFilter, setjobTitleFilter] = useState('software-engineer');
   const [companyFilter, setCompanyFilter] = useState('');
+  const [cityFilter, setCityFilter] = useState('');
   const { event: gaEvent } = useGoogleAnalytics();
 
   return (
@@ -21,6 +25,25 @@ export default function OffersHomePage() {
         </Link>
         . ⭐
       </Banner>
+      <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4">
+        <span>
+          <MapPinIcon className="flex h-7 w-7" />
+        </span>
+        <CitiesTypeahead
+          isLabelHidden={true}
+          placeholder="All Cities"
+          onSelect={(option) => {
+            if (option) {
+              setCityFilter(option.value);
+              gaEvent({
+                action: `offers.table_filter_city_${option.value}`,
+                category: 'engagement',
+                label: 'Filter by city',
+              });
+            }
+          }}
+        />
+      </div>
       <div className="bg-slate-100 py-16 px-4">
         <div>
           <div>
@@ -58,7 +81,7 @@ export default function OffersHomePage() {
                 if (option) {
                   setCompanyFilter(option.value);
                   gaEvent({
-                    action: 'offers.table_filter_company',
+                    action: `offers.table_filter_company_${option.value}`,
                     category: 'engagement',
                     label: 'Filter by company',
                   });
@@ -70,6 +93,7 @@ export default function OffersHomePage() {
       </div>
       <div className="flex justify-center bg-white pb-20 pt-10">
         <OffersTable
+          cityFilter={cityFilter}
           companyFilter={companyFilter}
           jobTitleFilter={jobTitleFilter}
         />