[offers][fix] add temp admin page (#544)
Zhang Ziqing
2 years ago
committed by
GitHub
parent
93d5c4cace
commit
3995d2d2cc
@ -0,0 +1,83 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
import type { OfferTableSortType } from '~/components/offers/admin_temp/types';
|
||||
import {
|
||||
getOppositeSortOrder,
|
||||
OFFER_TABLE_SORT_ORDER,
|
||||
} from '~/components/offers/admin_temp/types';
|
||||
|
||||
export type OffersTableHeaderProps = Readonly<{
|
||||
header: string;
|
||||
isLastColumn: boolean;
|
||||
onSort?: (
|
||||
sortDirection: OFFER_TABLE_SORT_ORDER,
|
||||
sortType: OfferTableSortType,
|
||||
) => void;
|
||||
sortDirection?: OFFER_TABLE_SORT_ORDER;
|
||||
sortType?: OfferTableSortType;
|
||||
}>;
|
||||
|
||||
export default function OffersHeader({
|
||||
header,
|
||||
isLastColumn,
|
||||
onSort,
|
||||
sortDirection,
|
||||
sortType,
|
||||
}: OffersTableHeaderProps) {
|
||||
return (
|
||||
<th
|
||||
key={header}
|
||||
className={clsx(
|
||||
'bg-slate-100 py-3 px-4',
|
||||
sortType &&
|
||||
'hover:cursor-pointer hover:bg-slate-200 active:bg-slate-300',
|
||||
header !== 'Company' && 'whitespace-nowrap',
|
||||
(sortDirection === OFFER_TABLE_SORT_ORDER.ASC ||
|
||||
sortDirection === OFFER_TABLE_SORT_ORDER.DESC) &&
|
||||
'text-primary-600',
|
||||
// Make last column sticky.
|
||||
isLastColumn && 'sticky right-0 drop-shadow md:drop-shadow-none',
|
||||
)}
|
||||
scope="col"
|
||||
onClick={
|
||||
onSort &&
|
||||
sortType &&
|
||||
(() => {
|
||||
onSort(
|
||||
sortDirection
|
||||
? getOppositeSortOrder(sortDirection)
|
||||
: OFFER_TABLE_SORT_ORDER.ASC,
|
||||
sortType,
|
||||
);
|
||||
})
|
||||
}>
|
||||
<div className="my-auto flex items-center justify-start">
|
||||
{header}
|
||||
{onSort && sortType && (
|
||||
<span className="ml-2 grid grid-cols-1 space-y-0 text-[9px] text-gray-300">
|
||||
<div
|
||||
className={clsx(
|
||||
'-mb-2 flex items-end sm:-mb-3',
|
||||
sortDirection === OFFER_TABLE_SORT_ORDER.ASC &&
|
||||
'text-primary-500',
|
||||
sortDirection === OFFER_TABLE_SORT_ORDER.DESC &&
|
||||
'text-slate-200',
|
||||
)}>
|
||||
▲
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'-mb-3 flex items-end',
|
||||
sortDirection === OFFER_TABLE_SORT_ORDER.DESC &&
|
||||
'text-primary-500',
|
||||
sortDirection === OFFER_TABLE_SORT_ORDER.ASC &&
|
||||
'text-slate-200',
|
||||
)}>
|
||||
▼
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
import clsx from 'clsx';
|
||||
import Link from 'next/link';
|
||||
import { JobType } from '@prisma/client';
|
||||
|
||||
import type { JobTitleType } from '~/components/shared/JobTitles';
|
||||
import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
|
||||
|
||||
import { convertMoneyToString } from '~/utils/offers/currency';
|
||||
import { formatDate } from '~/utils/offers/time';
|
||||
|
||||
import type { AdminDashboardOffer } from '~/types/offers';
|
||||
|
||||
export type OfferTableRowProps = Readonly<{
|
||||
jobType: JobType;
|
||||
row: AdminDashboardOffer;
|
||||
}>;
|
||||
|
||||
export default function OfferTableRow({
|
||||
jobType,
|
||||
row: {
|
||||
baseSalary,
|
||||
bonus,
|
||||
company,
|
||||
id,
|
||||
income,
|
||||
location,
|
||||
monthYearReceived,
|
||||
numberOfOtherOffers,
|
||||
profileId,
|
||||
stocks,
|
||||
title,
|
||||
totalYoe,
|
||||
token,
|
||||
},
|
||||
}: OfferTableRowProps) {
|
||||
return (
|
||||
<tr key={id} className="divide-x divide-slate-200 border-b bg-white">
|
||||
<td className="space-y-0.5 py-4 px-4" scope="row">
|
||||
<div className="font-medium">{company.name}</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
{location.cityName} ({location.countryCode})
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
{getLabelForJobTitleType(title as JobTitleType)}
|
||||
</td>
|
||||
<td className="py-4 px-4">{totalYoe}</td>
|
||||
<td className="py-4 px-4">{convertMoneyToString(income)}</td>
|
||||
{jobType === JobType.FULLTIME && (
|
||||
<td className="py-4 px-4">
|
||||
{`${convertMoneyToString(baseSalary)} / ${convertMoneyToString(
|
||||
bonus,
|
||||
)} / ${convertMoneyToString(stocks)}`}
|
||||
</td>
|
||||
)}
|
||||
<td className="py-4 px-4">{formatDate(monthYearReceived)}</td>
|
||||
<td
|
||||
className={clsx(
|
||||
'sticky right-0 bg-white px-4 py-4 drop-shadow lg:drop-shadow-none',
|
||||
)}>
|
||||
<Link
|
||||
className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
|
||||
href={`/offers/profile/${profileId}?token=${token}`}>
|
||||
View Editable Profile
|
||||
</Link>
|
||||
{numberOfOtherOffers > 0 && (
|
||||
<div className="text-xs text-slate-500">
|
||||
This person also received {numberOfOtherOffers} other offer(s).
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,321 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { JobType } from '@prisma/client';
|
||||
import { DropdownMenu, Spinner, useToast } from '@tih/ui';
|
||||
|
||||
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
|
||||
import OffersRow from '~/components/offers/admin_temp//OffersRow';
|
||||
import OffersHeader from '~/components/offers/admin_temp/OffersHeader';
|
||||
import OffersTablePagination from '~/components/offers/admin_temp/OffersTablePagination';
|
||||
import type {
|
||||
OfferTableColumn,
|
||||
OfferTableSortType,
|
||||
} from '~/components/offers/admin_temp/types';
|
||||
import {
|
||||
FullTimeOfferTableColumns,
|
||||
InternOfferTableColumns,
|
||||
OFFER_TABLE_SORT_ORDER,
|
||||
OfferTableYoeOptions,
|
||||
YOE_CATEGORY_PARAM,
|
||||
} from '~/components/offers/admin_temp/types';
|
||||
|
||||
import { getCurrencyForCountry } from '~/utils/offers/currency/CurrencyEnum';
|
||||
import CurrencySelector from '~/utils/offers/currency/CurrencySelector';
|
||||
import { useSearchParamSingle } from '~/utils/offers/useSearchParam';
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
import type {
|
||||
AdminDashboardOffer,
|
||||
GetAdminOffersResponse,
|
||||
Paging,
|
||||
} from '~/types/offers';
|
||||
|
||||
const NUMBER_OF_OFFERS_PER_PAGE = 20;
|
||||
|
||||
export type OffersTableProps = Readonly<{
|
||||
companyFilter: string;
|
||||
companyName?: string;
|
||||
country: string | null;
|
||||
countryFilter: string;
|
||||
jobTitleFilter: string;
|
||||
}>;
|
||||
|
||||
export default function OffersTable({
|
||||
country,
|
||||
countryFilter,
|
||||
companyName,
|
||||
companyFilter,
|
||||
jobTitleFilter,
|
||||
}: OffersTableProps) {
|
||||
const [currency, setCurrency] = useState(
|
||||
getCurrencyForCountry(country).toString(),
|
||||
);
|
||||
const [jobType, setJobType] = useState<JobType>(JobType.FULLTIME);
|
||||
const [pagination, setPagination] = useState<Paging>({
|
||||
currentPage: 0,
|
||||
numOfItems: 0,
|
||||
numOfPages: 0,
|
||||
totalItems: 0,
|
||||
});
|
||||
|
||||
const [offers, setOffers] = useState<Array<AdminDashboardOffer>>([]);
|
||||
|
||||
const { event: gaEvent } = useGoogleAnalytics();
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const [
|
||||
selectedYoeCategory,
|
||||
setSelectedYoeCategory,
|
||||
isYoeCategoryInitialized,
|
||||
] = useSearchParamSingle<keyof typeof YOE_CATEGORY_PARAM>('yoeCategory');
|
||||
|
||||
const [
|
||||
selectedSortDirection,
|
||||
setSelectedSortDirection,
|
||||
isSortDirectionInitialized,
|
||||
] = useSearchParamSingle<OFFER_TABLE_SORT_ORDER>('sortDirection');
|
||||
|
||||
const [selectedSortType, setSelectedSortType, isSortTypeInitialized] =
|
||||
useSearchParamSingle<OfferTableSortType>('sortType');
|
||||
|
||||
const areFilterParamsInitialized = useMemo(() => {
|
||||
return (
|
||||
isYoeCategoryInitialized &&
|
||||
isSortDirectionInitialized &&
|
||||
isSortTypeInitialized
|
||||
);
|
||||
}, [
|
||||
isYoeCategoryInitialized,
|
||||
isSortDirectionInitialized,
|
||||
isSortTypeInitialized,
|
||||
]);
|
||||
const { pathname } = router;
|
||||
|
||||
useEffect(() => {
|
||||
if (areFilterParamsInitialized) {
|
||||
router.replace(
|
||||
{
|
||||
pathname,
|
||||
query: {
|
||||
companyId: companyFilter,
|
||||
companyName,
|
||||
jobTitleId: jobTitleFilter,
|
||||
sortDirection: selectedSortDirection,
|
||||
sortType: selectedSortType,
|
||||
yoeCategory: selectedYoeCategory,
|
||||
},
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true },
|
||||
);
|
||||
setPagination({
|
||||
currentPage: 0,
|
||||
numOfItems: 0,
|
||||
numOfPages: 0,
|
||||
totalItems: 0,
|
||||
});
|
||||
setIsLoading(true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
areFilterParamsInitialized,
|
||||
currency,
|
||||
countryFilter,
|
||||
companyFilter,
|
||||
jobTitleFilter,
|
||||
selectedSortDirection,
|
||||
selectedSortType,
|
||||
selectedYoeCategory,
|
||||
pathname,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedSortDirection(OFFER_TABLE_SORT_ORDER.UNSORTED);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedYoeCategory]);
|
||||
const topRef = useRef<HTMLDivElement>(null);
|
||||
const { showToast } = useToast();
|
||||
const { isLoading: isResultsLoading } = trpc.useQuery(
|
||||
[
|
||||
'offers.admin.list',
|
||||
{
|
||||
companyId: companyFilter,
|
||||
countryId: countryFilter,
|
||||
currency,
|
||||
limit: NUMBER_OF_OFFERS_PER_PAGE,
|
||||
offset: pagination.currentPage,
|
||||
sortBy:
|
||||
selectedSortDirection && selectedSortType
|
||||
? `${selectedSortDirection}${selectedSortType}`
|
||||
: '-monthYearReceived',
|
||||
title: jobTitleFilter,
|
||||
yoeCategory: selectedYoeCategory
|
||||
? YOE_CATEGORY_PARAM[selectedYoeCategory as string]
|
||||
: undefined,
|
||||
},
|
||||
],
|
||||
{
|
||||
onError: () => {
|
||||
showToast({
|
||||
title: 'Error loading the page.',
|
||||
variant: 'failure',
|
||||
});
|
||||
setIsLoading(false);
|
||||
},
|
||||
onSuccess: (response: GetAdminOffersResponse) => {
|
||||
setOffers(response.data);
|
||||
setPagination(response.paging);
|
||||
setJobType(response.jobType);
|
||||
setIsLoading(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const onSort = (
|
||||
sortDirection: OFFER_TABLE_SORT_ORDER,
|
||||
sortType: OfferTableSortType,
|
||||
) => {
|
||||
gaEvent({
|
||||
action: 'offers_table_sort',
|
||||
category: 'engagement',
|
||||
label: `${sortType} - ${sortDirection}`,
|
||||
});
|
||||
setSelectedSortType(sortType);
|
||||
setSelectedSortDirection(sortDirection);
|
||||
};
|
||||
|
||||
function renderFilters() {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-4 text-xs text-slate-700 sm:grid-cols-4 sm:text-sm md:text-base">
|
||||
<DropdownMenu
|
||||
align="start"
|
||||
label={
|
||||
OfferTableYoeOptions.filter(
|
||||
({ value: itemValue }) => itemValue === selectedYoeCategory,
|
||||
).length > 0
|
||||
? OfferTableYoeOptions.filter(
|
||||
({ value: itemValue }) => itemValue === selectedYoeCategory,
|
||||
)[0].label
|
||||
: OfferTableYoeOptions[0].label
|
||||
}
|
||||
size="inherit">
|
||||
{OfferTableYoeOptions.map(({ label: itemLabel, value }) => (
|
||||
<DropdownMenu.Item
|
||||
key={value}
|
||||
isSelected={value === selectedYoeCategory}
|
||||
label={itemLabel}
|
||||
onClick={() => {
|
||||
setSelectedYoeCategory(value);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_yoe_category_${value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by YOE category',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
<div className="divide-x-slate-200 col-span-3 flex items-center justify-end space-x-4 divide-x">
|
||||
<div className="justify-left flex items-center space-x-2 font-medium text-slate-700">
|
||||
<span className="sr-only sm:not-sr-only sm:inline">
|
||||
Display offers in
|
||||
</span>
|
||||
<CurrencySelector
|
||||
handleCurrencyChange={(value: string) => setCurrency(value)}
|
||||
selectedCurrency={currency}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderHeader() {
|
||||
const columns: Array<OfferTableColumn> =
|
||||
jobType === JobType.FULLTIME
|
||||
? FullTimeOfferTableColumns
|
||||
: InternOfferTableColumns;
|
||||
|
||||
return (
|
||||
<thead className="font-semibold">
|
||||
<tr className="divide-x divide-slate-200">
|
||||
{columns.map((header, index) => (
|
||||
<OffersHeader
|
||||
key={header.label}
|
||||
header={header.label}
|
||||
isLastColumn={index === columns.length - 1}
|
||||
sortDirection={
|
||||
header.sortType === selectedSortType
|
||||
? selectedSortDirection
|
||||
: undefined
|
||||
}
|
||||
sortType={header.sortType}
|
||||
onSort={onSort}
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
}
|
||||
|
||||
const handlePageChange = (currPage: number) => {
|
||||
if (0 <= currPage && currPage < pagination.numOfPages) {
|
||||
setPagination({ ...pagination, currentPage: currPage });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full divide-y divide-slate-200 border border-slate-200 bg-white">
|
||||
<div ref={topRef}>{renderFilters()}</div>
|
||||
<OffersTablePagination
|
||||
endNumber={
|
||||
pagination.currentPage * NUMBER_OF_OFFERS_PER_PAGE + offers.length
|
||||
}
|
||||
handlePageChange={handlePageChange}
|
||||
isInitialFetch={isLoading}
|
||||
isLoading={isResultsLoading}
|
||||
pagination={pagination}
|
||||
startNumber={pagination.currentPage * NUMBER_OF_OFFERS_PER_PAGE + 1}
|
||||
/>
|
||||
<div className="overflow-x-auto text-slate-600">
|
||||
<table className="w-full divide-y divide-slate-200 text-left text-xs text-slate-700 sm:text-sm">
|
||||
{renderHeader()}
|
||||
{!isLoading && (
|
||||
<tbody className="divide-y divide-slate-200">
|
||||
{offers.map((offer) => (
|
||||
<OffersRow key={offer.id} jobType={jobType} row={offer} />
|
||||
))}
|
||||
</tbody>
|
||||
)}
|
||||
</table>
|
||||
{isLoading && (
|
||||
<div className="flex justify-center py-32">
|
||||
<Spinner display="block" size="lg" />
|
||||
</div>
|
||||
)}
|
||||
{(!isLoading && !offers) ||
|
||||
(offers.length === 0 && (
|
||||
<div className="py-16 text-lg">
|
||||
<div className="flex justify-center">No data yet 🥺</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<OffersTablePagination
|
||||
endNumber={
|
||||
pagination.currentPage * NUMBER_OF_OFFERS_PER_PAGE + offers.length
|
||||
}
|
||||
handlePageChange={(number) => {
|
||||
topRef?.current?.scrollIntoView({
|
||||
block: 'start',
|
||||
});
|
||||
handlePageChange(number);
|
||||
}}
|
||||
isInitialFetch={isLoading}
|
||||
isLoading={isResultsLoading}
|
||||
pagination={pagination}
|
||||
startNumber={pagination.currentPage * NUMBER_OF_OFFERS_PER_PAGE + 1}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Pagination, Spinner } from '@tih/ui';
|
||||
|
||||
import type { Paging } from '~/types/offers';
|
||||
|
||||
type OffersTablePaginationProps = Readonly<{
|
||||
endNumber: number;
|
||||
handlePageChange: (page: number) => void;
|
||||
isInitialFetch?: boolean;
|
||||
isLoading?: boolean;
|
||||
pagination: Paging;
|
||||
startNumber: number;
|
||||
}>;
|
||||
|
||||
export default function OffersTablePagination({
|
||||
isInitialFetch,
|
||||
isLoading,
|
||||
endNumber,
|
||||
pagination,
|
||||
startNumber,
|
||||
handlePageChange,
|
||||
}: OffersTablePaginationProps) {
|
||||
const [screenWidth, setScreenWidth] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setScreenWidth(window.innerWidth);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav aria-label="Offers Pagination" className="py-3 px-4">
|
||||
<div className="grid grid-cols-1 items-center gap-2 md:grid-cols-2">
|
||||
<div>
|
||||
{!isInitialFetch && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-sm text-slate-500">
|
||||
Showing
|
||||
<span className="font-semibold text-slate-900">
|
||||
{` ${endNumber > 0 ? startNumber : 0} - ${endNumber} `}
|
||||
</span>
|
||||
{`of `}
|
||||
<span className="font-semibold text-slate-900">
|
||||
{pagination.totalItems}
|
||||
</span>{' '}
|
||||
results
|
||||
</div>
|
||||
{isLoading && <Spinner size="xs" />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex md:justify-end">
|
||||
<Pagination
|
||||
current={pagination.currentPage + 1}
|
||||
end={pagination.numOfPages}
|
||||
label="Pagination"
|
||||
pagePadding={screenWidth > 500 ? 2 : 0}
|
||||
start={1}
|
||||
onSelect={(currPage) => {
|
||||
handlePageChange(currPage - 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
// eslint-disable-next-line no-shadow
|
||||
export enum YOE_CATEGORY {
|
||||
ENTRY = 'entry',
|
||||
INTERN = 'intern',
|
||||
MID = 'mid',
|
||||
SENIOR = 'senior',
|
||||
}
|
||||
|
||||
export const YOE_CATEGORY_PARAM: Record<string, number> = {
|
||||
entry: 1,
|
||||
intern: 0,
|
||||
mid: 2,
|
||||
senior: 3,
|
||||
};
|
||||
|
||||
export const OfferTableYoeOptions = [
|
||||
{ label: 'All Full Time YOE', value: '' },
|
||||
{
|
||||
label: 'Fresh Grad (0-2 YOE)',
|
||||
value: YOE_CATEGORY.ENTRY,
|
||||
},
|
||||
{
|
||||
label: 'Mid (3-5 YOE)',
|
||||
value: YOE_CATEGORY.MID,
|
||||
},
|
||||
{
|
||||
label: 'Senior (6+ YOE)',
|
||||
value: YOE_CATEGORY.SENIOR,
|
||||
},
|
||||
{
|
||||
label: 'Internship',
|
||||
value: YOE_CATEGORY.INTERN,
|
||||
},
|
||||
];
|
||||
|
||||
export type OfferTableSortType =
|
||||
| 'companyName'
|
||||
| 'jobTitle'
|
||||
| 'monthYearReceived'
|
||||
| 'totalCompensation'
|
||||
| 'totalYoe';
|
||||
|
||||
export enum OFFER_TABLE_SORT_ORDER {
|
||||
ASC = '+',
|
||||
DESC = '-',
|
||||
UNSORTED = '',
|
||||
}
|
||||
|
||||
export function getOppositeSortOrder(
|
||||
order: OFFER_TABLE_SORT_ORDER,
|
||||
): OFFER_TABLE_SORT_ORDER {
|
||||
if (order === OFFER_TABLE_SORT_ORDER.UNSORTED) {
|
||||
return OFFER_TABLE_SORT_ORDER.UNSORTED;
|
||||
}
|
||||
return order === OFFER_TABLE_SORT_ORDER.ASC
|
||||
? OFFER_TABLE_SORT_ORDER.DESC
|
||||
: OFFER_TABLE_SORT_ORDER.ASC;
|
||||
}
|
||||
|
||||
export type OfferTableColumn = {
|
||||
label: string;
|
||||
sortType?: OfferTableSortType;
|
||||
};
|
||||
|
||||
export const FullTimeOfferTableColumns: Array<OfferTableColumn> = [
|
||||
{ label: 'Company', sortType: 'companyName' },
|
||||
{ label: 'Title', sortType: 'jobTitle' },
|
||||
{ label: 'YOE', sortType: 'totalYoe' },
|
||||
{ label: 'Annual TC', sortType: 'totalCompensation' },
|
||||
{ label: 'Annual Base / Bonus / Stocks' },
|
||||
{ label: 'Date Offered', sortType: 'monthYearReceived' },
|
||||
{ label: 'Actions' },
|
||||
];
|
||||
|
||||
export const InternOfferTableColumns: Array<OfferTableColumn> = [
|
||||
{ label: 'Company', sortType: 'companyName' },
|
||||
{ label: 'Title', sortType: 'jobTitle' },
|
||||
{ label: 'YOE', sortType: 'totalYoe' },
|
||||
{ label: 'Monthly Salary', sortType: 'totalCompensation' },
|
||||
{ label: 'Date Offered', sortType: 'monthYearReceived' },
|
||||
{ label: 'Actions' },
|
||||
];
|
||||
@ -0,0 +1,186 @@
|
||||
import crypto from 'crypto';
|
||||
import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { useState } from 'react';
|
||||
import { MapPinIcon } from '@heroicons/react/24/outline';
|
||||
import { Banner } from '@tih/ui';
|
||||
|
||||
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
|
||||
import OffersTable from '~/components/offers/admin_temp/OffersTable';
|
||||
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
|
||||
import Container from '~/components/shared/Container';
|
||||
import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
|
||||
import type { JobTitleType } from '~/components/shared/JobTitles';
|
||||
import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
|
||||
import JobTitlesTypeahead from '~/components/shared/JobTitlesTypeahead';
|
||||
|
||||
import { useSearchParamSingle } from '~/utils/offers/useSearchParam';
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
||||
return {
|
||||
props: {
|
||||
country: req.cookies.country ?? null,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default function OffersHomePage({
|
||||
country,
|
||||
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
|
||||
const router = useRouter();
|
||||
const [countryFilter, setCountryFilter] = useState('');
|
||||
const { event: gaEvent } = useGoogleAnalytics();
|
||||
const [selectedCompanyName, setSelectedCompanyName] =
|
||||
useSearchParamSingle('companyName');
|
||||
const [selectedCompanyId, setSelectedCompanyId] =
|
||||
useSearchParamSingle('companyId');
|
||||
|
||||
const [selectedJobTitleId, setSelectedJobTitleId] =
|
||||
useSearchParamSingle<JobTitleType | null>('jobTitleId');
|
||||
|
||||
const { data: session, status } = useSession();
|
||||
|
||||
const authoizedPeople = [
|
||||
'8b4550989cb7fe9ea7649b5538178b8d19aba0f3e5944dbff0b8d0e2ffe3911f',
|
||||
'0544d5d2be7815b5347dd2233c4d08a52120e52ac529f21b1a5c2005db3c42ab',
|
||||
'9934698c65bc72876018350a02910acdb27b7974dc757a320057588b67c5422b',
|
||||
'5cd57c9d1cc00d1010c3548ea3941941c04d18f7cf50766cdec30b12630e69ac',
|
||||
];
|
||||
|
||||
const isAuthorized = authoizedPeople.includes(
|
||||
crypto
|
||||
.createHash('sha256')
|
||||
.update(session?.user?.email ?? '')
|
||||
.digest('hex'),
|
||||
);
|
||||
|
||||
if (!isAuthorized && status !== 'loading') {
|
||||
router.push('/offers');
|
||||
}
|
||||
return (
|
||||
isAuthorized && (
|
||||
<>
|
||||
<Head>
|
||||
<title>Admin Home - Tech Offers Repo</title>
|
||||
</Head>
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<Banner size="sm">
|
||||
⭐ Check if your offer is competitive by submitting it{' '}
|
||||
<Link className="underline" href="/offers/submit">
|
||||
here
|
||||
</Link>
|
||||
. ⭐
|
||||
</Banner>
|
||||
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
|
||||
<span>
|
||||
<MapPinIcon className="flex h-7 w-7" />
|
||||
</span>
|
||||
<CountriesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Countries"
|
||||
onSelect={(option) => {
|
||||
if (option) {
|
||||
setCountryFilter(option.value);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_country_${option.value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by country',
|
||||
});
|
||||
} else {
|
||||
setCountryFilter('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-slate-100 py-16 px-4">
|
||||
<div>
|
||||
<div>
|
||||
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
|
||||
Tech Offers Repo (Admin)
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
|
||||
Find out how good your offer is. Discover how others got their
|
||||
offers.
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
|
||||
<span>Viewing offers for</span>
|
||||
<div className="flex items-center space-x-4">
|
||||
<JobTitlesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Job Titles"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedJobTitleId
|
||||
? {
|
||||
id: selectedJobTitleId,
|
||||
label: getLabelForJobTitleType(
|
||||
selectedJobTitleId as JobTitleType,
|
||||
),
|
||||
value: selectedJobTitleId,
|
||||
}
|
||||
: null
|
||||
}
|
||||
onSelect={(option) => {
|
||||
if (option) {
|
||||
setSelectedJobTitleId(option.id as JobTitleType);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_job_title_${option.value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by job title',
|
||||
});
|
||||
} else {
|
||||
setSelectedJobTitleId(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>in</span>
|
||||
<CompaniesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Companies"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedCompanyName
|
||||
? {
|
||||
id: selectedCompanyId,
|
||||
label: selectedCompanyName,
|
||||
value: selectedCompanyId,
|
||||
}
|
||||
: null
|
||||
}
|
||||
onSelect={(option) => {
|
||||
if (option) {
|
||||
setSelectedCompanyId(option.id);
|
||||
setSelectedCompanyName(option.label);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_company_${option.value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by company',
|
||||
});
|
||||
} else {
|
||||
setSelectedCompanyId('');
|
||||
setSelectedCompanyName('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Container className="pb-20 pt-10">
|
||||
<OffersTable
|
||||
companyFilter={selectedCompanyId}
|
||||
companyName={selectedCompanyName}
|
||||
country={country}
|
||||
countryFilter={countryFilter}
|
||||
jobTitleFilter={selectedJobTitleId ?? ''}
|
||||
/>
|
||||
</Container>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue