hicsail · Summer-luna · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/backup.env b/backup.env
@@ -4,7 +4,7 @@
 # value is set, `@daily` will be used. If you do not want the cron
 # to ever run, use `0 0 5 31 2 ?`.
 
-# sail auth service: back up on the 1st and 15th of the month
+# sail Auth service: back up on the 1st and 15th of the month
 BACKUP_CRON_EXPRESSION="20 8 1,15 * *"
 
 # The name of the backup file including the `.tar.gz` extension.
@@ -64,7 +64,7 @@ AWS_S3_BUCKET_NAME="sail-data-backups"
 # If you want to store the backup in a non-root location on your bucket
 # you can provide a path. The path must not contain a leading slash.
 
-# sail auth service:
+# sail Auth service:
 # The AWS_S3_PATH should differ for staging/production and should
 # therefore be set via stack.env.
 #
@@ -74,7 +74,7 @@ AWS_S3_BUCKET_NAME="sail-data-backups"
 # name. Although all of these keys are `AWS`-prefixed, the setup can be used
 # with any S3 compatible storage.
 
-# sail auth service:
+# sail Auth service:
 # The AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY should also be
 # set via stack.env.
 #

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -22,9 +22,12 @@
     "@mui/material": "^5.11.10",
     "@mui/x-data-grid": "^6.6.0",
     "@mui/x-date-pickers": "^6.8.0",
+    "@summerluna/harbor": "^0.0.5",
+    "axios": "^1.4.0",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
@@ -38,6 +41,7 @@
     "@graphql-codegen/typescript-operations": "^2.5.10",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@types/react": "^18.0.27",
+    "@types/react-csv": "^1.1.6",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "prettier": "^2.8.4",

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -7,12 +7,12 @@ import { GraphqlProvider } from '@graphql/graphql-provider';
 import { Project } from '@pages/Project/Project';
 import { Track } from '@pages/Track/Track';
 import { Paths } from '@constants/paths';
-import { Admin } from '@pages/Admin/Admin';
+import { AdminLayout } from '@pages/Admin/AdminLayout';
 import { ThemeProvider } from '@theme/theme.provider';
 import { SettingsProvider } from '@context/setting.context';
 import { EmployeeProvider } from '@context/employee.context';
 import { DateProvider } from '@context/date.context';
-import { TrackLayout } from '@pages/Track/components/Layout';
+import { TrackLayout } from '@pages/Track/components/TrackLayout';
 import { Report } from '@pages/Report/Report';
 import { Invoice } from '@pages/Invoice/Invoice';
 import enLocale from 'date-fns/locale/en-US';
@@ -21,6 +21,12 @@ 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';
+import { AuthProvider, Callback, PermissionRequired } from '@summerluna/harbor';
+import { AdminGuard } from '@pages/Auth/admin.guard';
+import { Logout } from '@pages/Auth/Logout';
+import { Login } from '@pages/Auth/Login';
+import { TrackGuard } from '@pages/Auth/track.guard';
+import { NavbarProvider } from '@context/navbar.context';
 
 function App() {
   if (enLocale && enLocale.options) {
@@ -29,43 +35,55 @@ function App() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={enLocale}>
-      <SettingsProvider>
-        <GraphqlProvider>
-          <ThemeProvider>
-            <Router>
-              <DateProvider>
-                <EmployeeProvider>
-                  <DateRangeProvider>
-                    <SnackBarProvider>
-                      <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} />
-                          </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="*" element={<NotFoundAdmin />} />
-                      </Routes>
-                    </SnackBarProvider>
-                  </DateRangeProvider>
-                </EmployeeProvider>
-              </DateProvider>
-            </Router>
-          </ThemeProvider>
-        </GraphqlProvider>
-      </SettingsProvider>
+      <Router>
+        <AuthProvider>
+          <SettingsProvider>
+            <GraphqlProvider>
+              <ThemeProvider>
+                <DateProvider>
+                  <EmployeeProvider>
+                    <DateRangeProvider>
+                      <SnackBarProvider>
+                        <NavbarProvider>
+                          <Routes>
+                            <Route element={<TrackGuard />}>
+                              <Route path={Paths.TRACK} element={<TrackLayout />}>
+                                <Route path={Paths.TRACK} element={<Track />} />
+                              </Route>
+                            </Route>
+                            <Route element={<AdminGuard />}>
+                              <Route path={Paths.ADMIN} element={<AdminLayout />}>
+                                <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>
+                            <Route path={Paths.LOGIN} element={<Login />} />
+                            <Route path={Paths.LOGOUT} element={<Logout />} />
+                            <Route path="*" element={<NotFoundAdmin />} />
+                            <Route path={Paths.AUTH_CALLBACK} element={<Callback />} />
+                            <Route path={Paths.PERMISSION_REQUIRED} element={<PermissionRequired />} />
+                          </Routes>
+                        </NavbarProvider>
+                      </SnackBarProvider>
+                    </DateRangeProvider>
+                  </EmployeeProvider>
+                </DateProvider>
+              </ThemeProvider>
+            </GraphqlProvider>
+          </SettingsProvider>
+        </AuthProvider>
+      </Router>
     </LocalizationProvider>
   );
 }

