From c7e78a30b41b2c0ed446e5a8fcaf66e4e4376324 Mon Sep 17 00:00:00 2001
From: arnavk377 <arnavk1321@gmail.com>
Date: Sun, 11 May 2025 11:17:52 -0700
Subject: [PATCH 1/3] functionality and styling fixes for the pull request

Co-authored-by: Kainoa Nishida <KainoaNishida@users.noreply.github.com>
---
 .../components/clientlist/AddClientForm.tsx   |   4 +-
 .../src/components/clientlist/ClientList.tsx  | 324 ++++++++++--------
 .../clientlist/ClientListFilter.tsx           |   2 +-
 3 files changed, 181 insertions(+), 149 deletions(-)

diff --git a/client/src/components/clientlist/AddClientForm.tsx b/client/src/components/clientlist/AddClientForm.tsx
index f78d2386..0e873ddb 100644
--- a/client/src/components/clientlist/AddClientForm.tsx
+++ b/client/src/components/clientlist/AddClientForm.tsx
@@ -203,8 +203,8 @@ export const AddClientForm = ({ onClientAdded, setShowUnfinishedAlert}: AddClien
     return (
       <>
         <Button ref={btnRef} colorScheme='blue' onClick={onOpen}>
-          {!formInProgress && <Text>Add New Client</Text>}
-          {formInProgress && <Text>Edit New Client</Text>}
+          {!formInProgress && <Text>Add</Text>}
+          {formInProgress && <Text>Edit</Text>}
         </Button>
         <Drawer
           isOpen={isOpen}
diff --git a/client/src/components/clientlist/ClientList.tsx b/client/src/components/clientlist/ClientList.tsx
index 03d4e6d4..165b690a 100644
--- a/client/src/components/clientlist/ClientList.tsx
+++ b/client/src/components/clientlist/ClientList.tsx
@@ -12,6 +12,7 @@ import {
   Table,
   TableContainer,
   Tbody,
+  Flex,
   Td,
   Text,
   Th,
@@ -29,6 +30,8 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { FiUpload } from "react-icons/fi";
+import { MdOutlineManageSearch } from "react-icons/md";
+
 import { useNavigate } from "react-router-dom";
 
 import { useAuthContext } from "../../contexts/hooks/useAuthContext";
@@ -76,10 +79,13 @@ export const ClientList = ({ admin }: ClientListProps) => {
   const [filterQuery, setFilterQuery] = useState<string[]>([]);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
 
 
   const [showUnfinishedAlert, setShowUnfinishedAlert] = useState(false)
 
+  const [showSearch, setShowSearch] = useState(false);
+
   const columns = useMemo<ColumnDef<Client>[]>(
     () => [
       {
@@ -347,13 +353,12 @@ export const ClientList = ({ admin }: ClientListProps) => {
         clientsRequest = backend.get(`/clients?page=&filter=${encodeURIComponent(filterQuery.join(" "))}&search=`);
       } else {
         clientsRequest = backend.get("/clients");
-        const [lastUpdatedResponse, clientsResponse] = await Promise.all([lastUpdatedRequest, clientsRequest]);
-
-        const date = new Date(lastUpdatedResponse.data[0]?.lastUpdatedAt);
-        setLastUpdated(date.toLocaleString());
-        setClients(clientsResponse.data);
-
       }
+      const [lastUpdatedResponse, clientsResponse] = await Promise.all([lastUpdatedRequest, clientsRequest]);
+
+      const date = new Date(lastUpdatedResponse.data[0]?.lastUpdatedAt);
+      setLastUpdated(date.toLocaleString());
+      setClients(clientsResponse.data);
       } catch (error) {
         console.error("Error fetching data:", error);
       } finally {
@@ -365,159 +370,186 @@ export const ClientList = ({ admin }: ClientListProps) => {
     fetchData();
   }, [backend, searchKey, filterQuery]);
 
-
   return (
     <VStack
-      spacing={2}
+      spacing={6}
       align="start"
       sx={{ maxWidth: "100%", marginX: "auto", padding: "4%" }}
     >
-      {showUnfinishedAlert && <UnfinishedClientAlert/>}
-      <Heading paddingBottom="4%">Welcome, {currentUser?.displayName}</Heading>
-      <HStack width="100%">
-        <Heading size="md">My Complete Client Table</Heading>
-        <Heading
-          size="sm"
-          paddingLeft="10%"
-        >
-          Last Updated: {lastUpdated}
-        </Heading>
-      </HStack>
-      {admin && <UpdateClients />}
-      <VStack></VStack>
-      <HStack
-        width="100%"
-        justifyContent="space-between"
-      >
-        <Input
-          fontSize="12px"
-          width="20%"
-          height="30px"
-          placeholder="search"
-          onChange={(e) => setSearchKey(e.target.value)}
-        />
-        <ClientListFilter setFilterQuery={setFilterQuery} />
-        <HStack
-          width="55%"
-          justifyContent="space-between"
-        >
-          <Text fontSize="12px">
-            showing {clients.length} results on this page
+      <VStack width='100%'>
+        {showUnfinishedAlert && <UnfinishedClientAlert/>}
+        <Flex width="100%" flexDirection="column" justifyContent="flex-start">
+        <Heading fontWeight="none" fontSize="24px" color={"#3182CE"} mb="25px">Welcome, {currentUser?.displayName}</Heading>
+        <Heading fontSize="30px" mb="10px">Complete Client Table</Heading>
+        <Text
+            fontSize="14px"
+          >
+            Last Updated: {lastUpdated}
           </Text>
-          <HStack>
-            <Button></Button>
-            <Text fontSize="12px">
-              page {} of {Math.ceil(clients.length / 20)}
+          </Flex>
+        {admin && <UpdateClients />}
+        {/* im ded bruh what is this vstack */}
+        <VStack></VStack> 
+        <Flex
+          width="100%"
+          justifyContent="flex-end"
+        >
+          
+            {/* <Text fontSize="12px">
+              showing {clients.length} results on this page
             </Text>
-            <Button></Button>
-          </HStack>
-          <HStack>
-            <Button
-              fontSize="12px"
-              onClick={() => setDeleteModalOpen(true)}
-              isDisabled={selectedRowIds.length === 0}
-            >
-              delete
-            </Button>
-            {/* <Button fontSize="12px">add</Button> */}
-            <AddClientForm onClientAdded={fetchData} setShowUnfinishedAlert={setShowUnfinishedAlert} />
-            <IconButton
-              aria-label="Download CSV"
-              onClick={() => onPressCSVButton()}
-            >
-              <FiUpload />
-            </IconButton>
-          </HStack>
-        </HStack>
-      </HStack>
-      {/* If you want to have a fixed bottom height I'd prob have to change the css of this whole thing no? */}
+            <HStack>
+              <Button></Button>
+              <Text fontSize="12px">
+                page {} of {Math.ceil(clients.length / 20)}
+              </Text>
+              <Button></Button>
+            </HStack> */}
+            <HStack>
+              <Button
+                onClick={() => setDeleteModalOpen(true)}
+                isDisabled={selectedRowIds.length === 0}
+              >
+                Delete
+              </Button>
+              {/* <Button fontSize="12px">add</Button> */}
+              <AddClientForm onClientAdded={fetchData} setShowUnfinishedAlert={setShowUnfinishedAlert} />
+            </HStack>
+          
+        </Flex>
+        {/* If you want to have a fixed bottom height I'd prob have to change the css of this whole thing no? */}
+      </VStack>
       <Box
         width = {'100%'}
         justifyContent={"center"}
       >
       {loading ?
       <LoadingWheel/> :
-      <TableContainer
-        maxHeight="calc(100vh - 20px)"
-        sx={{
-          overflowX: "auto",
-          overflowY: "auto",
-          maxWidth: "100%",
-          border: "1px solid gray",
-        }}
-      >
-        <Table variant="striped">
-          <Thead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <Th
-                    key={header.id}
-                    cursor={header.column.getCanSort() ? "pointer" : "default"}
-                    onClick={header.column.getToggleSortingHandler()}
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getCanSort() && (
-                      <Box
-                        display="inline-block"
-                        ml={1}
-                      >
-                        {header.column.getIsSorted() === "asc" ? (
-                          <TriangleUpIcon />
-                        ) : header.column.getIsSorted() === "desc" ? (
-                          <TriangleDownIcon />
-                        ) : null}
-                      </Box>
-                    )}
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody>
-            {table.getRowModel().rows.map((row, index) => (
-              <Tr
-                key={row.id}
-                cursor="pointer"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <Td
-                    key={cell.id}
-                    fontSize="14px"
-                    fontWeight="500px"
-                    onClick={(e) => {
-                      if (cell.column.id === "rowNumber") {
-                        e.stopPropagation();
-                      }
-                    }}
-                  >
-                    {cell.column.id === "rowNumber" ? (
-                      <HoverCheckbox
-                        id={row.original.id}
-                        isSelected={selectedRowIds.includes(row.original.id)}
-                        onSelectionChange={handleRowSelect}
-                        index={index}
-                      />
-                    ) : (
-                      flexRender(cell.column.columnDef.cell, cell.getContext())
-                    )}
-                  </Td>
-                ))}
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      </TableContainer>
-      }
-      </Box>
-      <DeleteRowModal
-        isOpen={isDeleteModalOpen}
-        onClose={() => setDeleteModalOpen(false)}
-        onConfirm={handleDelete}
-      />
+      <Box border="1px solid" padding = "10px" borderColor="gray.300" borderRadius="md" overflow="hidden" width="100%" maxHeight="80%">
+        <HStack padding="5px">
+          <ClientListFilter setFilterQuery={setFilterQuery} />
+          <HStack width="100%" justifyContent={"right"}>
+            {/* <Input
+              fontSize="12px"
+              width="20%"
+              height="30px"
+              placeholder="search"
+              onChange={(e) => setSearchKey(e.target.value)}
+            /> */}
+            <Input maxWidth="20%" placeholder="search" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} display={showSearch ? 'block' : 'none'}></Input>
+            <Box
+              display="flex"
+              alignItems="center"
+              paddingX="16px"
+              paddingY="8px"
+              cursor="pointer"
+              onClick={() => {setShowSearch(!showSearch); setSearchKey("")}}
+            >
+              <Button background={"white"}>
+                <MdOutlineManageSearch size="24px" />
+              </Button>
+            </Box>
+            <Box
+              display="flex"
+              alignItems="center"
+              paddingX="16px"
+              paddingY="8px"
+              cursor="pointer"
+              onClick={() => onPressCSVButton()}
+            >
+              <Button background={"white"}>
+                <FiUpload size="16px" />
+                <Text ml="8px">Export</Text>
+              </Button>
+            </Box>
+          </HStack>
+        </HStack>
+        <TableContainer
+          maxHeight="calc(100vh - 20px)"
+          borderRadius="lg"
+          boxShadow="sm"
+          sx={{
+            overflowX: "auto",
+            overflowY: "auto",
+            maxWidth: "100%",
+            border: "1px solid gray",
+          }}
+        >
+          <Table variant="striped">
+            <Thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <Tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <Th
+                      key={header.id}
+                      cursor={header.column.getCanSort() ? "pointer" : "default"}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {header.column.getCanSort() && (
+                        <Box
+                          display="inline-block"
+                          ml={1}
+                        >
+                          {header.column.getIsSorted() === "asc" ? (
+                            <TriangleUpIcon />
+                          ) : header.column.getIsSorted() === "desc" ? (
+                            <TriangleDownIcon />
+                          ) : null}
+                        </Box>
+                      )}
+                    </Th>
+                  ))}
+                </Tr>
+              ))}
+            </Thead>
+            <Tbody>
+              {table.getRowModel().rows.map((row, index) => (
+                <Tr
+                  key={row.id}
+                  cursor="pointer"
+                  onClick={() => {navigate(`/ViewClient/${row.original.id}`)}}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Td
+                      key={cell.id}
+                      fontSize="14px"
+                      fontWeight="500px"
+                      onClick={(e) => {
+                        if (cell.column.id === "rowNumber") {
+                          e.stopPropagation();
+                        }
+                      }}
+                    >
+                      {cell.column.id === "rowNumber" ? (
+                        <HoverCheckbox
+                          id={row.original.id}
+                          isSelected={selectedRowIds.includes(row.original.id)}
+                          onSelectionChange={handleRowSelect}
+                          index={index}
+                        />
+                      ) : (
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                      )}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        </Box>
+        }
+        </Box>
+        <DeleteRowModal
+          isOpen={isDeleteModalOpen}
+          onClose={() => setDeleteModalOpen(false)}
+          onConfirm={handleDelete}
+        />
+      
     </VStack>
   );
 };
