From 68e7998508c3fb80cdd1fb6bb6e94ed9e16f8fb9 Mon Sep 17 00:00:00 2001 From: nicoleamber Date: Wed, 20 Sep 2023 14:45:42 +0800 Subject: [PATCH] [M1_TR-212] Convert indent to space --- web/src/app/job/hooks.ts | 10 +- web/src/app/job/page.tsx | 49 ++- web/src/app/layout.tsx | 22 +- web/src/app/wrapper.tsx | 68 +-- web/src/assets/icons/FilterCog.tsx | 26 +- web/src/assets/icons/FilterRemove.tsx | 26 +- web/src/assets/icons/Logo.tsx | 51 ++- web/src/components/atoms/StatusChip/index.tsx | 18 +- .../molecules/CreatedDateRangeFilter/hooks.ts | 28 +- .../CreatedDateRangeFilter/index.tsx | 74 ++-- .../molecules/EstimationStatusFilter/hooks.ts | 16 +- .../EstimationStatusFilter/index.tsx | 46 +-- web/src/components/molecules/NavBarItem.tsx | 108 ++--- .../components/molecules/Pagination/index.tsx | 34 +- .../components/molecules/SearchBar/hooks.ts | 16 +- .../components/molecules/SearchBar/index.tsx | 52 +-- .../components/molecules/TagFilter/hooks.ts | 16 +- .../components/molecules/TagFilter/index.tsx | 46 +-- web/src/components/organisms/Header.tsx | 56 +-- .../components/organisms/HeaderProfile.tsx | 244 ++++++----- .../organisms/JobListTable/hooks.ts | 20 +- .../organisms/JobListTable/index.tsx | 209 +++++----- web/src/components/organisms/Navbar.tsx | 114 +++--- .../organisms/SearchFilterHeader/hooks.ts | 16 +- .../organisms/SearchFilterHeader/index.tsx | 94 +++-- web/src/styles/Filter.module.css | 6 +- web/src/utils/constants/estimationStatus.ts | 10 +- web/src/utils/constants/jobTableData.ts | 386 +++++++++--------- web/src/utils/constants/navbarMenu.ts | 36 +- web/src/utils/constants/statusChipColor.ts | 12 +- web/src/utils/constants/tags.ts | 6 +- web/src/utils/types/job.ts | 34 +- 32 files changed, 963 insertions(+), 986 deletions(-) diff --git a/web/src/app/job/hooks.ts b/web/src/app/job/hooks.ts index fc03085..788f399 100644 --- a/web/src/app/job/hooks.ts +++ b/web/src/app/job/hooks.ts @@ -1,10 +1,10 @@ import { useState } from 'react'; export const useHooks = () => { - const [page, setPage] = useState(1); + const [page, setPage] = useState(1); - return { - page, - setPage - }; + return { + page, + setPage + }; }; diff --git a/web/src/app/job/page.tsx b/web/src/app/job/page.tsx index a5df78d..cad52a3 100644 --- a/web/src/app/job/page.tsx +++ b/web/src/app/job/page.tsx @@ -9,32 +9,31 @@ import { JobListContext } from './context'; import { useHooks } from './hooks'; const JobList = (): JSX.Element => { - const { page, setPage } = useHooks(); + const { page, setPage } = useHooks(); - return ( -
- - - - - - - - - - - - - -
- ); + return ( +
+ + + + + + + + + + + + + +
+ ); }; export default JobList; diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index de88301..f9e5ab0 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -5,20 +5,20 @@ import { theme } from '@/assets/theme'; import Wrapper from './wrapper'; export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app' + title: 'Create Next App', + description: 'Generated by create next app' }; export default function RootLayout({ - children + children }: { - children: React.ReactNode; + children: React.ReactNode; }) { - return ( - - - {children} - - - ); + return ( + + + {children} + + + ); } diff --git a/web/src/app/wrapper.tsx b/web/src/app/wrapper.tsx index 70a46e6..bcfd35f 100644 --- a/web/src/app/wrapper.tsx +++ b/web/src/app/wrapper.tsx @@ -8,46 +8,46 @@ import Header from '@/components/organisms/Header'; import NavBar from '@/components/organisms/Navbar'; const openSansFont = Open_Sans({ - subsets: ['latin'], - weight: ['300', '400', '500', '600', '700'] + subsets: ['latin'], + weight: ['300', '400', '500', '600', '700'] }); interface Props { - children: React.ReactNode; + children: React.ReactNode; } export const Wrapper: FC = ({ children }) => { - const [isExpanded, setIsExpanded] = useState(true); - let isOpen = true; - - const handleToggle = () => { - setIsExpanded(!isExpanded); - isOpen = !isOpen; - }; - - return ( - -
- - - - {children} - - - - ); + const [isExpanded, setIsExpanded] = useState(true); + let isOpen = true; + + const handleToggle = () => { + setIsExpanded(!isExpanded); + isOpen = !isOpen; + }; + + return ( + +
+ + + + {children} + + + + ); }; export default Wrapper; diff --git a/web/src/assets/icons/FilterCog.tsx b/web/src/assets/icons/FilterCog.tsx index 4d0ae75..2efa954 100644 --- a/web/src/assets/icons/FilterCog.tsx +++ b/web/src/assets/icons/FilterCog.tsx @@ -1,20 +1,20 @@ import { SvgIcon } from '@mui/material'; interface Props { - style?: string; + style?: string; } export const FilterCog = ({ style = '' }: Props) => { - return ( - - - - - - ); + return ( + + + + + + ); }; diff --git a/web/src/assets/icons/FilterRemove.tsx b/web/src/assets/icons/FilterRemove.tsx index 8b40a87..4fb39e5 100644 --- a/web/src/assets/icons/FilterRemove.tsx +++ b/web/src/assets/icons/FilterRemove.tsx @@ -1,20 +1,20 @@ import { SvgIcon } from '@mui/material'; interface Props { - style?: string; + style?: string; } export const FilterRemove = ({ style = '' }: Props) => { - return ( - - - - - - ); + return ( + + + + + + ); }; diff --git a/web/src/assets/icons/Logo.tsx b/web/src/assets/icons/Logo.tsx index 8724735..e6fecd7 100644 --- a/web/src/assets/icons/Logo.tsx +++ b/web/src/assets/icons/Logo.tsx @@ -1,29 +1,26 @@ export const Logo = () => ( - - - - - - - - - + + + + + + + + + ); diff --git a/web/src/components/atoms/StatusChip/index.tsx b/web/src/components/atoms/StatusChip/index.tsx index c031708..0c09ea0 100644 --- a/web/src/components/atoms/StatusChip/index.tsx +++ b/web/src/components/atoms/StatusChip/index.tsx @@ -3,15 +3,15 @@ import { Chip, ChipProps } from '@mui/material'; import { FC } from 'react'; const StatusChip: FC = ({ label }: ChipProps) => { - return ( - - ); + return ( + + ); }; export default StatusChip; diff --git a/web/src/components/molecules/CreatedDateRangeFilter/hooks.ts b/web/src/components/molecules/CreatedDateRangeFilter/hooks.ts index 3603b3e..fcab03c 100644 --- a/web/src/components/molecules/CreatedDateRangeFilter/hooks.ts +++ b/web/src/components/molecules/CreatedDateRangeFilter/hooks.ts @@ -2,21 +2,21 @@ import { Moment } from 'moment'; import { useState } from 'react'; export const useHooks = () => { - const [startDate, setStartDate] = useState(); - const [endDate, setEndDate] = useState(); + const [startDate, setStartDate] = useState(); + const [endDate, setEndDate] = useState(); - const handleStartDateChange = (date: Moment | null): void => { - setStartDate(date); - }; + const handleStartDateChange = (date: Moment | null): void => { + setStartDate(date); + }; - const handleEndDateChange = (date: Moment | null): void => { - setEndDate(date); - }; + const handleEndDateChange = (date: Moment | null): void => { + setEndDate(date); + }; - return { - startDate, - handleStartDateChange, - endDate, - handleEndDateChange - }; + return { + startDate, + handleStartDateChange, + endDate, + handleEndDateChange + }; }; diff --git a/web/src/components/molecules/CreatedDateRangeFilter/index.tsx b/web/src/components/molecules/CreatedDateRangeFilter/index.tsx index abfc4b8..83478f2 100644 --- a/web/src/components/molecules/CreatedDateRangeFilter/index.tsx +++ b/web/src/components/molecules/CreatedDateRangeFilter/index.tsx @@ -8,44 +8,44 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { useHooks } from './hooks'; const CreateDateRangeFilter = () => { - const { startDate, handleStartDateChange, endDate, handleEndDateChange } = - useHooks(); + const { startDate, handleStartDateChange, endDate, handleEndDateChange } = + useHooks(); - return ( - - - - {' - '} - - - - ); + return ( + + + + {' - '} + + + + ); }; export default CreateDateRangeFilter; diff --git a/web/src/components/molecules/EstimationStatusFilter/hooks.ts b/web/src/components/molecules/EstimationStatusFilter/hooks.ts index 9c1499c..ccf567b 100644 --- a/web/src/components/molecules/EstimationStatusFilter/hooks.ts +++ b/web/src/components/molecules/EstimationStatusFilter/hooks.ts @@ -2,14 +2,14 @@ import { SelectChangeEvent } from '@mui/material'; import { useState } from 'react'; export const useHooks = () => { - const [status, setStatus] = useState(''); + const [status, setStatus] = useState(''); - const handleChange = (e: SelectChangeEvent) => { - setStatus(e.target.value); - }; + const handleChange = (e: SelectChangeEvent) => { + setStatus(e.target.value); + }; - return { - status, - handleChange - }; + return { + status, + handleChange + }; }; diff --git a/web/src/components/molecules/EstimationStatusFilter/index.tsx b/web/src/components/molecules/EstimationStatusFilter/index.tsx index 99188dc..be6462f 100644 --- a/web/src/components/molecules/EstimationStatusFilter/index.tsx +++ b/web/src/components/molecules/EstimationStatusFilter/index.tsx @@ -4,30 +4,30 @@ import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; import { useHooks } from './hooks'; const EstimationStatusFilter = () => { - const { status, handleChange } = useHooks(); + const { status, handleChange } = useHooks(); - return ( - - - Estimation Status - - - - ); + return ( + + + Estimation Status + + + + ); }; export default EstimationStatusFilter; diff --git a/web/src/components/molecules/NavBarItem.tsx b/web/src/components/molecules/NavBarItem.tsx index 0904b1d..f8e620e 100644 --- a/web/src/components/molecules/NavBarItem.tsx +++ b/web/src/components/molecules/NavBarItem.tsx @@ -7,66 +7,66 @@ import { usePathname } from 'next/navigation'; import { FC } from 'react'; interface Props { - label: string; - Icon: SvgIconComponent; - active?: boolean; - width?: number | string; - height?: number | string; - paddingX?: number | string; - gap?: number; - linkTo?: string; + label: string; + Icon: SvgIconComponent; + active?: boolean; + width?: number | string; + height?: number | string; + paddingX?: number | string; + gap?: number; + linkTo?: string; } const NavBarItem: FC = ({ - label, - Icon, - active = false, - width = 200, - height = 40, - paddingX = 2, - gap = 1, - linkTo = '/' + label, + Icon, + active = false, + width = 200, + height = 40, + paddingX = 2, + gap = 1, + linkTo = '/' }) => { - const pathname = usePathname(); - active = pathname === linkTo ? true : false; + const pathname = usePathname(); + active = pathname === linkTo ? true : false; - const backgroundColor = active ? 'primary.100' : 'primary.700'; - const textColor = active ? 'dark' : 'white'; + const backgroundColor = active ? 'primary.100' : 'primary.700'; + const textColor = active ? 'dark' : 'white'; - return ( - - div > span': { - color: 'dark' - }, - '> div > svg': { - color: 'dark' - } - } - }}> - - - - {label} - - - - - ); + return ( + + div > span': { + color: 'dark' + }, + '> div > svg': { + color: 'dark' + } + } + }}> + + + + {label} + + + + + ); }; export default NavBarItem; diff --git a/web/src/components/molecules/Pagination/index.tsx b/web/src/components/molecules/Pagination/index.tsx index ec8c7c8..ba88df3 100644 --- a/web/src/components/molecules/Pagination/index.tsx +++ b/web/src/components/molecules/Pagination/index.tsx @@ -2,26 +2,26 @@ import { Pagination as MUIPagination } from '@mui/material'; import { FC } from 'react'; interface Props { - count: number; - page: number; - onChange: (page: number) => void; + count: number; + page: number; + onChange: (page: number) => void; } const Pagination: FC = ({ count, page, onChange }: Props) => { - return ( - , newPage: number) => - onChange(newPage) - } - color='primary' - shape='rounded' - showFirstButton - showLastButton - /> - ); + return ( + , newPage: number) => + onChange(newPage) + } + color='primary' + shape='rounded' + showFirstButton + showLastButton + /> + ); }; export default Pagination; diff --git a/web/src/components/molecules/SearchBar/hooks.ts b/web/src/components/molecules/SearchBar/hooks.ts index 5e786cd..381e500 100644 --- a/web/src/components/molecules/SearchBar/hooks.ts +++ b/web/src/components/molecules/SearchBar/hooks.ts @@ -1,14 +1,14 @@ import { ChangeEvent, useState } from 'react'; export const useHooks = () => { - const [searchKeyword, setSearchKeyword] = useState(''); + const [searchKeyword, setSearchKeyword] = useState(''); - const handleSearch = (e: ChangeEvent) => { - setSearchKeyword(e.target.value); - }; + const handleSearch = (e: ChangeEvent) => { + setSearchKeyword(e.target.value); + }; - return { - searchKeyword, - handleSearch - }; + return { + searchKeyword, + handleSearch + }; }; diff --git a/web/src/components/molecules/SearchBar/index.tsx b/web/src/components/molecules/SearchBar/index.tsx index 83af8f4..75a6e0c 100644 --- a/web/src/components/molecules/SearchBar/index.tsx +++ b/web/src/components/molecules/SearchBar/index.tsx @@ -1,37 +1,37 @@ import styles from '@/styles/Filter.module.css'; import SearchIcon from '@mui/icons-material/Search'; import { - FormControl, - InputAdornment, - InputLabel, - OutlinedInput + FormControl, + InputAdornment, + InputLabel, + OutlinedInput } from '@mui/material'; import { useHooks } from './hooks'; const SearchBar = () => { - const { searchKeyword, handleSearch } = useHooks(); + const { searchKeyword, handleSearch } = useHooks(); - return ( - - Search Job - - - - } - /> - - ); + return ( + + Search Job + + + + } + /> + + ); }; export default SearchBar; diff --git a/web/src/components/molecules/TagFilter/hooks.ts b/web/src/components/molecules/TagFilter/hooks.ts index 5ac566b..b9e3094 100644 --- a/web/src/components/molecules/TagFilter/hooks.ts +++ b/web/src/components/molecules/TagFilter/hooks.ts @@ -2,14 +2,14 @@ import { SelectChangeEvent } from '@mui/material'; import { useState } from 'react'; export const useHooks = () => { - const [tag, setTag] = useState(''); + const [tag, setTag] = useState(''); - const handleChange = (e: SelectChangeEvent) => { - setTag(e.target.value); - }; + const handleChange = (e: SelectChangeEvent) => { + setTag(e.target.value); + }; - return { - tag, - handleChange - }; + return { + tag, + handleChange + }; }; diff --git a/web/src/components/molecules/TagFilter/index.tsx b/web/src/components/molecules/TagFilter/index.tsx index d12fed7..08e1387 100644 --- a/web/src/components/molecules/TagFilter/index.tsx +++ b/web/src/components/molecules/TagFilter/index.tsx @@ -4,30 +4,30 @@ import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; import { useHooks } from './hooks'; const TagFilter = () => { - const { tag, handleChange } = useHooks(); + const { tag, handleChange } = useHooks(); - return ( - - - Tag - - - - ); + return ( + + + Tag + + + + ); }; export default TagFilter; diff --git a/web/src/components/organisms/Header.tsx b/web/src/components/organisms/Header.tsx index 8b19408..0bedbc0 100644 --- a/web/src/components/organisms/Header.tsx +++ b/web/src/components/organisms/Header.tsx @@ -5,37 +5,37 @@ import { Logo } from '../../assets/icons/Logo'; import HeaderProfile from './HeaderProfile'; interface Props { - height?: number | string; + height?: number | string; } const Header: FC = ({ height = 64 }) => { - return ( - - - - MeetsOne - - - - ); + return ( + + + + MeetsOne + + + + ); }; export default Header; diff --git a/web/src/components/organisms/HeaderProfile.tsx b/web/src/components/organisms/HeaderProfile.tsx index b1a4e33..3eac6dd 100644 --- a/web/src/components/organisms/HeaderProfile.tsx +++ b/web/src/components/organisms/HeaderProfile.tsx @@ -2,144 +2,140 @@ import { ArrowDropDown, Create, Logout } from '@mui/icons-material'; import { - Avatar, - Box, - Button, - Grow, - IconButton, - Paper, - Popper, - Stack, - Typography + Avatar, + Box, + Button, + Grow, + IconButton, + Paper, + Popper, + Stack, + Typography } from '@mui/material'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import React, { FC } from 'react'; interface Props { - name?: string; - email?: string; - avatar?: string; + name?: string; + email?: string; + avatar?: string; } const HeaderProfile: FC = ({ - name = 'John Doe', - email = 'johndoe@sun-asterisk.com' + name = 'John Doe', + email = 'johndoe@sun-asterisk.com' }) => { - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); + const [open, setOpen] = React.useState(false); + const anchorRef = React.useRef(null); - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; + const handleToggle = () => { + setOpen((prevOpen) => !prevOpen); + }; - const handleClose = (event: Event | React.SyntheticEvent) => { - if ( - anchorRef.current && - anchorRef.current.contains(event.target as HTMLElement) - ) { - return; - } + const handleClose = (event: Event | React.SyntheticEvent) => { + if ( + anchorRef.current && + anchorRef.current.contains(event.target as HTMLElement) + ) { + return; + } - setOpen(false); - }; + setOpen(false); + }; - return ( - - - - - - - + return ( + + + + + + + - - {({ TransitionProps }) => ( - - - - - - - - - - {name} - - - {email} - - - - - - - - - - )} - - - ); + + {({ TransitionProps }) => ( + + + + + + + + + {name} + {email} + + + + + + + + + )} + + + ); }; export default HeaderProfile; diff --git a/web/src/components/organisms/JobListTable/hooks.ts b/web/src/components/organisms/JobListTable/hooks.ts index 8f091e6..5b4f66f 100644 --- a/web/src/components/organisms/JobListTable/hooks.ts +++ b/web/src/components/organisms/JobListTable/hooks.ts @@ -3,20 +3,20 @@ import { JobTable } from '@/utils/types/job'; import { useContext } from 'react'; const useJobListContext = (): JobTable => { - const jobs = useContext(JobListContext); + const jobs = useContext(JobListContext); - if (jobs === undefined) { - throw new Error('Missing JobListContext'); - } + if (jobs === undefined) { + throw new Error('Missing JobListContext'); + } - return jobs; + return jobs; }; export const useHooks = () => { - const { columns, data } = useJobListContext(); + const { columns, data } = useJobListContext(); - return { - columns, - data - }; + return { + columns, + data + }; }; diff --git a/web/src/components/organisms/JobListTable/index.tsx b/web/src/components/organisms/JobListTable/index.tsx index fe2aeb7..a00160e 100644 --- a/web/src/components/organisms/JobListTable/index.tsx +++ b/web/src/components/organisms/JobListTable/index.tsx @@ -2,121 +2,112 @@ import StatusChip from '@/components/atoms/StatusChip'; import { JobTableRow, TableColumn } from '@/utils/types/job'; import { - Box, - Paper, - Stack, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Typography + Box, + Paper, + Stack, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography } from '@mui/material'; import { useHooks } from './hooks'; const JobListTable = (): JSX.Element => { - const { columns, data } = useHooks(); + const { columns, data } = useHooks(); - const renderTableCellContent = ( - column: TableColumn, - row: JobTableRow - ): JSX.Element => { - switch (column.key) { - case 'tags': - return ( - - {row.tags.map((tag, key) => ( - - ))} - - ); - case 'schedules': - return ( - - {row.schedules.map((schedule, key) => ( - - {schedule} - - ))} - - ); - case 'pipelinePhase': - return ; - case 'estimationStatus': - return ; - case 'cost': - return ( - - {`₱ ${row.estimation.cost.toFixed(2)}`} - - ); - default: - return ( - - {row[column.key] as string} - - ); - } - }; + const renderTableCellContent = ( + column: TableColumn, + row: JobTableRow + ): JSX.Element => { + switch (column.key) { + case 'tags': + return ( + + {row.tags.map((tag, key) => ( + + ))} + + ); + case 'schedules': + return ( + + {row.schedules.map((schedule, key) => ( + + {schedule} + + ))} + + ); + case 'pipelinePhase': + return ; + case 'estimationStatus': + return ; + case 'cost': + return ( + + {`₱ ${row.estimation.cost.toFixed(2)}`} + + ); + default: + return ( + {row[column.key] as string} + ); + } + }; - return ( - - - - - - - - {columns.map((column) => ( - - - {column.label} - - - ))} - - - - {data.map((row: JobTableRow) => ( - - {columns.map( - (column: TableColumn, index) => ( - - {renderTableCellContent( - column, - row - )} - - ) - )} - - ))} - -
- - - - - ); + return ( + + + + + + + + {columns.map((column) => ( + + + {column.label} + + + ))} + + + + {data.map((row: JobTableRow) => ( + + {columns.map((column: TableColumn, index) => ( + + {renderTableCellContent(column, row)} + + ))} + + ))} + +
+ + + + + ); }; export default JobListTable; diff --git a/web/src/components/organisms/Navbar.tsx b/web/src/components/organisms/Navbar.tsx index ee4be3e..0cd018c 100644 --- a/web/src/components/organisms/Navbar.tsx +++ b/web/src/components/organisms/Navbar.tsx @@ -8,70 +8,66 @@ import { Menus } from '@/utils/constants/navbarMenu'; import NavBarItem from '../molecules/NavBarItem'; interface Props { - expanded?: boolean; - width?: number | string; - height?: number | string; - paddingY?: number | string; - rowGap?: number | string; - handleToggle: () => void; + expanded?: boolean; + width?: number | string; + height?: number | string; + paddingY?: number | string; + rowGap?: number | string; + handleToggle: () => void; } const NavBar: FC = ({ - expanded = true, - width = 200, - paddingY = 2, - rowGap = 2, - handleToggle + expanded = true, + width = 200, + paddingY = 2, + rowGap = 2, + handleToggle }) => { - return ( - - - - - - + return ( + + + + + + - - {Menus.map((item, index) => ( - - - - ))} - - - ); + + {Menus.map((item, index) => ( + + + + ))} + + + ); }; export default NavBar; diff --git a/web/src/components/organisms/SearchFilterHeader/hooks.ts b/web/src/components/organisms/SearchFilterHeader/hooks.ts index 41c48fb..6e2ee90 100644 --- a/web/src/components/organisms/SearchFilterHeader/hooks.ts +++ b/web/src/components/organisms/SearchFilterHeader/hooks.ts @@ -1,14 +1,14 @@ import { useState } from 'react'; export const useHooks = () => { - const [isExpanded, setIsExpanded] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); - const toggleFilters = () => { - setIsExpanded(!isExpanded); - }; + const toggleFilters = () => { + setIsExpanded(!isExpanded); + }; - return { - isExpanded, - toggleFilters - }; + return { + isExpanded, + toggleFilters + }; }; diff --git a/web/src/components/organisms/SearchFilterHeader/index.tsx b/web/src/components/organisms/SearchFilterHeader/index.tsx index 0b4b406..1a7832e 100644 --- a/web/src/components/organisms/SearchFilterHeader/index.tsx +++ b/web/src/components/organisms/SearchFilterHeader/index.tsx @@ -12,55 +12,53 @@ import TagFilter from '../../molecules/TagFilter'; import { useHooks } from './hooks'; const SearchFilterHeader = (): JSX.Element => { - const { isExpanded, toggleFilters } = useHooks(); + const { isExpanded, toggleFilters } = useHooks(); - return ( - - - - - - - - - - - - - - - ); + return ( + + + + + + + + + + + + + + + ); }; export default SearchFilterHeader; diff --git a/web/src/styles/Filter.module.css b/web/src/styles/Filter.module.css index 4194212..106457a 100644 --- a/web/src/styles/Filter.module.css +++ b/web/src/styles/Filter.module.css @@ -6,18 +6,18 @@ } .button:hover { - background-color: #2A3F52; + background-color: #2a3f52; } .active { - background-color: #2A3F52; + background-color: #2a3f52; } .icon { height: 20px; width: 20px; transition: fill 0.3s; - fill: #3E5367; + fill: #3e5367; } .iconWhite { diff --git a/web/src/utils/constants/estimationStatus.ts b/web/src/utils/constants/estimationStatus.ts index cc2b981..6760043 100644 --- a/web/src/utils/constants/estimationStatus.ts +++ b/web/src/utils/constants/estimationStatus.ts @@ -1,7 +1,7 @@ export const EstimationStatus = [ - { id: 1, status: 'Not yet Created' }, - { id: 2, status: 'Making' }, - { id: 3, status: 'Approved' }, - { id: 4, status: 'Sent to Customer' }, - { id: 5, status: 'Closed' } + { id: 1, status: 'Not yet Created' }, + { id: 2, status: 'Making' }, + { id: 3, status: 'Approved' }, + { id: 4, status: 'Sent to Customer' }, + { id: 5, status: 'Closed' } ]; diff --git a/web/src/utils/constants/jobTableData.ts b/web/src/utils/constants/jobTableData.ts index fbfede8..b7d8208 100644 --- a/web/src/utils/constants/jobTableData.ts +++ b/web/src/utils/constants/jobTableData.ts @@ -1,200 +1,200 @@ import { JobTableRow, TableColumn } from '../types/job'; export const JobColumns: TableColumn[] = [ - { 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 } + { 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 const JobData: JobTableRow[] = [ - { - 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' - }) - } + { + 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/utils/constants/navbarMenu.ts b/web/src/utils/constants/navbarMenu.ts index 0a97a8d..df96a05 100644 --- a/web/src/utils/constants/navbarMenu.ts +++ b/web/src/utils/constants/navbarMenu.ts @@ -6,25 +6,25 @@ import { } from '@mui/icons-material'; export interface IMenu { - name: string; - Icon: SvgIconComponent; - href: string; + name: string; + Icon: SvgIconComponent; + href: string; } export const Menus: IMenu[] = [ - { - name: 'Job List', - Icon: Home, - href: '/' - }, - { - name: 'Calendar', - Icon: CalendarMonth, - href: '/calendar' - }, - { - name: 'Customer', - Icon: Person, - href: '/customer' - } + { + name: 'Job List', + Icon: Home, + href: '/' + }, + { + name: 'Calendar', + Icon: CalendarMonth, + href: '/calendar' + }, + { + name: 'Customer', + Icon: Person, + href: '/customer' + } ]; diff --git a/web/src/utils/constants/statusChipColor.ts b/web/src/utils/constants/statusChipColor.ts index 0f15dd6..5667736 100644 --- a/web/src/utils/constants/statusChipColor.ts +++ b/web/src/utils/constants/statusChipColor.ts @@ -1,11 +1,11 @@ export interface ChipProps { - label: string; + label: string; } export const ChipColors: Record = { - 'Not yet Created': '#FFB4AF', - Making: '#FDFF8F', - Approved: '#8AFFB2', - 'Sent to Customer': '#84C1FF', - Closed: '#65707b33' + 'Not yet Created': '#FFB4AF', + Making: '#FDFF8F', + Approved: '#8AFFB2', + 'Sent to Customer': '#84C1FF', + Closed: '#65707b33' }; diff --git a/web/src/utils/constants/tags.ts b/web/src/utils/constants/tags.ts index f021459..dc4805e 100644 --- a/web/src/utils/constants/tags.ts +++ b/web/src/utils/constants/tags.ts @@ -1,5 +1,5 @@ export const Tags = [ - { id: 1, value: 'TAG_A', name: 'Tag A' }, - { id: 2, value: 'TAG_B', name: 'Tag B' }, - { id: 3, value: 'TAG_C', name: 'Tag C' } + { id: 1, value: 'TAG_A', name: 'Tag A' }, + { id: 2, value: 'TAG_B', name: 'Tag B' }, + { id: 3, value: 'TAG_C', name: 'Tag C' } ]; diff --git a/web/src/utils/types/job.ts b/web/src/utils/types/job.ts index 243ae35..2099b69 100644 --- a/web/src/utils/types/job.ts +++ b/web/src/utils/types/job.ts @@ -1,28 +1,28 @@ export interface TableColumn { - key: string; - label: string; - width?: number; + key: string; + label: string; + width?: number; } export interface EstimationType { - status: string; - cost: number; + status: string; + cost: number; } export interface JobTableRow { - id: number; - title: string; - customer: string; - tags: Array; - schedules: Array; - estimation: EstimationType; - personInCharge: string; - pipelinePhase: string; - createdAt: string; - [key: string]: string | number | string[] | EstimationType; + id: number; + title: string; + customer: string; + tags: Array; + schedules: Array; + estimation: EstimationType; + personInCharge: string; + pipelinePhase: string; + createdAt: string; + [key: string]: string | number | string[] | EstimationType; } export interface JobTable { - columns: TableColumn[]; - data: JobTableRow[]; + columns: TableColumn[]; + data: JobTableRow[]; }