From 1b55b0e2b47545e937bece337d43bc4c31d48d2b Mon Sep 17 00:00:00 2001 From: Li Yuanhe Date: Sun, 18 Feb 2024 12:31:37 -0600 Subject: [PATCH 1/4] unable to connect, API unclear --- src/pages/StaffDashboard/StaffDashboard.css | 2 +- src/pages/StaffDashboard/StaffDashboard.tsx | 267 ++++++++++++-------- 2 files changed, 165 insertions(+), 104 deletions(-) diff --git a/src/pages/StaffDashboard/StaffDashboard.css b/src/pages/StaffDashboard/StaffDashboard.css index d9f8d56..52563e0 100644 --- a/src/pages/StaffDashboard/StaffDashboard.css +++ b/src/pages/StaffDashboard/StaffDashboard.css @@ -72,7 +72,7 @@ padding: 0.5rem 2rem 0.5rem 2rem; } .order-width{ - width: 10vw; + width: 13vw; text-align: center; } diff --git a/src/pages/StaffDashboard/StaffDashboard.tsx b/src/pages/StaffDashboard/StaffDashboard.tsx index 36c5797..a4cf4da 100644 --- a/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/src/pages/StaffDashboard/StaffDashboard.tsx @@ -4,118 +4,179 @@ import UserThumb from "../../assets/Images/StaffImages/UserThumb.png"; import AdminBook from "../../assets/Images/StaffImages/AdminBook.png"; import StaffOrderPad from "./StaffOrderPad"; import { Link } from "react-router-dom"; -import Chart from 'chart.js/auto'; - - - +import Chart from "chart.js/auto"; +import { useAuth } from "../../AuthContext"; +import Order from "../Order/OrderClass"; const StaffDashboard: React.FC = () => { - - const chartRef = useRef(null); - const chartRef2 = useRef(null); - - - const Wrappeddata = { - labels: ['Wrapped', 'Unwrapped'], - datasets: [{ - label: 'My First Dataset', - data: [300, 50], - backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'], - hoverOffset: 4 - }] - }; - - const diapperWrappingChart = async () => { - if(chartRef.current != null){ - const ctx = chartRef.current.getContext('2d'); - if (ctx) { - const chart = new Chart(ctx, { - type: 'pie', - data: Wrappeddata, - }); - return () => chart.destroy(); - } + const chartRef = useRef(null); + const chartRef2 = useRef(null); + const [data, setData] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [orders, setOrders] = useState([]); + + const { mongoId, currentUser } = useAuth(); + + const fetchStaffData = async () => { + try { + const token = await currentUser?.getIdToken(); + + const response = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/order?partnerId=${mongoId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, } + ); + + if (!response.ok) { + throw new Error("Data not fetched. Not ok."); + } + const data = await response.json(); + setData(data); + } catch (e) { + console.error(e); + } finally { + setIsLoading(false); } - - const deliveredData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December'], - datasets: [{ - label: 'Delivered', - data: [65, 59, 80, 81, 56, 55, 40, 50, 60, 70, 80, 90], - backgroundColor: 'grey', - hoverOffset: 4 - }] + }; + + if (isLoading) { + return
Loading...
; + } + + const Wrappeddata = { + labels: ["Wrapped", "Unwrapped"], + datasets: [ + { + label: "My First Dataset", + data: [300, 50], + backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + hoverOffset: 4, + }, + ], + }; + + const diapperWrappingChart = async () => { + if (chartRef.current != null) { + const ctx = chartRef.current.getContext("2d"); + if (ctx) { + const chart = new Chart(ctx, { + type: "pie", + data: Wrappeddata, + }); + return () => chart.destroy(); + } } - - const diapperDeliveredChart = async () => { - if(chartRef2.current != null){ - const ctx = chartRef2.current.getContext('2d'); - if (ctx) { - const chart = new Chart(ctx, { - type: 'bar', - data: deliveredData, - }); - - return () => chart.destroy(); - } - } + }; + + const deliveredData = { + labels: [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ], + datasets: [ + { + label: "Delivered", + data: [65, 59, 80, 81, 56, 55, 40, 50, 60, 70, 80, 90], + backgroundColor: "grey", + hoverOffset: 4, + }, + ], + }; + + const diapperDeliveredChart = async () => { + if (chartRef2.current != null) { + const ctx = chartRef2.current.getContext("2d"); + if (ctx) { + const chart = new Chart(ctx, { + type: "bar", + data: deliveredData, + }); + + return () => chart.destroy(); + } } - - useEffect(() => { - diapperWrappingChart(); - }, [Wrappeddata]); - - useEffect(() => { - diapperDeliveredChart(); - },[deliveredData]); - - - return ( -
-
-

Hello, Staff Name

-
-
- - User pic -

My Account

- - - Admin pic -

Admin Page

- -
-
-
-

ORDERS

-
- - - -
-
-
-
-

- DIAPER WRAPPING -

- {/* pie chart */} - -
-
-

- DIAPERS DELIVERED -

- -
-
-
-
+ }; + + useEffect(() => { + fetchStaffData(); + }, []); + + useEffect(() => { + diapperWrappingChart(); + }, [Wrappeddata]); + + useEffect(() => { + diapperDeliveredChart(); + }, [deliveredData]); + + return ( +
+
+

Hello, Staff Name

+
+
+ + User pic +

My Account

+ + + Admin pic +

Admin Page

+ +
+
+
+

ORDERS

+
+ + + +
+
+
+
+

DIAPER WRAPPING

+ +
+
+

DIAPERS DELIVERED

+ +
+
- ); +
+
+ ); }; export default StaffDashboard; From 09463d8cb40ec519f85f687e151e9ebf4dea8fde Mon Sep 17 00:00:00 2001 From: Li Yuanhe Date: Sat, 24 Feb 2024 14:55:30 -0600 Subject: [PATCH 2/4] finished diapper wrapping display --- src/pages/Order/OrderPartner.tsx | 351 +++++++++++--------- src/pages/StaffDashboard/StaffDashboard.tsx | 46 ++- 2 files changed, 227 insertions(+), 170 deletions(-) diff --git a/src/pages/Order/OrderPartner.tsx b/src/pages/Order/OrderPartner.tsx index 5dfa4cb..606c371 100644 --- a/src/pages/Order/OrderPartner.tsx +++ b/src/pages/Order/OrderPartner.tsx @@ -1,172 +1,203 @@ -import { Group, Tabs, Modal, MultiSelect, Button, Image, rem } from '@mantine/core'; -import { useDisclosure } from '@mantine/hooks'; -import { useState, useEffect } from 'react'; -import Order from './OrderClass'; -import OrderTable from './OrderTable'; -import Filter from './Filters'; -import Sorter from './Sorters'; -import OrderForm from '../OrderForm/OrderForm'; +import { + Group, + Tabs, + Modal, + MultiSelect, + Button, + Image, + rem, +} from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; +import { useState, useEffect } from "react"; +import Order from "./OrderClass"; +import OrderTable from "./OrderTable"; +import Filter from "./Filters"; +import Sorter from "./Sorters"; +import OrderForm from "../OrderForm/OrderForm"; import "./OrderPartner.css"; -import ndcLogo from '../../assets/ndc-logo.png'; +import ndcLogo from "../../assets/ndc-logo.png"; import { useAuth } from "../../AuthContext"; interface OrderResponse { - dateCompleted: string; - datePlaced: string; - newborn: number; - numDiapers: number; - partner: string; - size1: number; - size2: number; - size3: number; - size4: number; - size5: number; - size6: number; - status: string; + dateCompleted: string; + datePlaced: string; + newborn: number; + numDiapers: number; + partner: string; + size1: number; + size2: number; + size3: number; + size4: number; + size5: number; + size6: number; + status: string; } const OrderPartner: React.FC = () => { - const [orders, setOrders] = useState([]); - const [opened, { open, close }] = useDisclosure(false); - const [targetSizes, setTargetSizes] = useState([]); - const { mongoId, currentUser } = useAuth(); - - useEffect(() => { - const getOrders = async () => { - const token = await currentUser?.getIdToken(); - - let res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/order?partnerId=${mongoId}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - }); - let data = (await res.json()).map((elem: OrderResponse) => { - return new Order( - new Date(elem.datePlaced), - new Date(elem.dateCompleted) || new Date(), - elem.status, - elem.newborn, - elem.size1, - elem.size2, - elem.size3, - elem.size4, - elem.size5, - elem.size6, - ) - }); - setOrders(data); + const [orders, setOrders] = useState([]); + const [opened, { open, close }] = useDisclosure(false); + const [targetSizes, setTargetSizes] = useState([]); + const { mongoId, currentUser } = useAuth(); + + useEffect(() => { + const getOrders = async () => { + const token = await currentUser?.getIdToken(); + + let res = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/order?partnerId=${mongoId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, } - getOrders(); - }, []) - - - const sortDate = () => { - let orderCopy: Order[] = orders.slice(); - orderCopy.sort((a, b) => (a.datePlaced < b.datePlaced ? -1 : 1)); - setOrders(orderCopy); - } - - const sortNum = () => { - let orderCopy: Order[] = orders.slice(); - orderCopy.sort((a, b) => (a.numDiapers > b.numDiapers ? -1 : 1)); - setOrders(orderCopy); - } - - const filterMonth = () => { - let orderCopy: Order[] = []; - let today: Date = new Date(); - let currMonth: Number = today.getMonth(); - orders.forEach((elem: Order) => { - if (elem.datePlaced.getMonth() == currMonth) orderCopy.push(elem); - }) - - setOrders(orderCopy); - } - - const filterQuarter = () => { - let orderCopy: Order[] = []; - let today: Date = new Date(); - let currQuarter: Number = today.getMonth() / 3; - orders.forEach((elem: Order) => { - if (elem.datePlaced.getMonth() / 3 == currQuarter) orderCopy.push(elem); - }); - - setOrders(orderCopy); + ); + let data = (await res.json()).map((elem: OrderResponse) => { + return new Order( + new Date(elem.datePlaced), + new Date(elem.dateCompleted) || new Date(), + elem.status, + elem.newborn, + elem.size1, + elem.size2, + elem.size3, + elem.size4, + elem.size5, + elem.size6 + ); + }); + setOrders(data); + }; + getOrders(); + }, []); + + const sortDate = () => { + let orderCopy: Order[] = orders.slice(); + orderCopy.sort((a, b) => (a.datePlaced < b.datePlaced ? -1 : 1)); + setOrders(orderCopy); + }; + + const sortNum = () => { + let orderCopy: Order[] = orders.slice(); + orderCopy.sort((a, b) => (a.numDiapers > b.numDiapers ? -1 : 1)); + setOrders(orderCopy); + }; + + const filterMonth = () => { + let orderCopy: Order[] = []; + let today: Date = new Date(); + let currMonth: Number = today.getMonth(); + orders.forEach((elem: Order) => { + if (elem.datePlaced.getMonth() == currMonth) orderCopy.push(elem); + }); + + setOrders(orderCopy); + }; + + const filterQuarter = () => { + let orderCopy: Order[] = []; + let today: Date = new Date(); + let currQuarter: Number = today.getMonth() / 3; + orders.forEach((elem: Order) => { + if (elem.datePlaced.getMonth() / 3 == currQuarter) orderCopy.push(elem); + }); + + setOrders(orderCopy); + }; + + const addTarget = (value: String) => { + const valueNum = value != "newborn" ? parseInt(value.slice(-1)) : 0; + + let temp: number[] = targetSizes.slice(); + if (!targetSizes.includes(valueNum)) { + temp.push(valueNum); + setTargetSizes(temp); } - - const addTarget = (value: String) => { - const valueNum = (value != "newborn") ? parseInt(value.slice(-1)) : 0; - - let temp: number[] = targetSizes.slice(); - if (!targetSizes.includes(valueNum)) { - temp.push(valueNum); - setTargetSizes(temp); - } - } - - const filterSize = () => { - close(); - - let orderCopy: Order[] = []; - orders.forEach((elem: Order) => { - targetSizes.forEach((target: number) => { - if ((elem.diaperDist[target] || 0) > 0) orderCopy.push(elem); - }, elem) - }); - - setOrders(orderCopy); - } - - return ( -
- - - - - - - - - - - - - - Open - Under Review - Approved - - - - - - - - - - - - - - - -
- - -
- -
- - ); + }; + + const filterSize = () => { + close(); + + let orderCopy: Order[] = []; + orders.forEach((elem: Order) => { + targetSizes.forEach((target: number) => { + if ((elem.diaperDist[target] || 0) > 0) orderCopy.push(elem); + }, elem); + }); + + setOrders(orderCopy); + }; + + return ( +
+ + + + + + + + + + + + + + + Open + + + Under Review + + + Approved + + + + + + + + + + + + + + + + +
+ +
+
+ ); }; export default OrderPartner; - diff --git a/src/pages/StaffDashboard/StaffDashboard.tsx b/src/pages/StaffDashboard/StaffDashboard.tsx index a4cf4da..cd00697 100644 --- a/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/src/pages/StaffDashboard/StaffDashboard.tsx @@ -7,14 +7,12 @@ import { Link } from "react-router-dom"; import Chart from "chart.js/auto"; import { useAuth } from "../../AuthContext"; -import Order from "../Order/OrderClass"; - const StaffDashboard: React.FC = () => { const chartRef = useRef(null); const chartRef2 = useRef(null); const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(false); - const [orders, setOrders] = useState([]); + const [monthlyData, setMonthlyData] = useState(null); const { mongoId, currentUser } = useAuth(); @@ -22,8 +20,9 @@ const StaffDashboard: React.FC = () => { try { const token = await currentUser?.getIdToken(); + // Use "45591986a6c384137500f75d" to replace mongoId for testing. const response = await fetch( - `${import.meta.env.VITE_BACKEND_URL}/order?partnerId=${mongoId}`, + `${import.meta.env.VITE_BACKEND_URL}order?partnerId=${mongoId}`, { method: "GET", headers: { @@ -45,6 +44,28 @@ const StaffDashboard: React.FC = () => { } }; + const processDataByMonth = (data2: any[]) => { + const monthlyData = new Array(12).fill(0); + + // For each element, + data2.forEach((item) => { + // Parse the date... + const date = new Date(item.datePlaced); + // ...and get the month. + const month = date.getMonth(); + monthlyData[month]++; + }); + + return monthlyData; + }; + + useEffect(() => { + if (data != null) { + const monthlyData = processDataByMonth(data); + setMonthlyData(monthlyData); + } + }, [data != null]); + if (isLoading) { return
Loading...
; } @@ -54,6 +75,7 @@ const StaffDashboard: React.FC = () => { datasets: [ { label: "My First Dataset", + // to be replaced by actual data data: [300, 50], backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], hoverOffset: 4, @@ -92,7 +114,7 @@ const StaffDashboard: React.FC = () => { datasets: [ { label: "Delivered", - data: [65, 59, 80, 81, 56, 55, 40, 50, 60, 70, 80, 90], + data: monthlyData, backgroundColor: "grey", hoverOffset: 4, }, @@ -158,18 +180,22 @@ const StaffDashboard: React.FC = () => {
-
-

DIAPER WRAPPING

- +

DIAPER WRAPPING

+ -
+
*/}

DIAPERS DELIVERED

- + {monthlyData != null ? ( + + ) : ( +

Loading...

+ )}
From 42a64f5d009f713e75b6b8380b76b64703d1e2ae Mon Sep 17 00:00:00 2001 From: Li Yuanhe Date: Sun, 3 Mar 2024 10:51:02 -0600 Subject: [PATCH 3/4] label changes --- src/pages/StaffDashboard/StaffDashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/StaffDashboard/StaffDashboard.tsx b/src/pages/StaffDashboard/StaffDashboard.tsx index cd00697..9ee8c29 100644 --- a/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/src/pages/StaffDashboard/StaffDashboard.tsx @@ -174,9 +174,9 @@ const StaffDashboard: React.FC = () => {

ORDERS

- - + +
From bb3a5238537b33e6684292d9853ba11114a76f1e Mon Sep 17 00:00:00 2001 From: Li Yuanhe Date: Sun, 3 Mar 2024 12:48:05 -0600 Subject: [PATCH 4/4] finished UI design --- package-lock.json | 22 +++ package.json | 1 + src/pages/StaffDashboard/StaffDashboard.css | 161 ++++++++++++++++++- src/pages/StaffDashboard/StaffDashboard.tsx | 164 +++++++++++++------- yarn.lock | 12 +- 5 files changed, 296 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b0ef85..6f9042b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@mantine/hooks": "^7.4.2", "@tabler/icons-react": "^2.46.0", "chart.js": "^4.4.1", + "cors": "^2.8.5", "dayjs": "^1.11.10", "firebase": "^10.5.0", "nodemon": "^3.0.3", @@ -5654,6 +5655,18 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/cosmiconfig": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", @@ -14912,6 +14925,15 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "cosmiconfig": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", diff --git a/package.json b/package.json index f2fb823..7f3a307 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@mantine/hooks": "^7.4.2", "@tabler/icons-react": "^2.46.0", "chart.js": "^4.4.1", + "cors": "^2.8.5", "dayjs": "^1.11.10", "firebase": "^10.5.0", "nodemon": "^3.0.3", diff --git a/src/pages/StaffDashboard/StaffDashboard.css b/src/pages/StaffDashboard/StaffDashboard.css index 52563e0..8d955cb 100644 --- a/src/pages/StaffDashboard/StaffDashboard.css +++ b/src/pages/StaffDashboard/StaffDashboard.css @@ -77,13 +77,17 @@ } .m-r{ - margin-right: 2rem; + margin-right: 0.5rem; +} +.mt-2{ margin-top: 2rem; } - .wr-width{ width: 20vw; } +.m-w{ + max-width: 20vw; +} .wr-width-2{ width: 40vw; @@ -95,3 +99,156 @@ .bt{ justify-content: space-between; } + +body { + font-family: 'Arial', sans-serif; + background-color: #f5f5f5; + margin: 0; + padding: 20px; + } + + header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + } + + header h1 { + margin: 0; + } + + button { + padding: 10px; + padding-left: 3rem; + padding-right: 3rem; + background-color: #744e78; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 1rem; + margin-bottom: 1rem; + } + + .charts, .orders { + display: flex; + justify-content: space-between; + } + + .bar-chart, .inventory, .donut-chart, .order-requests { + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + h2 { + color: #333; + } + + .bg-c{ + background-color: #e7dee4; + } + + .s-b{ + justify-content: space-between; + } + .mb-2{ + margin-bottom: 0.5rem; + } + + .ml-2{ + margin-left: 2rem; + } + + .style-sst{ + border-radius: 10px; + width: 18.3vw; + justify-content: center; + text-align: center; + } + + + +.order-requests h2 { + text-align: center; + color: #333; /* Assuming a dark color for the heading */ + margin-bottom: 20px; /* Add some space below the heading */ +} + +.order-requests table { + width: 100%; + border-collapse: collapse; + +} + +.order-requests th, +.order-requests td { + text-align: left; + padding: 8px; + border-bottom: 1px solid #ddd; +} + +.order-requests th { + background-color: #f2f2f2; + color: #333; +} + +.p-or{ + padding: 2rem; + padding-top: 1rem; + margin: 1rem; + width: 30vw; +} +.order-requests th:nth-child(1) { + width: 60%; +} + +.order-requests th:nth-child(2) { + width: 30%; +} + + + +.inventory h2 { + color: #333; + margin-bottom: 20px; +} + +.bar-chart2 { + display: flex; + flex-direction: column; + gap: 10px; /* Adjust the space between bars */ +} + +.bar { + background: linear-gradient(to right, #7b4397, #dc2430); + height: 20px; + border-radius: 5px; +} + +.bar-60{ + width: 60%; +} + +.bar-80{ + width: 80%; +} + +/* You can add more specific styles for each bar if needed */ + +.bar-container { + display: flex; + align-items: center; + gap: 10px; /* Adjust the space between label and bar */ +} + +.bar-label { + width: 20px; /* Adjust width to fit the label */ + text-align: right; /* Align the text to the right */ +} +.pdd{ + padding: 2.5rem; + padding-top: 1rem; +} \ No newline at end of file diff --git a/src/pages/StaffDashboard/StaffDashboard.tsx b/src/pages/StaffDashboard/StaffDashboard.tsx index 9ee8c29..fa50db3 100644 --- a/src/pages/StaffDashboard/StaffDashboard.tsx +++ b/src/pages/StaffDashboard/StaffDashboard.tsx @@ -24,6 +24,7 @@ const StaffDashboard: React.FC = () => { const response = await fetch( `${import.meta.env.VITE_BACKEND_URL}order?partnerId=${mongoId}`, { + mode: "no-cors", // 'cors' or 'no-cors' or 'same-origin method: "GET", headers: { "Content-Type": "application/json", @@ -98,24 +99,24 @@ const StaffDashboard: React.FC = () => { const deliveredData = { labels: [ - "January", - "February", - "March", - "April", + "Jan", + "Feb", + "Mar", + "Apr", "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", ], datasets: [ { label: "Delivered", data: monthlyData, - backgroundColor: "grey", + backgroundColor: "#744e78", hoverOffset: 4, }, ], @@ -148,59 +149,102 @@ const StaffDashboard: React.FC = () => { }, [deliveredData]); return ( -
-
-

Hello, Staff Name

-
-
- - User pic -

My Account

- - - Admin pic -

Admin Page

- +
+
+

Hello, John Smith

+ +
+
+
+
+
+

Monthly Deliveries

+ + {/* {monthlyData != null ? ( + + ) : ( +

Loading...

+ )} */} +
-
-
-

ORDERS

-
- - - -
+
+
+

Inventory by size

+
+
+ 0 +
+
+
+ 1 +
-
- {/*
-

DIAPER WRAPPING

- -
*/} -
-

DIAPERS DELIVERED

- {monthlyData != null ? ( - - ) : ( -

Loading...

- )} -
+
+ 2 +
+
+
+ 3 +
+
+
+ 4 +
+
+
+ 5 +
-
+
+
+
+
+

Orders

+ +
+
+
+

Open

+

100

+
+
+

In Progress

+

50

+
+
+

Fulfilled

+

25

+
+
+
+ +
+

Order Requests

+ + + + + + + + + + + + + +
Order #Date
2392302382101/01/24
+
+
+
); }; diff --git a/yarn.lock b/yarn.lock index 69da6fc..208137a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2935,6 +2935,14 @@ "resolved" "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz" "version" "1.0.3" +"cors@^2.8.5": + "integrity" "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==" + "resolved" "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz" + "version" "2.8.5" + dependencies: + "object-assign" "^4" + "vary" "^1" + "cosmiconfig@^5.0.5", "cosmiconfig@^5.1.0": "integrity" "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==" "resolved" "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz" @@ -4674,7 +4682,7 @@ "resolved" "https://registry.npmjs.org/ob1/-/ob1-0.76.8.tgz" "version" "0.76.8" -"object-assign@^4.1.1": +"object-assign@^4", "object-assign@^4.1.1": "integrity" "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" "resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" "version" "4.1.1" @@ -5981,7 +5989,7 @@ "resolved" "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz" "version" "1.0.1" -"vary@~1.1.2": +"vary@^1", "vary@~1.1.2": "integrity" "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==" "resolved" "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz" "version" "1.1.2"