diff --git a/client/src/components/clientlist/ClientListFilter.tsx b/client/src/components/clientlist/ClientListFilter.tsx
index 9f8c93d8..f3729358 100644
--- a/client/src/components/clientlist/ClientListFilter.tsx
+++ b/client/src/components/clientlist/ClientListFilter.tsx
@@ -182,7 +182,7 @@ export const ClientListFilter = ({setFilterQuery}: ClientListFilterProps) => {
   return (
     <Popover placement="bottom-start">
       <PopoverTrigger>
-        <Button>
+        <Button background={"white"}>
           <HStack>
             <Icon as={MdOutlineFilterAlt} />
             <h1>Filter</h1>

From 99867b740f1ee678ab0728efd67983361fe70adc Mon Sep 17 00:00:00 2001
From: alexy-ok <alexanderyin5280@gmail.com>
Date: Tue, 13 May 2025 13:11:59 -0700
Subject: [PATCH 2/3] deleted comments, icon fix

---
 client/src/App.tsx                            |  7 ++--
 .../src/components/clientlist/ClientList.tsx  | 35 +++++--------------
 2 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2d827584..74bd09dc 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -139,11 +139,14 @@ const App = () => {
                   />
                 }
               />
-              <Route
+              {/* <Route
                 path="/clientlist"
                 element={<ProtectedRoute element={<ClientList/>} allowedRoles={['admin', 'user']} />}
+              /> */}
+               <Route
+                path="/clientlist"
+                element={<ClientList/>}
               />
-
               <Route
                 path="/clientdata"
                 element={<ProtectedRoute element={<ClientData />} allowedRoles={['admin', 'user']} />}
diff --git a/client/src/components/clientlist/ClientList.tsx b/client/src/components/clientlist/ClientList.tsx
index 165b690a..371f3c7e 100644
--- a/client/src/components/clientlist/ClientList.tsx
+++ b/client/src/components/clientlist/ClientList.tsx
@@ -29,7 +29,7 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-import { FiUpload } from "react-icons/fi";
+import { MdFileUpload } from "react-icons/md";
 import { MdOutlineManageSearch } from "react-icons/md";
 
 import { useNavigate } from "react-router-dom";
@@ -388,23 +388,12 @@ export const ClientList = ({ admin }: ClientListProps) => {
           </Text>
           </Flex>
         {admin && <UpdateClients />}
-        {/* im ded bruh what is this vstack */}
-        <VStack></VStack> 
+       
         <Flex
           width="100%"
           justifyContent="flex-end"
         >
-          
-            {/* <Text fontSize="12px">
-              showing {clients.length} results on this page
-            </Text>
-            <HStack>
-              <Button></Button>
-              <Text fontSize="12px">
-                page {} of {Math.ceil(clients.length / 20)}
-              </Text>
-              <Button></Button>
-            </HStack> */}
+        
             <HStack>
               <Button
                 onClick={() => setDeleteModalOpen(true)}
@@ -412,12 +401,11 @@ export const ClientList = ({ admin }: ClientListProps) => {
               >
                 Delete
               </Button>
-              {/* <Button fontSize="12px">add</Button> */}
+              
               <AddClientForm onClientAdded={fetchData} setShowUnfinishedAlert={setShowUnfinishedAlert} />
             </HStack>
           
         </Flex>
-        {/* If you want to have a fixed bottom height I'd prob have to change the css of this whole thing no? */}
       </VStack>
       <Box
         width = {'100%'}
@@ -428,19 +416,12 @@ export const ClientList = ({ admin }: ClientListProps) => {
       <Box border="1px solid" padding = "10px" borderColor="gray.300" borderRadius="md" overflow="hidden" width="100%" maxHeight="80%">
         <HStack padding="5px">
           <ClientListFilter setFilterQuery={setFilterQuery} />
-          <HStack width="100%" justifyContent={"right"}>
-            {/* <Input
-              fontSize="12px"
-              width="20%"
-              height="30px"
-              placeholder="search"
-              onChange={(e) => setSearchKey(e.target.value)}
-            /> */}
+          <HStack width="100%" justifyContent={"right"} gap={"0"}>
             <Input maxWidth="20%" placeholder="search" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} display={showSearch ? 'block' : 'none'}></Input>
             <Box
               display="flex"
               alignItems="center"
-              paddingX="16px"
+              paddingX="8px"
               paddingY="8px"
               cursor="pointer"
               onClick={() => {setShowSearch(!showSearch); setSearchKey("")}}
@@ -452,13 +433,13 @@ export const ClientList = ({ admin }: ClientListProps) => {
             <Box
               display="flex"
               alignItems="center"
-              paddingX="16px"
+              paddingX="8px"
               paddingY="8px"
               cursor="pointer"
               onClick={() => onPressCSVButton()}
             >
               <Button background={"white"}>
-                <FiUpload size="16px" />
+                <MdFileUpload  size="16px" />
                 <Text ml="8px">Export</Text>
               </Button>
             </Box>

From 5a0c951df6728be39bf00a376f5ab2c75a0bcc58 Mon Sep 17 00:00:00 2001
From: Alexander Yin <68826416+alexy-ok@users.noreply.github.com>
Date: Tue, 13 May 2025 22:14:21 +0200
Subject: [PATCH 3/3] keep protected route

---
 client/src/App.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 74bd09dc..542f5a4a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -139,14 +139,11 @@ const App = () => {
                   />
                 }
               />
-              {/* <Route
+              <Route
                 path="/clientlist"
                 element={<ProtectedRoute element={<ClientList/>} allowedRoles={['admin', 'user']} />}
-              /> */}
-               <Route
-                path="/clientlist"
-                element={<ClientList/>}
               />
+      
               <Route
                 path="/clientdata"
                 element={<ProtectedRoute element={<ClientData />} allowedRoles={['admin', 'user']} />}