Refactor3

packages/client/src/App.tsx

@@ -5,7 +5,7 @@ import { Employee } from '@pages/Employee/Employee';
 
 import { GraphqlProvider } from '@graphql/graphql-provider';
 import { Project } from '@pages/Project/Project';
-import { Track } from '@pages/Track/track';
+import { Track } from '@pages/Track/Track';
 import { Paths } from '@constants/paths';
 import { Admin } from '@pages/Admin/Admin';
 import { ThemeProvider } from '@theme/theme.provider';
@@ -20,6 +20,7 @@ import { InvoiceDetails } from '@pages/Invoice/InvoiceDetails';
 import { DateRangeProvider } from '@context/reportFilter.context';
 import { Export } from '@pages/Invoice/Export';
 import { NotFoundAdmin } from '@pages/Not_Find/NotFindAdmin';
+import { SnackBarProvider } from '@context/snackbar.context';
 
 function App() {
   if (enLocale && enLocale.options) {
@@ -35,27 +36,29 @@ function App() {
               <DateProvider>
                 <EmployeeProvider>
                   <DateRangeProvider>
-                    <Routes>
-                      <Route path={Paths.TRACK} element={<TrackLayout />}>
-                        <Route path={Paths.TRACK} element={<Track />} />
-                      </Route>
-                      <Route path={Paths.ADMIN} element={<Admin />}>
-                        <Route path={Paths.PROJECT_lIST} element={<Project />}>
-                          <Route path={Paths.EDIT_PROJECT} />
-                          <Route path={Paths.ADD_PROJECT} />
+                    <SnackBarProvider>
+                      <Routes>
+                        <Route path={Paths.TRACK} element={<TrackLayout />}>
+                          <Route path={Paths.TRACK} element={<Track />} />
                         </Route>
-                        <Route path={Paths.EMPLOYEE_lIST} element={<Employee />}>
-                          <Route path={Paths.EDIT_EMPLOYEE} />
-                          <Route path={Paths.ADD_EMPLOYEE} />
+                        <Route path={Paths.ADMIN} element={<Admin />}>
+                          <Route path={Paths.PROJECT_lIST} element={<Project />}>
+                            <Route path={Paths.EDIT_PROJECT} />
+                            <Route path={Paths.ADD_PROJECT} />
+                          </Route>
+                          <Route path={Paths.EMPLOYEE_lIST} element={<Employee />}>
+                            <Route path={Paths.EDIT_EMPLOYEE} />
+                            <Route path={Paths.ADD_EMPLOYEE} />
+                          </Route>
+                          <Route path={Paths.REPORT} element={<Report />} />
+                          <Route path={Paths.INVOICE} element={<Invoice />} />
+                          <Route path={Paths.INVOICE_DETAIL} element={<InvoiceDetails />} />
+                          <Route path={Paths.EXPORT_INVOICE} element={<Export />} />
+                          <Route path={`${Paths.ADMIN}/*`} element={<NotFoundAdmin page="admin" />} />
                         </Route>
-                        <Route path={Paths.REPORT} element={<Report />} />
-                        <Route path={Paths.INVOICE} element={<Invoice />} />
-                        <Route path={Paths.INVOICE_DETAIL} element={<InvoiceDetails />} />
-                        <Route path={Paths.EXPORT_INVOICE} element={<Export />} />
-                        <Route path={`${Paths.ADMIN}/*`} element={<NotFoundAdmin page="admin" />} />
-                      </Route>
-                      <Route path="*" element={<NotFoundAdmin />} />
-                    </Routes>
+                        <Route path="*" element={<NotFoundAdmin />} />
+                      </Routes>
+                    </SnackBarProvider>
                   </DateRangeProvider>
                 </EmployeeProvider>
               </DateProvider>

packages/client/src/components/CustomTableContainer.tsx

@@ -0,0 +1,27 @@
+import { StyledPaper } from '@components/StyledPaper';
+import { PaperProps, TableContainer } from '@mui/material';
+import { FC } from 'react';
+
+interface CustomTableContainerProps extends PaperProps {
+  children: React.ReactNode;
+  sx?: any;
+}
+
+export const CustomTableContainer: FC<CustomTableContainerProps> = ({ children, sx, ...otherProps }) => {
+  return (
+    <TableContainer
+      component={StyledPaper}
+      elevation={0}
+      sx={{
+        boxShadow: (theme) =>
+          theme.palette.mode === 'light'
+            ? 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px'
+            : 'rgba(0, 0, 0, 0.2) 0px 0px 2px 0px, rgba(0, 0, 0, 0.12) 0px 12px 24px -4px;',
+        ...sx
+      }}
+      {...otherProps}
+    >
+      {children}
+    </TableContainer>
+  );
+};

packages/client/src/components/StyledComponent.tsx

@@ -1,12 +1,20 @@
-import { Box, Button, styled, TextField } from '@mui/material';
+import { alpha, Box, Button, styled, TextField } from '@mui/material';
 import DialogContent from '@mui/material/DialogContent';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import TableRow from '@mui/material/TableRow';
 
 export const DefaultTextInput = styled(TextField)(({ theme, variant }) => ({
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey['100'] : theme.palette.grey['700'],
-  color: theme.palette.mode === 'light' ? theme.palette.grey['800'] : 'white',
+  ...(theme.palette.mode === 'dark' && {
+    backgroundColor: variant === 'outlined' ? theme.palette.grey['800'] : theme.palette.grey['700'],
+    color: theme.palette.grey['800'],
+    '& fieldset': { border: variant === 'outlined' ? `1px solid ${theme.palette.grey[700]}` : 'none' }
+  }),
+  ...(theme.palette.mode === 'light' && {
+    backgroundColor: variant === 'outlined' ? theme.palette.common.white : theme.palette.grey['100'],
+    color: variant === 'outlined' ? theme.palette.grey['800'] : theme.palette.grey['800'],
+    '& fieldset': { border: variant === 'outlined' ? `1px solid ${theme.palette.grey[300]}` : 'none' }
+  }),
   borderRadius: '8px',
-  '& fieldset': { border: variant === 'outlined' ? `1px solid ${theme.palette.grey[300]}` : 'none' },
   '& input[type=number]': {
     MozAppearance: 'textfield'
   },
@@ -60,8 +68,7 @@ export const StyledTableBox = styled(Box)(({ theme }) => ({
 }));
 
 export const CustomStyledFormDialog = styled(DialogContent)(({ theme }) => ({
-  maxWidth: '600px',
-  width: '600px',
+  minWidth: '600px',
   padding: '4rem',
   backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey['800']
 }));
@@ -85,28 +92,52 @@ export const DefaultOutlinedButton = styled(Button)(({ theme }) => ({
   })
 }));
 
-export const StyledTextarea = styled(TextareaAutosize)(
-  ({ theme }) => `
-    width: 100%;
-    height: 200px;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-    padding: 12px;
-    border-radius: 10px;
-    color: ${theme.palette.mode === 'dark' ? theme.palette.grey['300'] : theme.palette.grey['900']};
-    background: ${theme.palette.mode === 'dark' ? theme.palette.grey['900'] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? theme.palette.grey['700'] : theme.palette.grey['100']};
-    resize: none;
-    font-family: 'Rubik', sans-serif;
-
-    &:hover {
-      border-color: black;
-    }
-
-    &:focus {
-      border-color: black;
-      outline: 1.5px solid black;
-    }
-  `
-);
+export const StyledTextarea = styled(TextareaAutosize)(({ theme }) => ({
+  width: '100%',
+  height: '200px',
+  fontWeight: 'medium',
+  lineHeight: 1.5,
+  padding: '12px',
+  borderRadius: '10px',
+  color: theme.palette.mode === 'light' ? theme.palette.grey['900'] : theme.palette.common.white,
+  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey['100'] : theme.palette.grey['800'],
+  border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey['400'] : theme.palette.grey['700']}`,
+  resize: 'none',
+  fontFamily: 'Rubik, sans-serif',
+  '&:hover': {
+    borderColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white
+  },
+  '&:focus': {
+    outline: `2px solid ${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`
+  }
+}));
+
+export const StyledTableHeadRow = styled(TableRow)(({ theme }) => ({
+  '& .MuiTableCell-root': {
+    color: theme.palette.mode === 'light' ? theme.palette.grey[600] : theme.palette.grey[500],
+    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : alpha(theme.palette.grey[500], 0.12),
+    fontWeight: 'medium',
+    border: 'none'
+  }
+}));
+
+export const StyledTableDataRow = styled(TableRow)(({ theme }) => ({
+  '& .MuiTableCell-root': {
+    borderBottom: '1px dashed',
+    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[200] : 'rgb(46, 50, 54)'
+  },
+  '&:hover': { backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : alpha(theme.palette.grey[500], 0.08) }
+}));
+
+interface StyledNestedTableDataRowProps {
+  open: boolean;
+}
+
+export const StyledNestedTableDataRow = styled(TableRow, { shouldForwardProp: (prop) => prop !== 'open' })<StyledNestedTableDataRowProps>(({ open, theme }) => ({
+  ...(theme.palette.mode === 'light' && {
+    backgroundColor: open ? theme.palette.grey[200] : 'inherit'
+  }),
+  ...(theme.palette.mode === 'dark' && {
+    backgroundColor: open ? alpha(theme.palette.grey[500], 0.12) : 'inherit'
+  })
+}));

packages/client/src/components/StyledDatePicker.tsx

@@ -0,0 +1,22 @@
+import { CustomDatePickerLayout } from '@components/CustomDatePickerLayout';
+import { DatePicker } from '@mui/x-date-pickers';
+import { DatePickerProps } from '@mui/lab';
+import { FC } from 'react';
+
+interface StyledDatePickerProps extends DatePickerProps<any> {}
+export const StyledDatePicker: FC<StyledDatePickerProps> = (props) => {
+  return (
+    <DatePicker
+      sx={{
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'grey.300',
+            color: 'grey.500'
+          }
+        }
+      }}
+      slots={{ layout: CustomDatePickerLayout }}
+      {...props}
+    />
+  );
+};

packages/client/src/components/StyledPaper.tsx

@@ -7,11 +7,12 @@ const NewPaper = styled(Paper)(({ theme }) => ({
   mb: 2,
   padding: '1rem',
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  borderRadius: '8px'
 }));
 
 interface StyledPaperProps extends PaperProps {
-  children: ReactNode[] | ReactNode;
+  children: ReactNode;
 }
 export const StyledPaper: FC<StyledPaperProps> = ({ children, ...otherOptions }) => {
   return <NewPaper {...otherOptions}>{children}</NewPaper>;

packages/client/src/components/form/FormDialog.tsx

@@ -10,7 +10,7 @@ interface FormDialogProps {
 
 export const FormDialog: FC<FormDialogProps> = ({ open, children, onClose }) => {
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog open={open} onClose={onClose} maxWidth="md">
       <CustomStyledFormDialog>{children}</CustomStyledFormDialog>
     </Dialog>
   );

packages/client/src/components/form/ObserverTextInput.tsx

@@ -20,6 +20,9 @@ export const ObserverTextInput: FC<TextInputProps> = (props) => {
         disabled={props.disabled || isSubmitting}
         error={!!errors[props.name]}
         helperText={(touched[props.name] && errors[props.name]) as string}
+        sx={{
+          '.MuiFormHelperText-root ': { width: '120px', marginRight: 0 }
+        }}
       />
     </FormControl>
   );

packages/client/src/components/table/BasicTable.tsx

@@ -1,12 +1,13 @@
-import { StyledPaper } from '@components/StyledPaper';
-import { Table, TableBody, TableHead, TableRow, TableContainer, TablePagination } from '@mui/material';
+import { Table, TableBody, TableHead, TablePagination } from '@mui/material';
 import { FC, Fragment, ReactNode, useState } from 'react';
 import TableCell from '@mui/material/TableCell';
+import { StyledTableDataRow, StyledTableHeadRow } from '@components/StyledComponent';
+import { CustomTableContainer } from '@components/CustomTableContainer';
 
 export interface BasicTableProps {
   rows: any[];
   columns: any[];
-  toolbar?: JSX.Element;
+  toolbar?: ReactNode;
   keyFun: (row: any) => string;
   initialState?: any;
   sx?: any;
@@ -36,11 +37,7 @@ export const BasicTable: FC<BasicTableProps> = ({ rows, columns, toolbar, keyFun
     if (column.header) return <Fragment key={column.field}>{column.header()}</Fragment>;
 
     return (
-      <TableCell
-        key={column.field}
-        align={column.headerAlign ? column.headerAlign : 'left'}
-        sx={{ width: column.width ? column.width : '150px', color: 'grey.600', fontWeight: 'medium', bgcolor: 'grey.200', border: 'none' }}
-      >
+      <TableCell key={column.field} align={column.headerAlign ? column.headerAlign : 'left'} sx={{ width: column.width ? column.width : '150px' }}>
         {column.header ? column.header() : column.headerName.toUpperCase()}
       </TableCell>
     );
@@ -53,25 +50,15 @@ export const BasicTable: FC<BasicTableProps> = ({ rows, columns, toolbar, keyFun
       </TableCell>
     ));
 
-    return (
-      <TableRow
-        key={keyFun(row)}
-        sx={{
-          '& .MuiTableCell-root': { fontWeight: 'regular', fontSize: '1rem', borderBottom: '1px dashed', borderColor: 'grey.200' },
-          '&:hover': { backgroundColor: 'grey.100' }
-        }}
-      >
-        {renderCells}
-      </TableRow>
-    );
+    return <StyledTableDataRow key={keyFun(row)}>{renderCells}</StyledTableDataRow>;
   });
 
   return (
-    <TableContainer component={StyledPaper} elevation={0}>
+    <CustomTableContainer>
       {toolbar}
       <Table sx={{ minWidth: 650 }}>
         <TableHead>
-          <TableRow>{renderedHeaders}</TableRow>
+          <StyledTableHeadRow>{renderedHeaders}</StyledTableHeadRow>
         </TableHead>
         <TableBody>{renderRows}</TableBody>
       </Table>
@@ -86,6 +73,6 @@ export const BasicTable: FC<BasicTableProps> = ({ rows, columns, toolbar, keyFun
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       )}
-    </TableContainer>
+    </CustomTableContainer>
   );
 };

packages/client/src/components/table/SortedBasicTable.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import TableCell from '@mui/material/TableCell';
 import { TableSortLabel } from '@mui/material';
 import { BasicTable, BasicTableProps } from '@components/table/BasicTable';
-import { useSort } from '../../utils/useSort';
+import { useSort } from '../../hooks/useSort';
 
 interface SortedBasicTableProps extends BasicTableProps {
   defaultOrderBy: string;
@@ -21,7 +21,7 @@ export const SortedBasicTable: FC<SortedBasicTableProps> = (props) => {
       ...column,
       header: () => {
         return (
-          <TableCell align="left" sx={{ width: column.width ? column.width : '150px', color: 'grey.600', fontWeight: 'medium', bgcolor: 'grey.200', border: 'none' }}>
+          <TableCell align="left" sx={{ width: column.width ? column.width : '150px' }}>
             <TableSortLabel active={orderBy === column.field} direction={orderBy === column.field ? order : 'asc'} onClick={() => setSortColumn(column.field)}>
               {column.headerName}
             </TableSortLabel>

packages/client/src/context/snackbar.context.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, FC, ReactNode, useContext, useState } from 'react';
+import { AlertColor, Snackbar } from '@mui/material';
+import { Alert } from '@mui/lab';
+
+const SnackbarContext = createContext<SnackBarContextProps>({} as SnackBarContextProps);
+
+interface SnackBarProviderProps {
+  children: ReactNode;
+}
+
+interface SnackBarContextProps {
+  toggleSnackBar: (message: string, { variant }: { variant: AlertColor }) => void;
+  handleSnackBarOpen: () => void;
+}
+
+export const SnackBarProvider: FC<SnackBarProviderProps> = ({ children }) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>('');
+  const [variant, setVariant] = useState<AlertColor>('success');
+
+  const handleSnackBarClose = () => setOpen(false);
+  const handleSnackBarOpen = () => setOpen(true);
+
+  const toggleSnackBar = (message: string, { variant }: { variant: AlertColor }) => {
+    handleSnackBarOpen();
+    setMessage(message);
+    setVariant(variant);
+  };
+
+  return (
+    <SnackbarContext.Provider value={{ handleSnackBarOpen, toggleSnackBar }}>
+      {children}
+      <Snackbar open={open} autoHideDuration={2000} onClose={handleSnackBarClose} anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
+        <Alert
+          onClose={handleSnackBarClose}
+          severity={variant}
+          sx={{ fontWeight: 'medium', backgroundColor: variant === 'success' ? 'green.dark' : '', color: variant === 'success' ? 'white' : '' }}
+        >
+          {message}
+        </Alert>
+      </Snackbar>
+    </SnackbarContext.Provider>
+  );
+};
+
+export const useSnackBar = () => useContext(SnackbarContext);