Job List Page

framgia · Sep 6, 2023 · ac3107a · ac3107a
1 parent 4c6b7d1
commit ac3107a
Show file tree

Hide file tree

Showing 14 changed files with 812 additions and 12 deletions.
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
@@ -1,11 +1,263 @@
-import { Box, Typography } from "@mui/material";
+'use client';
 
-export default function Home() {
-  return (
-    <main>
-      <Box>
-        <Typography variant="h1" width={1} textAlign={'center'}>Content goes here</Typography>
-      </Box>
-    </main>
-  )
+import Pagination from '@/components/atoms/Pagination';
+import JobListTable from '@/components/organisms/JobListTable';
+import SearchFilterHeader from '@/components/organisms/SearchFilterHeader';
+import { Grid } from '@mui/material';
+import { useState } from 'react';
+
+export interface Column {
+	key: string;
+	label: string;
+	width?: number;
+}
+
+interface Estimation {
+	status: string;
+	cost: number;
+}
+
+export interface JobData {
+	id: number;
+	title: string;
+	customer: string;
+	tags: Array<string>;
+	schedules: Array<string>;
+	estimation: Estimation;
+	personInCharge: string;
+	pipelinePhase: string;
+	createdAt: string;
+	[key: string]: string | number | string[] | Estimation;
 }
+
+const columns: Column[] = [
+	{ key: 'title', label: 'Job Title', width: 200 },
+	{ key: 'customer', label: 'Customer Name', width: 170 },
+	{ key: 'tags', label: 'Tags', width: 160 },
+	{ key: 'schedules', label: 'Work Schedule', width: 200 },
+	{ key: 'estimationStatus', label: 'Estimation Status', width: 180 },
+	{ key: 'personInCharge', label: 'Person in Charge', width: 170 },
+	{ key: 'pipelinePhase', label: 'Pipeline Phase', width: 150 },
+	{ key: 'cost', label: 'Cost', width: 120 },
+	{ key: 'createdAt', label: 'Created At', width: 120 }
+];
+
+export default function JobList() {
+	const [page, setPage] = useState(1);
+
+	const handlePageChange = (value: number) => {
+		setPage(value);
+	};
+	return (
+		<main>
+			<Grid
+				container
+				sx={{
+					padding: 3,
+					gap: 3,
+					flexDirection: 'column'
+				}}>
+				<Grid item>
+					<SearchFilterHeader />
+				</Grid>
+				<Grid item>
+					<JobListTable columns={columns} data={data} />
+				</Grid>
+				<Grid item sx={{ alignSelf: 'center' }}>
+					<Pagination
+						count={12}
+						page={page}
+						onChange={handlePageChange}
+					/>
+				</Grid>
+			</Grid>
+		</main>
+	);
+}
+
+const data: JobData[] = [
+	{
+		id: 1,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A', 'Tag B'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Approved',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 2,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A', 'Tag B', 'Tag C', 'Tag D', 'Tag E'],
+		schedules: ['5-25-2023 5:00 - 15:00', '5-26-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Making',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 3,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Sent to Customer',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 4,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A', 'Tag B'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Closed',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 5,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A', 'Tag B'],
+		schedules: [
+			'5-25-2023 5:00 - 15:00',
+			'5-26-2023 5:00 - 15:00',
+			'5-26-2023 5:00 - 15:00'
+		],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 6,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 7,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 8,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 9,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	},
+	{
+		id: 10,
+		title: 'New Summit',
+		customer: 'John Doe',
+		tags: ['Tag A'],
+		schedules: ['5-25-2023 5:00 - 15:00'],
+		estimation: {
+			status: 'Not yet Created',
+			cost: 650.0
+		},
+		personInCharge: 'Michael Murry',
+		pipelinePhase: 'Delivery',
+		createdAt: new Date('5-2-2023').toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: '2-digit',
+			day: '2-digit'
+		})
+	}
+];
diff --git a/web/src/assets/icons/FilterCog.tsx b/web/src/assets/icons/FilterCog.tsx
@@ -0,0 +1,20 @@
+import { SvgIcon } from '@mui/material';
+
+interface Props {
+	style?: string;
+}
+
+export const FilterCog = ({ style = '' }: Props) => {
+	return (
+		<SvgIcon className={style}>
+			<svg
+				width='20'
+				height='20'
+				viewBox='0 0 20 20'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'>
+				<path d='M18.975 16.1L18.0834 15.4167C18.1 15.275 18.1167 15.1417 18.1167 15C18.1167 14.8583 18.1084 14.725 18.0834 14.5833L18.9667 13.9C19.0417 13.8333 19.0667 13.725 19.0167 13.6333L18.1834 12.1917C18.1334 12.0833 18.025 12.0833 17.9167 12.0833L16.8917 12.5C16.6667 12.35 16.4417 12.2083 16.1834 12.1083L16.025 11.0083C16.0167 10.9083 15.925 10.8333 15.8334 10.8333H14.1667C14.0584 10.8333 13.9667 10.9083 13.95 11.0083L13.7917 12.1083C13.5417 12.2167 13.3 12.35 13.0834 12.5L12.05 12.0833C11.9584 12.0833 11.85 12.0833 11.7917 12.1917L10.9584 13.6333C10.9084 13.725 10.925 13.8333 11.0084 13.9L11.8917 14.5833C11.875 14.725 11.8667 14.8583 11.8667 15C11.8667 15.1417 11.875 15.275 11.8917 15.4167L11.0084 16.1C10.9334 16.1667 10.9084 16.275 10.9584 16.3667L11.7917 17.8083C11.8417 17.9167 11.95 17.9167 12.05 17.9167L13.0834 17.5C13.3 17.65 13.5334 17.7917 13.7917 17.8917L13.95 18.9917C13.9667 19.0917 14.05 19.1667 14.1667 19.1667H15.8334C15.925 19.1667 16.0167 19.0917 16.0334 18.9917L16.1917 17.8917C16.4417 17.7833 16.6667 17.65 16.8917 17.5L17.9167 17.9167C18.025 17.9167 18.1334 17.9167 18.1917 17.8083L19.025 16.3667C19.075 16.275 19.05 16.1667 18.975 16.1ZM15 16.25C14.3 16.25 13.75 15.6917 13.75 15C13.75 14.3083 14.3084 13.75 15 13.75C15.6917 13.75 16.25 14.3083 16.25 15C16.25 15.6917 15.6917 16.25 15 16.25ZM2.50002 2.5C2.31669 2.5 2.14169 2.56667 1.98336 2.68333C1.62502 2.96667 1.55836 3.49167 1.84169 3.85L6.64169 10H6.66669V14.8917C6.63336 15.1333 6.71669 15.3917 6.90836 15.5833L8.58336 17.2583C8.87502 17.55 9.32502 17.5667 9.65002 17.3333C9.33336 16.5917 9.16669 15.8 9.16669 15C9.16669 13.9417 9.45836 12.9167 10 12V10H10.025L14.825 3.85C15.1084 3.49167 15.0417 2.96667 14.6834 2.68333C14.525 2.56667 14.35 2.5 14.1667 2.5H2.50002Z' />
+			</svg>
+		</SvgIcon>
+	);
+};
diff --git a/web/src/assets/icons/FilterRemove.tsx b/web/src/assets/icons/FilterRemove.tsx
@@ -0,0 +1,20 @@
+import { SvgIcon } from '@mui/material';
+
+interface Props {
+	style?: string;
+}
+
+export const FilterRemove = ({ style = '' }: Props) => {
+	return (
+		<SvgIcon className={style}>
+			<svg
+				width='20'
+				height='20'
+				viewBox='0 0 20 20'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'>
+				<path d='M12.3 17.3583L14.6667 15L12.3 12.6417L13.475 11.4667L15.8334 13.8083L18.1917 11.4667L19.3667 12.6417L17.025 15L19.3667 17.3583L18.1917 18.5333L15.8334 16.1667L13.475 18.5333L12.3 17.3583ZM10 10V16.5667C10.0334 16.8167 9.95002 17.0833 9.75836 17.2583C9.43336 17.5833 8.90836 17.5833 8.58336 17.2583L6.90836 15.5833C6.71669 15.3917 6.63336 15.1333 6.66669 14.8917V10H6.64169L1.84169 3.85C1.55836 3.49167 1.62502 2.96667 1.98336 2.68333C2.14169 2.56667 2.31669 2.5 2.50002 2.5H14.1667C14.35 2.5 14.525 2.56667 14.6834 2.68333C15.0417 2.96667 15.1084 3.49167 14.825 3.85L10.025 10H10Z' />
+			</svg>
+		</SvgIcon>
+	);
+};
diff --git a/web/src/components/atoms/Pagination.tsx b/web/src/components/atoms/Pagination.tsx
@@ -0,0 +1,33 @@
+import { Pagination as MUIPagination } from '@mui/material';
+import { FC } from 'react';
+
+interface Props {
+	count: number;
+	page: number;
+	// eslint-disable-next-line no-unused-vars
+	onChange: (page: number) => void;
+}
+
+const Pagination: FC<Props> = ({ count = 12, page = 1, onChange }: Props) => {
+	const handlePageChange = (
+		event: React.ChangeEvent<unknown>,
+		newPage: number
+	) => {
+		onChange(newPage);
+	};
+
+	return (
+		<MUIPagination
+			size='medium'
+			count={count}
+			page={page}
+			onChange={handlePageChange}
+			color='primary'
+			shape='rounded'
+			showFirstButton
+			showLastButton
+		/>
+	);
+};
+
+export default Pagination;
diff --git a/web/src/components/atoms/StatusChip.tsx b/web/src/components/atoms/StatusChip.tsx
@@ -0,0 +1,30 @@
+import { Chip } from '@mui/material';
+import { FC } from 'react';
+
+interface Props {
+	label: string;
+}
+
+const colors: Record<string, string> = {
+	'Not yet Created': '#FFB4AF',
+	Making: '#FDFF8F',
+	Approved: '#8AFFB2',
+	'Sent to Customer': '#84C1FF',
+	Closed: '#65707b33'
+};
+
+const StatusChip: FC<Props> = ({ label }) => {
+	const color = colors[label] || '#65707b33';
+
+	return (
+		<Chip
+			label={label}
+			sx={{
+				backgroundColor: color,
+				typography: 'label1r'
+			}}
+		/>
+	);
+};
+
+export default StatusChip;