{
{item.icon}
- {item.name}
+ {item.name}
+ {item.count !== null && item.count !== undefined && (
+
+ {item.count}
+
+ )}
))}
+
diff --git a/client/src/components/notifications/Counter.jsx b/client/src/components/notifications/Counter.jsx
index 1614d61..13af1bb 100644
--- a/client/src/components/notifications/Counter.jsx
+++ b/client/src/components/notifications/Counter.jsx
@@ -4,8 +4,6 @@ export const CounterComponent = ({ count }) => {
style={{
width: "75px",
height: "31px",
- borderRadius: "10px",
- border: "1px solid var(--medium-light-grey, #D2D2D2)",
background: "#FFF",
marginTop: "3px",
}}
diff --git a/client/src/components/notifications/FilterButton.jsx b/client/src/components/notifications/FilterButton.jsx
index e846d63..f98fba5 100644
--- a/client/src/components/notifications/FilterButton.jsx
+++ b/client/src/components/notifications/FilterButton.jsx
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
+
import {
Button,
HStack,
@@ -16,43 +17,12 @@ import styles from "./FilterButton.module.css";
import { FilterIcon } from "./FilterIcon";
export const FilterButton = ({ setFilterType, currentFilter }) => {
- const [startDate, setStartDate] = useState("");
- const [endDate, setEndDate] = useState("");
const toast = useToast();
const [type, setType] = useState("all");
- // Watch for changes in both dates
- useEffect(() => {
- console.log(startDate, endDate);
- if (startDate.substring(0,1) === "2" && endDate.substring(0,1) === "2") { // checking if the date is filled out completely
- const start = new Date(startDate);
- const end = new Date(endDate);
-
- console.log(start, end);
- if (start > end) {
- toast({
- title: "Invalid Date Range",
- description: "Start date must be before end date",
- status: "error",
- duration: 3000,
- isClosable: true,
- });
- return;
- }
-
- // Update filter with new dates
- setFilterType(prev => ({
- ...prev,
- type: type,
- startDate: startDate, // The date input already returns YYYY-MM-DD format
- endDate: endDate
- }));
- }
- }, [startDate, endDate, type, toast]);
-
const handleFilterSelect = (type) => {
setType(type);
- setFilterType(prev => ({
+ setFilterType((prev) => ({
...prev,
type,
}));
@@ -68,16 +38,15 @@ export const FilterButton = ({ setFilterType, currentFilter }) => {
padding="8px 16px"
justifyContent="center"
alignItems="center"
- gap="4px"
flexShrink={0}
- borderRadius={15}
+ borderRadius={30}
border="1px solid var(--medium-light-grey, #D2D2D2)"
- background="var(--white, #FFF)"
+ background="#F0F1F4"
color="var(--medium-grey, #767778)"
fontFamily="Inter, sans-serif"
- fontSize="16px"
- fontStyle="normal"
- fontWeight={400}
+ fontSize="15px"
+ fontStyle="bold"
+ fontWeight={650}
lineHeight="normal"
>
Filters
@@ -88,30 +57,10 @@ export const FilterButton = ({ setFilterType, currentFilter }) => {
className={styles.modalContent}
boxShadow="0px 4px 6px -1px rgba(0, 0, 0, 0.1)"
border="1px solid #E2E2E2"
+ w={"auto"}
>
{children}
- setStartDate(e.target.value)}
- className={styles.dateInput}
- />
- to
- setEndDate(e.target.value)}
- className={styles.dateInput}
- />
-
-
@@ -121,21 +70,27 @@ export const FilterButton = ({ setFilterType, currentFilter }) => {
>
All
+
+
+ );
+};
diff --git a/client/src/components/notifications/Notifications.jsx b/client/src/components/notifications/Notifications.jsx
index feebf17..ae05a2f 100644
--- a/client/src/components/notifications/Notifications.jsx
+++ b/client/src/components/notifications/Notifications.jsx
@@ -1,12 +1,14 @@
import { useEffect, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+
import { useBackendContext } from "../../contexts/hooks/useBackendContext";
import Navbar from "../navbar/Navbar";
-import NotificationsComponents from "./NotificationsComponents";
import { CounterComponent } from "./Counter";
import { FilterButton } from "./FilterButton";
import styles from "./Notifications.module.css";
-import { formatDistanceToNow } from 'date-fns';
+import NotificationsComponents from "./NotificationsComponents";
+import { InboxTab } from "./InboxTab";
export const Notifications = () => {
const { backend } = useBackendContext();
@@ -23,25 +25,25 @@ export const Notifications = () => {
try {
const today = new Date();
let endpoints = [];
- let queryParams = "";
-
- // If we have dates, add them as query params regardless of filter type
- if (filterType.startDate && filterType.endDate) {
- queryParams = `?startDate=${filterType.startDate}&endDate=${filterType.endDate}`;
- }
// Only modify the endpoint if we're filtering by type AND it's not "all"
if (filterType.type === "all") {
- endpoints = [`/invoices/overdue${queryParams}`, `/invoices/neardue${queryParams}`];
+ endpoints = [
+ `/invoices/overdue`,
+ `/invoices/neardue`,
+ `/invoices/highpriority`,
+ ];
} else {
- endpoints = [`/invoices/${filterType.type}${queryParams}`];
+ endpoints = [`/invoices/${filterType.type}`];
}
const responses = await Promise.all(
- endpoints.map(endpoint => backend.get(endpoint))
+ endpoints.map((endpoint) => backend.get(endpoint))
);
- const notifsData = responses.flatMap(res => res.data);
+ const notifsData = responses.flatMap((res) => res.data);
+
+ console.log(notifsData);
// Fetch additional data for each invoice (total, paid, event name)
const enrichedInvoices = await Promise.all(
@@ -56,10 +58,12 @@ export const Notifications = () => {
const endDate = new Date(invoice.endDate);
const dueTime = formatDistanceToNow(endDate, { addSuffix: true });
let payStatus = "";
- if (endDate < today) {
+ if (endDate < today && invoice.isSent) {
payStatus = "overdue";
+ } else if (endDate < today && !invoice.isSent) {
+ payStatus = "highpriority";
} else {
- payStatus = "due in one week";
+ payStatus = "neardue";
}
return {
@@ -68,23 +72,26 @@ export const Notifications = () => {
total: totalRes.data.total,
paid: paidRes.data.paid,
payStatus,
- dueTime
+ dueTime,
};
} catch (err) {
- console.error(`Failed to fetch additional data for invoice ID: ${invoice.id}`, err);
+ console.error(
+ `Failed to fetch additional data for invoice ID: ${invoice.id}`,
+ err
+ );
return {
...invoice,
eventName: "Unknown Event",
total: 0,
paid: 0,
payStatus: "Unknown",
- dueTime: "Unknown"
+ dueTime: "Unknown",
};
}
})
);
- setNotifications(enrichedInvoices);
+ setNotifications(enrichedInvoices); // attaches additional info onto invoices
} catch (err) {
console.error("Failed to fetch invoices", err);
}
@@ -92,10 +99,16 @@ export const Notifications = () => {
fetchNotifs();
}, [filterType, backend]);
-
return (
-
+
+
+
{
-
+ Invoice Notifications
+ {
- return (
-
- {notifications.map((item, index) => (
-
-
- {
+ if (payStatus === "overdue") {
+ return (
+
+ Payment for {" "}
+
+ {eventName}
+ {" "}
+ is {payStatus}.
+
+ );
+ } else if (payStatus === "neardue") {
+ return (
+
+
+ {eventName}
+ {" "}
+ not sent to Payer(s).
+
+ );
+ } else {
+ return (
+
+ Missing an email for {" "}
+
+ {eventName}
+ {" "}
+ and is overdue.
+
+ );
+ }
+ };
+
+ const paymentRow = (eventName, payStatus, dueTime, index) => {
+ let notifType = "";
+ if (payStatus === "overdue") {
+ notifType = "Payment Past Due";
+ } else if (payStatus === "neardue") {
+ notifType = "Email Not Sent";
+ } else if (payStatus === "highpriority") {
+ notifType = "High Priority";
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {dueTime}
+
+
+ );
+ };
+ return (
+
+ {notifications.map((item, index) =>
+ paymentRow(item.eventName, item.payStatus, item.dueTime, index)
+ )}
+
);
};
-export default NotificationsComponents;
\ No newline at end of file
+export default NotificationsComponents;
diff --git a/client/src/components/playground/Playground.jsx b/client/src/components/playground/Playground.jsx
index ea5c8d8..06aac9e 100644
--- a/client/src/components/playground/Playground.jsx
+++ b/client/src/components/playground/Playground.jsx
@@ -1,12 +1,13 @@
+import React from 'react';
+
import {
- Heading,
VStack,
} from "@chakra-ui/react";
-import { EventsTable } from "../EventsTable";
-import React from 'react';
-import PDFButton from "../PDFButton";
+
import Navbar from "../navbar/Navbar";
-import { AddClassModal } from '../AddClassModal';
+
+import { SendEmailButton } from "../email/SendEmailButton";
+
export const Playground = () => {
return (
@@ -15,10 +16,7 @@ export const Playground = () => {
spacing={8}
width={"100%"}
>
- Playground
-
+
-
- {item.eventName} is {item.payStatus}
-
- {item.eventName} | Due: {format(new Date(item.endDate), "MMM d")} | Total: ${item.total} | Paid: ${item.paid}
-
-
-
- {item.dueTime}
-
- ))}
-
+ {notifType}
+
+ {paymentText(eventName, payStatus)}
+
{" "}
+