Fixed table styling, page styling, and toast

ctc-uci · Feb 7, 2025 · 28bcd96 · 28bcd96
1 parent 1ec275f
commit 28bcd96
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/client/src/assets/alertIcon.svg b/client/src/assets/alertIcon.svg
diff --git a/client/src/components/invoices/InvoiceComponents.jsx b/client/src/components/invoices/InvoiceComponents.jsx
@@ -1,36 +1,36 @@
-import {TableContainer, Table, Tr, Td, Thead, Th, Tbody, Image, Button, Flex, Heading, PopoverTrigger, Popover, PopoverContent, Input, Text, Select} from '@chakra-ui/react'
+import {TableContainer, Table, Tr, Td, Thead, Th, Tbody, Image, Button, Flex, PopoverTrigger, Popover, PopoverContent, Input, Text, Select} from '@chakra-ui/react'
 import filterIcon from  "../../assets/filter.svg";
-import { useEffect, useState } from 'react';
 import { CalendarIcon } from '@chakra-ui/icons';
 import personIcon from "../../assets/person.svg"
 import PDFButtonInvoice from "./PDFButtonInvoice"
 
 function InvoicesTable({filteredInvoices, isPaidColor, isPaid}){
+
   return (
     <TableContainer paddingTop="8px" border='1px solid var(--gray-200, #E2E8F0)' borderRadius='12px' >
-      <Table variant='simple'>
+      <Table variant='striped'>
         <Thead>
           <Tr>
-            <Th textAlign='center'>Program</Th>
-            <Th textAlign='center'>Status</Th>
-            <Th textAlign='center'>Payee</Th>
-            <Th textAlign='center'>Date Due</Th>
-            <Th textAlign='center'>Download</Th>
+            <Th>Program</Th>
+            <Th>Status</Th>
+            <Th>Payee</Th>
+            <Th>Date Due</Th>
+            <Th>Download</Th>
           </Tr>
         </Thead>
         <Tbody>
         {filteredInvoices.map((invoice, index) => (
             <Tr key={index}>
-              <Td textAlign='center'>{invoice.eventName}</Td>
-              <Td textAlign='center' bg={isPaidColor(invoice)}>{isPaid(invoice)}</Td>
-              <Td textAlign='center'>{invoice.name}</Td>
-              <Td textAlign="center">
+              <Td >{invoice.eventName}</Td>
+              <Td  style={{ backgroundColor: isPaidColor(invoice) }}> {isPaid(invoice)} </Td>
+              <Td >{invoice.name}</Td>
+              <Td fontWeight="700">
                 {new Date(invoice.endDate).toLocaleDateString("en-US", {
                   month: "2-digit", day: "2-digit", year: "numeric"
                 })}
               </Td>
               <Td>
-                <Flex justifyContent="center">
+                <Flex  ml="18px">
                   <PDFButtonInvoice invoice={invoice} />
                 </Flex>
               </Td>
@@ -55,7 +55,7 @@ function InvoicesFilter({invoices, filter, setFilter}) {
             h="48px"
             px="12px" 
             >
-              <Image src={filterIcon} alt="Filter" boxSize="20px" mr="4px" /> Filter 
+              <Image src={filterIcon} alt="Filter" boxSize="20px" mr="4px" /> Filters 
           </Button>
         </PopoverTrigger>
          <PopoverContent h='auto' w='sm' borderRadius='15px' box-shadow='0px 4px 4px 0px rgba(0, 0, 0, 0.25)' border='1px solid #D2D2D2' padding='16px' display='inline-flex' flexDirection='column' gap='16px'>

diff --git a/client/src/components/invoices/InvoicesDashboard.jsx b/client/src/components/invoices/InvoicesDashboard.jsx
@@ -1,10 +1,11 @@
-import { Text, Box, Stack, Table, HStack, Tr, Thead, Th, TableContainer, Tbody, Td, Flex, Button, Input, IconButton, Image, InputGroup, InputRightElement, Heading, useToast } from "@chakra-ui/react";
-import { DownloadIcon, SearchIcon } from "@chakra-ui/icons";
+import { Text, Flex, Input, Image, InputGroup, InputRightElement, Heading, useToast } from "@chakra-ui/react";
+import { SearchIcon } from "@chakra-ui/icons";
 import { useBackendContext } from "../../contexts/hooks/useBackendContext";
 import Navbar from "../Navbar";
 import { useEffect, useState, useRef } from "react";
 import { useNavigate } from 'react-router-dom' 
 import { InvoicesTable, InvoicesFilter } from "./InvoiceComponents";
+import AlertIcon from "../../assets/alertIcon.svg"
 
 
 function InvoicesDashboard(){
@@ -27,19 +28,19 @@ function InvoicesDashboard(){
         return "#6CE65C";
     } 
     if (!invoice.isSent && new Date() < new Date(invoice.endDate) && invoice.paymentStatus !== "full") {
-        return "transparent";
+        return "none";
     } 
     return "#FF4D4D"; 
   };
 
   const isPaid = (invoice) => {
     if (invoice.isSent && invoice.paymentStatus === "full") {
-        return "Paid";
+        return "PAID";
     } 
     if (!invoice.isSent && new Date() < new Date(invoice.endDate) && invoice.paymentStatus !== "full") {
-        return "Not Paid";
+        return "NOT PAID";
     } 
-    return "Past Due"; 
+    return "PAST DUE"; 
   };
 
 
@@ -60,7 +61,7 @@ function InvoicesDashboard(){
     if (invoices.length === 0 || hasShownToast.current) return; 
 
     const getUnpaidInvoices = () => {
-      const filteredPastDueInvoices = filteredInvoices.filter(invoice => isPaid(invoice) === "Past Due");
+      const filteredPastDueInvoices = filteredInvoices.filter(invoice => isPaid(invoice) === "PAST DUE");
       const notifCounter = filteredPastDueInvoices.length;
 
       if (notifCounter > 0) {
@@ -75,14 +76,20 @@ function InvoicesDashboard(){
           position: "bottom-right",
           isClosable: true,
           render: () => (
-            <Box p={3} bg="#FED7D7" borderTop="4px solid" borderTopColor="red.500" onClick={() => navigate("/notification")}>
-              <Heading size="sm">Unpaid Invoices</Heading>
-              {notifCounter > 1 
-                ? `You have ${notifCounter} past due invoices` 
-                : `${filteredPastDueInvoices[0].name} - 
+            <Flex p={3} bg="#FED7D7" borderTop="4px solid" borderTopColor="red.500" onClick={() => navigate("/notification")} padding="12px 16px" gap='12px' w='400px'>
+              <Image src={AlertIcon} />
+              <Flex flexDirection='column'>
+                <Heading size="sm" align-self='stretch'>Unpaid Invoices</Heading>
+                <Text align-self='stretch'>
+
+                {notifCounter > 1 
+                  ? `You have ${notifCounter} past due invoices` 
+                  : `${filteredPastDueInvoices[0].name} - 
                   ${new Date(filteredPastDueInvoices[0].endDate).toLocaleDateString("en-US", {month: "2-digit", day: "2-digit", year: "2-digit",})}`
-              }
-            </Box>
+                }
+                </Text>
+              </Flex>
+            </Flex>
           ),
         });
       }