diff --git a/packages/client/src/components/CuctomPopover.tsx b/packages/client/src/components/CuctomPopover.tsx
@@ -0,0 +1,39 @@
+import { List, Popover, PopoverProps } from '@mui/material';
+import React from 'react';
+
+interface CustomPopoverProps extends PopoverProps {
+  children: React.ReactNode;
+}
+
+export const CustomPopover = ({ children, open, onClose, anchorEl }: CustomPopoverProps) => {
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <Popover
+      id={id}
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      slotProps={{
+        paper: {
+          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;'
+          }
+        }
+      }}
+      anchorOrigin={{
+        vertical: 'center',
+        horizontal: 'left'
+      }}
+      transformOrigin={{
+        vertical: 'center',
+        horizontal: 'right'
+      }}
+    >
+      <List sx={{ '& .MuiListItem-root': { cursor: 'pointer' } }}>{children}</List>
+    </Popover>
+  );
+};
diff --git a/packages/client/src/components/form/DropDownMenu.tsx b/packages/client/src/components/form/DropDownMenu.tsx
@@ -9,13 +9,15 @@ interface DropDownMenuProps<T> {
   name: string;
   id: string;
   value: string;
+  disabled?: boolean;
 }
 
-export const DropDownMenu: FC<DropDownMenuProps<any>> = ({ data, onChange, label, name, id, value }) => {
+export const DropDownMenu: FC<DropDownMenuProps<any>> = ({ data, onChange, label, name, id, value, disabled = false }) => {
   return (
     <FormControl sx={{ minWidth: '200px' }}>
       <InputLabel sx={{ '&.Mui-focused': { color: (theme: any) => (theme.palette.mode === 'light' ? theme.palette.grey[600] : theme.palette.common.white) } }}>{label}</InputLabel>
       <Select
+        disabled={disabled}
         name={name}
         label={label}
         id={id}

diff --git a/packages/client/src/components/icons/ArchiveIcon.tsx b/packages/client/src/components/icons/ArchiveIcon.tsx
@@ -0,0 +1,22 @@
+import { SvgIcon } from '@mui/material';
+import { FC } from 'react';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
+
+export const ArchiveIcon: FC<SVGIconProps> = ({ sx, fontSize }) => {
+  return (
+    <SvgIcon fontSize={fontSize} sx={sx}>
+      <svg viewBox="0 0 24 24">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.54497 8.73005C2 9.79961 2 11.1997 2 14C2 16.8003 2 18.2004 2.54497 19.27C3.02433 20.2108 3.78924 20.9757 4.73005 21.455C5.79961 22 7.19974 22 10 22H14C16.8003 22 18.2004 22 19.27 21.455C20.2108 20.9757 20.9757 20.2108 21.455 19.27C22 18.2004 22 16.8003 22 14C22 11.1997 22 9.79961 21.455 8.73005C20.9757 7.78924 20.2108 7.02433 19.27 6.54497C18.2004 6 16.8003 6 14 6H10C7.19974 6 5.79961 6 4.73005 6.54497C3.78924 7.02433 3.02433 7.78924 2.54497 8.73005ZM15.0595 12.4995C15.3353 12.1905 15.3085 11.7164 14.9995 11.4406C14.6905 11.1647 14.2164 11.1915 13.9406 11.5005L10.9286 14.8739L10.0595 13.9005C9.78359 13.5915 9.30947 13.5647 9.0005 13.8406C8.69152 14.1164 8.66468 14.5905 8.94055 14.8995L10.3691 16.4995C10.5114 16.6589 10.7149 16.75 10.9286 16.75C11.1422 16.75 11.3457 16.6589 11.488 16.4995L15.0595 12.4995Z"
+          fill="#1C274C"
+        />
+        <path
+          d="M20.5348 3.46447C19.0704 2 16.7133 2 11.9993 2C7.28525 2 4.92823 2 3.46377 3.46447C2.70628 4.22195 2.3406 5.21824 2.16406 6.65598C2.69473 6.06532 3.33236 5.57328 4.04836 5.20846C4.82984 4.81027 5.66664 4.6488 6.59316 4.5731C7.48829 4.49997 8.58971 4.49998 9.93646 4.5H14.0621C15.4089 4.49998 16.5103 4.49997 17.4054 4.5731C18.332 4.6488 19.1688 4.81027 19.9502 5.20846C20.6662 5.57328 21.3039 6.06532 21.8345 6.65598C21.658 5.21824 21.2923 4.22195 20.5348 3.46447Z"
+          fill="#1C274C"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
diff --git a/packages/client/src/components/icons/ClickupIcon.tsx b/packages/client/src/components/icons/ClickupIcon.tsx
@@ -1,11 +1,11 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 import { FC } from 'react';
 
-export interface ClickUpIconProps extends SvgIconProps<any> {
+export interface SVGIconProps extends SvgIconProps<any> {
   sx?: any;
 }
 
-export const ClickUpIcon: FC<ClickUpIconProps> = ({ sx, fontSize }) => {
+export const ClickUpIcon: FC<SVGIconProps> = ({ sx, fontSize }) => {
   return (
     <SvgIcon fontSize={fontSize} sx={sx}>
       <svg viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/packages/client/src/components/icons/ClickupMobile.tsx b/packages/client/src/components/icons/ClickupMobile.tsx
@@ -1,8 +1,8 @@
 import { SvgIcon } from '@mui/material';
 import { FC } from 'react';
-import { ClickUpIconProps } from '@components/icons/ClickupIcon';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
 
-export const ClickUpMobile: FC<ClickUpIconProps> = ({ sx, fontSize }) => {
+export const ClickUpMobile: FC<SVGIconProps> = ({ sx, fontSize }) => {
   return (
     <SvgIcon fontSize={fontSize} sx={sx}>
       <svg viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/packages/client/src/components/icons/EditIcon.tsx b/packages/client/src/components/icons/EditIcon.tsx
@@ -0,0 +1,16 @@
+import { SvgIcon } from '@mui/material';
+import { FC } from 'react';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
+
+export const EditIcon: FC<SVGIconProps> = ({ sx, fontSize }) => {
+  return (
+    <SvgIcon fontSize={fontSize} sx={sx}>
+      <svg viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="m11.4 18.161l7.396-7.396a10.289 10.289 0 0 1-3.326-2.234a10.29 10.29 0 0 1-2.235-3.327L5.839 12.6c-.577.577-.866.866-1.114 1.184a6.556 6.556 0 0 0-.749 1.211c-.173.364-.302.752-.56 1.526l-1.362 4.083a1.06 1.06 0 0 0 1.342 1.342l4.083-1.362c.775-.258 1.162-.387 1.526-.56c.43-.205.836-.456 1.211-.749c.318-.248.607-.537 1.184-1.114Zm9.448-9.448a3.932 3.932 0 0 0-5.561-5.561l-.887.887l.038.111a8.754 8.754 0 0 0 2.092 3.32a8.754 8.754 0 0 0 3.431 2.13l.887-.887Z"
+        ></path>
+      </svg>
+    </SvgIcon>
+  );
+};
diff --git a/packages/client/src/components/icons/InvoiceIcon.tsx b/packages/client/src/components/icons/InvoiceIcon.tsx
@@ -1,8 +1,8 @@
 import { SvgIcon } from '@mui/material';
 import { FC } from 'react';
-import { ClickUpIconProps } from '@components/icons/ClickupIcon';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
 
-export const InvoiceIcon: FC<ClickUpIconProps> = ({ sx, fontSize }) => {
+export const InvoiceIcon: FC<SVGIconProps> = ({ sx, fontSize }) => {
   return (
     <SvgIcon fontSize={fontSize} sx={sx}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">

diff --git a/packages/client/src/components/icons/SlackIcon.tsx b/packages/client/src/components/icons/SlackIcon.tsx
@@ -1,8 +1,8 @@
 import { SvgIcon } from '@mui/material';
-import { ClickUpIconProps } from '@components/icons/ClickupIcon';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
 import { FC } from 'react';
 
-export const SlackIcon: FC<ClickUpIconProps> = ({ fontSize, sx }) => {
+export const SlackIcon: FC<SVGIconProps> = ({ fontSize, sx }) => {
   return (
     <SvgIcon fontSize={fontSize} sx={sx}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">

diff --git a/packages/client/src/components/icons/ThreeDot.tsx b/packages/client/src/components/icons/ThreeDot.tsx
@@ -0,0 +1,20 @@
+import { SvgIcon } from '@mui/material';
+import { SVGIconProps } from '@components/icons/ClickupIcon';
+import { FC } from 'react';
+
+export const ThreeDotIcon: FC<SVGIconProps> = ({ fontSize, sx }) => {
+  return (
+    <SvgIcon fontSize={fontSize} sx={sx}>
+      <svg viewBox="0 0 24 24">
+        <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+        <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+        <g id="SVGRepo_iconCarrier">
+          {' '}
+          <path d="M7 12C7 13.1046 6.10457 14 5 14C3.89543 14 3 13.1046 3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12Z" fill="currentColor"></path>{' '}
+          <path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="currentColor"></path>{' '}
+          <path d="M21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12Z" fill="currentColor"></path>{' '}
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
diff --git a/packages/client/src/components/icons/clickup.svg b/packages/client/src/components/icons/clickup.svg
diff --git a/packages/client/src/components/icons/invoice.svg b/packages/client/src/components/icons/invoice.svg
diff --git a/packages/client/src/components/icons/mobile-clickup.svg b/packages/client/src/components/icons/mobile-clickup.svg