Merge pull request #720 from Black-Dot-2024/staging

release(main)

Author: DHurtado714

src/App.css

@@ -20,6 +20,16 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.login-bg {
+  background-image: url('assets/images/bg-mobile.png');
+}
+
+@media (min-width: 600px) {
+  .login-bg {
+    background-image: url('assets/images/login-image.png');
+  }
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

src/App.tsx

@@ -14,6 +14,7 @@ import { configDayjs } from './lib/dayjs/dayjs';
 import Auth from './pages/Auth';
 import Clients from './pages/Clients';
 import Employees from './pages/Employees';
+import Expenses from './pages/Expenses';
 import Home from './pages/Home';
 import Projects from './pages/Projects';
 import Tasks from './pages/Tasks';
@@ -39,7 +40,7 @@ function App() {
           setState(s => {
             return { ...s, open: false };
           }),
-        2000
+        3000
       );
     }
   }, [state]);
@@ -51,7 +52,7 @@ function App() {
           <OfflineModal />
           <Router>
             <Routes>
-              {<Route path={RoutesPath.ROOT} element={<Auth />} />}
+              <Route path={RoutesPath.ROOT} element={<Auth />} />
               <Route element={<Layout children={<Outlet />} />}>
                 <Route
                   path={RoutesPath.HOME}
@@ -93,11 +94,24 @@ function App() {
                     </ProtectedRoute>
                   }
                 />
+                <Route
+                  path={`${RoutesPath.EXPENSES}/*`}
+                  element={
+                    <ProtectedRoute>
+                      <Expenses />
+                    </ProtectedRoute>
+                  }
+                />
               </Route>
               <Route path='*' element={<NotFoundPage />} />
             </Routes>
           </Router>
-          <Snackbar open={state.open} color={state.type ?? 'neutral'} variant='solid'>
+          <Snackbar
+            open={state.open}
+            color={state.type ?? 'neutral'}
+            variant='solid'
+            sx={{ marginLeft: '10px' }}
+          >
             {state.message}
           </Snackbar>
         </SnackbarContext.Provider>

src/assets/images/bg-mobile.png

@@ -14,6 +14,7 @@ const AddButton: React.FC<AddButtonProps> = ({ onClick }: AddButtonProps) => {
       size='sm'
       sx={{
         backgroundColor: colors.darkGold,
+
         '&:hover': {
           backgroundColor: colors.darkerGold,
         },

src/components/common/AddButton.tsx

@@ -49,7 +49,7 @@ export default function ArchiveModal({
       <Modal
         open={open}
         onClose={() => setOpen(false)}
-        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '0 20px' }}
       >
         <Sheet
           variant='outlined'
@@ -73,13 +73,7 @@ export default function ArchiveModal({
           <Typography id='modal-desc' textColor='text.tertiary' sx={{ py: 1 }}>
             {description}
           </Typography>
-          <Alert
-            size='lg'
-            sx={{ mt: 2, pr: 8, border: '#333333' }}
-            startDecorator={<InfoIcon />}
-            variant='soft'
-            color='primary'
-          >
+          <Alert size='lg' startDecorator={<InfoIcon />} variant='soft' color='primary'>
             Don't worry, this action can be undone.
           </Alert>
           <Box mt={3} display='flex' alignItems='center' justifyContent='end' gap={2} sx={{}}>

src/components/common/ArchiveModal.tsx

@@ -20,6 +20,7 @@ export default function CardContainer({ children }: CardContainerProps) {
       sx={{
         bgcolor: '#EFEFEF',
         maxWidth: '100%',
+        padding: '16px',
         transition: 'background-color 0.3s',
         '&:hover': {
           bgcolor: '#DEDEDE',

src/components/common/CardContainer.tsx

@@ -18,6 +18,17 @@ interface ClientCardProps {
   totalProjects: number;
 }
 
+const styles = {
+  fontSize: '13px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  minWidth: '70%',
+  '@media (min-width: 400px)': {
+    minWidth: 'fit-content',
+  },
+};
+
 const ClientCard = ({
   name,
   accountingHours,
@@ -33,33 +44,27 @@ const ClientCard = ({
           {name}
         </span>
       </header>
-      <div className='grid grid-cols-2 gap-2'>
+      <div className='flex flex-wrap gap-2'>
         <Chip
           sx={{
             bgcolor: colors.orangeChip,
-            fontSize: '13px',
+            ...styles,
           }}
         >
           Accounting Hours: {accountingHours}
         </Chip>
         <Chip
           sx={{
             bgcolor: colors.orangeChip,
-            fontSize: '13px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            ...styles,
           }}
         >
           Legal Hours: {legalHours}
         </Chip>
         <Chip
           sx={{
             bgcolor: colors.brownChip,
-            fontSize: '13px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            ...styles,
           }}
         >
           Chargeable Hours: {chargeableHours}
@@ -69,10 +74,7 @@ const ClientCard = ({
             bgcolor: colors.blueChip,
             color: '#0B6BCB',
             border: '1px solid #97C3F0',
-            fontSize: '13px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            ...styles,
           }}
         >
           Total Projects: {totalProjects}

src/components/common/ClientCard.tsx

@@ -12,14 +12,14 @@ import animation from '../../assets/data-not-found.json';
  */
 const ComponentPlaceholder = ({
   text = 'Content is on the way...',
-  height = '25vh',
-  width = '35vh',
+  height = '20vh',
+  width = '25vh',
 }) => {
   return (
     <div
       style={{
         width: '100%',
-        height: '100%',
+        height: 'fit-content',
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',

src/components/common/ComponentPlaceholder.tsx

@@ -0,0 +1,110 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import Alert from '@mui/joy/Alert';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Modal from '@mui/joy/Modal';
+import ModalClose from '@mui/joy/ModalClose';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Colors from '../../colors';
+
+interface ModalInterface {
+  open: boolean;
+  url: string | undefined | null;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  toggleModal?: () => void;
+  handleOnClick: () => void;
+  alertColor?: string;
+}
+
+export default function CreateConfirmationModal({
+  open,
+  setOpen,
+  url,
+  handleOnClick,
+}: ModalInterface) {
+  const handleOnConfirm = () => {
+    setOpen(false);
+    handleOnClick();
+  };
+
+  return (
+    <>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '0 20px' }}
+      >
+        <Sheet
+          variant='outlined'
+          sx={{
+            borderRadius: 'md',
+            p: 4,
+            boxShadow: 'lg',
+          }}
+        >
+          <ModalClose variant='plain' sx={{ m: 1 }} />
+          <Typography
+            component='h2'
+            id='modal-title'
+            level='h3'
+            textColor='inherit'
+            fontWeight='lg'
+            mb={1}
+          >
+            Confirm before submitting
+          </Typography>
+          <Typography id='modal-desc' textColor='text.tertiary' sx={{ py: 1 }}>
+            Verify that the URL is correct{' '}
+            <Link
+              to={url as string}
+              target={'_blank'}
+              className='underline whitespace-break-spaces break-all'
+            >
+              {url}
+            </Link>
+          </Typography>
+          <Alert
+            size='lg'
+            startDecorator={<WarningIcon />}
+            variant='soft'
+            color={'danger'}
+            sx={{ marginTop: '10px' }}
+          >
+            This action cannot be undone.
+          </Alert>
+          <Box mt={3} display='flex' alignItems='center' justifyContent='end' gap={2} sx={{}}>
+            <Button
+              onClick={() => setOpen(false)}
+              variant='outlined'
+              size='lg'
+              sx={{
+                color: Colors.darkGold,
+                borderColor: Colors.darkGold,
+                '&:hover': {
+                  backgroundColor: Colors.lightGold,
+                },
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              size='lg'
+              sx={{
+                backgroundColor: Colors.darkGold,
+                '&:hover': {
+                  backgroundColor: Colors.darkerGold,
+                },
+              }}
+              onClick={() => handleOnConfirm()}
+            >
+              Submit
+            </Button>
+          </Box>
+        </Sheet>
+      </Modal>
+    </>
+  );
+}