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

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:{' '}
-                  {bonus}
+                  Base / year: {base ?? 'N/A'} ⋅ Stocks / year:{' '}
+                  {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,

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';
@@ -9,11 +10,14 @@ import Container from '~/components/shared/Container';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
 
+import CitiesTypeahead from '../../components/shared/CitiesTypeahead';
+
 export default function OffersHomePage() {
   const [jobTitleFilter, setJobTitleFilter] = useState<JobTitleType | ''>(
     'software-engineer',
   );
   const [companyFilter, setCompanyFilter] = useState('');
+  const [cityFilter, setCityFilter] = useState('');
   const { event: gaEvent } = useGoogleAnalytics();
 
   return (
@@ -25,6 +29,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>
@@ -66,7 +89,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',
                   });
@@ -80,6 +103,7 @@ export default function OffersHomePage() {
       </div>
       <Container className="pb-20 pt-10">
         <OffersTable
+          cityFilter={cityFilter}
           companyFilter={companyFilter}
           jobTitleFilter={jobTitleFilter}
         />