improve invoices dashboard, finish up

Co-Authored-By: Daiki Narimoto <111324722+dnarimot@users.noreply.github.com>
ctc-uci · Feb 25, 2025 · 559cb43 · 559cb43
1 parent 80f3422
commit 559cb43
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 21 deletions.
diff --git a/client/src/components/invoices/InvoiceComponents.jsx b/client/src/components/invoices/InvoiceComponents.jsx
@@ -7,12 +7,14 @@ import {
   Card,
   Flex,
   Image,
+  Icon,
   Input,
   PopoverTrigger,
   Popover,
   PopoverContent,
   Select,
   Table,
+  Tag,
   TableContainer,
   Tbody,
   Td,
@@ -23,6 +25,8 @@ import {
   } from '@chakra-ui/react'
 import filterIcon from  "../../assets/filter.svg";
 import { CalendarIcon } from '@chakra-ui/icons';
+import { TbCaretUpDown } from "react-icons/tb";
+import { FaUser, FaCircle } from "react-icons/fa";
 import personIcon from "../../assets/person.svg"
 import PDFButtonInvoice from "./PDFButtonInvoice"
 
@@ -216,33 +220,76 @@ const InvoicePayments = ({ comments }) => {
     );
 }
 
-function InvoicesTable({filteredInvoices, isPaidColor, isPaid}){
+function InvoicesTable({filteredInvoices, isPaidColor, seasonColor}){
 
   return (
     <TableContainer paddingTop="8px" border='1px solid var(--gray-200, #E2E8F0)' borderRadius='12px' >
       <Table variant='striped'>
         <Thead>
           <Tr>
-            <Th>Program</Th>
-            <Th>Status</Th>
-            <Th>Payee</Th>
-            <Th>Date Due</Th>
+            <Th>
+              <Flex align="center">
+                <Text>Status</Text>
+                <TbCaretUpDown style={{ marginLeft: '8px' }}/>
+              </Flex>
+            </Th>
+            <Th>Invoice Sent</Th>
+            <Th>
+              <Flex align="center">
+                <Text>Program</Text>
+                <TbCaretUpDown style={{ marginLeft: '8px' }}/>
+              </Flex>
+            </Th>
+            <Th>
+              <Flex align="center">
+                <FaUser style={{ marginRight: '8px' }} />
+                <Text>Payer(s)</Text>
+              </Flex>
+            </Th>
+            <Th>
+              <Flex align="center">
+                <CalendarIcon color="#767778" style={{ marginRight: '8px' }} />
+                <Text>Deadline</Text>
+                <TbCaretUpDown style={{ marginLeft: '8px' }}/>
+              </Flex>
+            </Th>
+            <Th>Season</Th>
             <Th>Download</Th>
           </Tr>
         </Thead>
         <Tbody>
         {filteredInvoices.map((invoice, index) => (
             <Tr key={index}>
-              <Td >{invoice.eventName}</Td>
-              <Td  style={{ backgroundColor: isPaidColor(invoice) }}> {isPaid(invoice)} </Td>
-              <Td >{invoice.name}</Td>
-              <Td fontWeight="700">
+              <Td style={{ 
+                color: isPaidColor(invoice), 
+                textDecoration: invoice.isPaid === 'PAST DUE' ? 'underline' : 'none',
+                fontWeight: invoice.isPaid === 'PAST DUE' ? 'bold' : 'normal',
+              }}> 
+                {invoice.isPaid} 
+              </Td>
+              <Td>
+                <Flex justifyContent="center" align="center" w="60%">
+                  {invoice.isSent ? (
+                    <Icon as={FaCircle} color="#0C824D" boxSize={4} />
+                  ) : (
+                    <Icon as={FaCircle} color="#EA4335" boxSize={4} />
+                  )}
+                </Flex>
+              </Td>
+              <Td>{invoice.eventName}</Td>
+              <Td>{invoice.name}</Td>
+              <Td>
                 {new Date(invoice.endDate).toLocaleDateString("en-US", {
                   month: "2-digit", day: "2-digit", year: "numeric"
                 })}
               </Td>
               <Td>
-                <Flex  ml="18px">
+                <Tag bg={seasonColor(invoice)} color="white">
+                  {invoice.season}
+                </Tag>
+              </Td>
+              <Td>
+                <Flex ml="18px">
                   <PDFButtonInvoice invoice={invoice} />
                 </Flex>
               </Td>
@@ -261,11 +308,11 @@ function InvoicesFilter({invoices, filter, setFilter}) {
       <Popover placement='bottom-start'>
         <PopoverTrigger>
           <Button
-            backgroundColor="transparent"
-            border="1px solid rgba(71, 72, 73, 0.20)"
+            backgroundColor="#F0F1F4"
             borderRadius="15px"
             h="48px"
             px="12px"
+            textColor="#767778"
             >
               <Image src={filterIcon} alt="Filter" boxSize="20px" mr="4px" /> Filters
           </Button>
@@ -346,4 +393,4 @@ function InvoicesFilter({invoices, filter, setFilter}) {
   )
 }
 
-export {InvoiceTitle, InvoiceStats, InvoicePayments, InvoicesTable, InvoicesFilter }
+export {InvoiceTitle, InvoiceStats, InvoicePayments, InvoicesTable, InvoicesFilter }
diff --git a/client/src/components/invoices/InvoicesDashboard.jsx b/client/src/components/invoices/InvoicesDashboard.jsx
@@ -25,14 +25,39 @@ const InvoicesDashboard = () => {
 
   const isPaidColor = (invoice) => {
     if (invoice.isSent && invoice.paymentStatus === "full") {
-        return "#6CE65C";
+        return "#474849";
     }
     if (!invoice.isSent && new Date() < new Date(invoice.endDate) && invoice.paymentStatus !== "full") {
         return "none";
     }
-    return "#FF4D4D";
+    return "#90080F";
   };
 
+  const seasonColor = (invoice) => {
+    if (invoice.season === "Winter") {
+      return "#3182CE";
+    } else if (invoice.season === "Summer") {
+      return "#805AD5";
+    } else if (invoice.season === "Fall") {
+      return "#DD6B20";
+    } else {
+      return "#db323b";
+    }
+  }
+
+  const getSeason = (invoice) => {
+    const month = new Date(invoice.endDate).getMonth();
+    if (month >= 1 && month <= 4) {
+      return "Winter";
+    } else if (month >= 5 && month <= 8) {
+      return "Summer";
+    } else if (month >= 9 && month <= 12) {
+      return "Fall";
+    } else {
+      return "N/A";
+    }
+  }
+
   const isPaid = (invoice) => {
     if (invoice.isSent && invoice.paymentStatus === "full") {
         return "PAID";
@@ -47,8 +72,15 @@ const InvoicesDashboard = () => {
   useEffect(() => {
     const fetchInvoicesData = async () => {
       try {
-        const invoicesResponse = await backend.get("/invoicesAssignments/");
-        setInvoices(invoicesResponse.data);
+        let invoicesResponse = await backend.get("/invoicesAssignments/");
+        const invoices = invoicesResponse.data.map(invoice => {
+          return {
+            ...invoice,
+            season: getSeason(invoice),
+            isPaid: isPaid(invoice)
+          };
+        });
+        setInvoices(invoices);
       }
       catch (err) {
         console.log(err);
@@ -128,9 +160,7 @@ const InvoicesDashboard = () => {
       <Flex>
         <Flex w='100%' m='120px 40px' flexDirection='column' padding="48px">
           <Flex justifyContent='space-between' mb='40px'>
-            {/* <Button backgroundColor='transparent' border="1px solid rgba(71, 72, 73, 0.20)" borderRadius='15px' h='48px'> */}
               <InvoicesFilter filter={filter} setFilter={setFilter} invoices={invoices} />
-            {/* </Button> */}
 
             <InputGroup w='400px' borderColor='transparent' >
             <InputRightElement pointerEvents='none' bgColor="rgba(71, 72, 73, 0.20)" borderRadius='0px 15px 15px 0px'>
@@ -146,11 +176,11 @@ const InvoicesDashboard = () => {
             </InputGroup>
           </Flex>
 
-          <InvoicesTable filteredInvoices={filteredInvoices} isPaidColor={isPaidColor} isPaid={isPaid}/>
+          <InvoicesTable filteredInvoices={filteredInvoices} isPaidColor={isPaidColor} seasonColor={seasonColor}/>
         </Flex>
       </Flex>
     </Navbar>
   );
 }
 
-export { InvoicesDashboard }
+export { InvoicesDashboard }