From ec4a6d35fae3859cdebb5f9f47241e1c98118e93 Mon Sep 17 00:00:00 2001 From: Tarun-Nagesh Date: Sun, 25 Jan 2026 13:53:28 -0500 Subject: [PATCH 1/4] Added applications details page --- apps/frontend/src/app.tsx | 9 + .../src/containers/applicationDetails.tsx | 361 ++++++++++++++++++ .../src/containers/approvePantries.tsx | 13 +- 3 files changed, 373 insertions(+), 10 deletions(-) create mode 100644 apps/frontend/src/containers/applicationDetails.tsx diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx index e31dc2846..89872b417 100644 --- a/apps/frontend/src/app.tsx +++ b/apps/frontend/src/app.tsx @@ -17,6 +17,7 @@ import PantryApplication from '@containers/pantryApplication'; import PantryApplicationSubmitted from '@containers/pantryApplicationSubmitted'; import { submitPantryApplicationForm } from '@components/forms/pantryApplicationForm'; import ApprovePantries from '@containers/approvePantries'; +import ApplicationDetails from '@containers/applicationDetails'; import VolunteerManagement from '@containers/volunteerManagement'; import FoodManufacturerOrderDashboard from '@containers/foodManufacturerOrderDashboard'; import DonationManagement from '@containers/donationManagement'; @@ -161,6 +162,14 @@ const router = createBrowserRouter([ ), }, + { + path: '/application-details/:applicationId', + element: ( + + + + ), + }, { path: '/admin-donation', element: ( diff --git a/apps/frontend/src/containers/applicationDetails.tsx b/apps/frontend/src/containers/applicationDetails.tsx new file mode 100644 index 000000000..10cab5667 --- /dev/null +++ b/apps/frontend/src/containers/applicationDetails.tsx @@ -0,0 +1,361 @@ +import React, { useEffect, useState } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import { + Center, + Box, + Grid, + GridItem, + Text, + Button, + Heading, + VStack, + HStack, + Spinner, + Badge, + Flex, +} from '@chakra-ui/react'; +import ApiClient from '@api/apiClient'; +import { Pantry } from 'types/types'; + +const ApplicationDetails: React.FC = () => { + const { applicationId } = useParams<{ applicationId: string }>(); + const navigate = useNavigate(); + const [application, setApplication] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const formatPhone = (phone?: string | null) => { + if (!phone) return null; + const digits = phone.replace(/\D/g, ''); + if (digits.length === 10) { + return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`; + } + return phone; + }; + + const fetchApplicationDetails = async () => { + try { + setLoading(true); + setError(null); + if (!applicationId) { + setError('Application ID not provided'); + return; + } + const data = await ApiClient.getPantry(parseInt(applicationId, 10)); + setApplication(data); + } catch (err) { + setError('Error loading application details: ' + (err instanceof Error ? err.message : String(err))); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchApplicationDetails(); + }, [applicationId]); + + const handleApprove = async () => { + if (application) { + try { + await ApiClient.updatePantry(application.pantryId, 'approve'); + navigate('/approve-pantries'); + } catch (err) { + alert('Error approving application: ' + err); + } + } + }; + + const handleDeny = async () => { + if (application) { + try { + await ApiClient.updatePantry(application.pantryId, 'deny'); + navigate('/approve-pantries'); + } catch (err) { + alert('Error denying application: ' + err); + } + } + }; + + if (loading) { + return ( +
+ + Loading application details... +
+ ); + } + + if (error) { + return ( +
+ + {error} + + +
+ ); + } + + if (!application) { + return ( +
+ + Application not found + + +
+ ); + } + + const pantryUser = application.pantryUser; + + return ( + + + {/* Page Title */} + + Application Details + + + {/* Main Content Card */} + + + {/* Application Header */} + + + Application #{application.pantryId} + + + {application.pantryName} + + + Applied {new Date(application.dateApplied).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} + + + + {/* Point of Contact and Shipping Address */} + + + + Point of Contact Information + + + + {pantryUser + ? `${pantryUser.firstName} ${pantryUser.lastName}` + : application.secondaryContactFirstName && application.secondaryContactLastName + ? `${application.secondaryContactFirstName} ${application.secondaryContactLastName}` + : 'N/A'} + + + {formatPhone(pantryUser?.phone ?? application.secondaryContactPhone) ?? 'N/A'} + + + {pantryUser?.email ?? application.secondaryContactEmail ?? 'N/A'} + + + + + + Shipping Address + + + {(application as any).shipmentAddressLine1}, + + {(application as any).shipmentAddressCity}, {(application as any).shipmentAddressState} {(application as any).shipmentAddressZip} + + {(application as any).shipmentAddressCountry === 'US' ? 'United States of America' : (application as any).shipmentAddressCountry} + + + + + {/* Pantry Details */} + + + Pantry Details + + + + + Name + + {application.pantryName} + + + + Approximate # of Clients + + {application.allergenClients} + + + + + {/* Food Allergies and Restrictions */} + + + Food Allergies and Restrictions + + + {application.restrictions && application.restrictions.length > 0 ? ( + application.restrictions.map((restriction, index) => ( + + {restriction} + + )) + ) : ( + None + )} + + + + + + Accepts Refrigerated Donations? + + {application.refrigeratedDonation} + + + + Willing to Reserve Donations for Allergen-Avoidant Individuals + + {application.reserveFoodForAllergic} + + + + {application.reservationExplanation && ( + + + Justification + + {application.reservationExplanation} + + )} + + + + + Dedicated section for allergy-friendly items? + + {application.dedicatedAllergyFriendly ? 'Yes, we have a dedicated shelf or box' : 'No'} + + + + How Often Allergen-Avoidant Clients Visit + + {application.clientVisitFrequency ?? 'Not specified'} + + + + + + + Confident in Identifying the Top 9 Allergens + + {application.identifyAllergensConfidence ?? 'Not specified'} + + + + Serves Allergen-Avoidant Children + + {application.serveAllergicChildren ?? 'Not specified'} + + + + + {/* Open to SSF Activities */} + + + Open to SSF Activities + + + {application.activities && application.activities.length > 0 ? ( + application.activities.map((activity, index) => ( + + {activity} + + )) + ) : ( + None + )} + + + + {/* Comments/Concerns */} + + + Comments/Concerns + + {application.activitiesComments || '-'} + + + {/* Allergen-free Items in Stock */} + + + Allergen-free Items in Stock + + {application.itemsInStock} + + + {/* Client Requests */} + + + Client Requests + + {application.needMoreOptions} + + + {/* Subscribed to Newsletter */} + + + Subscribed to Newsletter + + {application.newsletterSubscription ? 'Yes' : 'No'} + + + {/* Action Buttons */} + + + + + + + + + ); +}; + +export default ApplicationDetails; diff --git a/apps/frontend/src/containers/approvePantries.tsx b/apps/frontend/src/containers/approvePantries.tsx index bbe3882ad..61f94b51d 100644 --- a/apps/frontend/src/containers/approvePantries.tsx +++ b/apps/frontend/src/containers/approvePantries.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { Center, Table, @@ -7,16 +8,15 @@ import { NativeSelect, NativeSelectIndicator, } from '@chakra-ui/react'; -import PantryApplicationModal from '@components/forms/pantryApplicationModal'; import ApiClient from '@api/apiClient'; import { Pantry } from 'types/types'; import { formatDate } from '@utils/utils'; const ApprovePantries: React.FC = () => { + const navigate = useNavigate(); const [pendingPantries, setPendingPantries] = useState([]); const [sortedPantries, setSortedPantries] = useState([]); const [sort, setSort] = useState(''); - const [openPantry, setOpenPantry] = useState(null); const fetchPantries = async () => { try { @@ -91,7 +91,7 @@ const ApprovePantries: React.FC = () => { bg="transparent" color="cyan" fontWeight="600" - onClick={() => setOpenPantry(pantry)} + onClick={() => navigate(`/application-details/${pantry.pantryId}`)} > {pantry.pantryName} @@ -117,13 +117,6 @@ const ApprovePantries: React.FC = () => { ))} - {openPantry && ( - setOpenPantry(null)} - /> - )} From d9558eed0f93589abbf4f63970be674fcae1315a Mon Sep 17 00:00:00 2001 From: Tarun-Nagesh Date: Sun, 25 Jan 2026 14:00:13 -0500 Subject: [PATCH 2/4] Linting issues --- .../src/containers/applicationDetails.tsx | 57 ++++++++++++++----- 1 file changed, 42 insertions(+), 15 deletions(-) diff --git a/apps/frontend/src/containers/applicationDetails.tsx b/apps/frontend/src/containers/applicationDetails.tsx index 10cab5667..c7541ab21 100644 --- a/apps/frontend/src/containers/applicationDetails.tsx +++ b/apps/frontend/src/containers/applicationDetails.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { Center, @@ -17,10 +17,21 @@ import { import ApiClient from '@api/apiClient'; import { Pantry } from 'types/types'; +type PantryWithShipment = Pantry & { + shipmentAddressLine1?: string | null; + shipmentAddressLine2?: string | null; + shipmentAddressCity?: string | null; + shipmentAddressState?: string | null; + shipmentAddressZip?: string | null; + shipmentAddressCountry?: string | null; +}; + const ApplicationDetails: React.FC = () => { const { applicationId } = useParams<{ applicationId: string }>(); const navigate = useNavigate(); - const [application, setApplication] = useState(null); + const [application, setApplication] = useState( + null, + ); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -33,7 +44,7 @@ const ApplicationDetails: React.FC = () => { return phone; }; - const fetchApplicationDetails = async () => { + const fetchApplicationDetails = useCallback(async () => { try { setLoading(true); setError(null); @@ -42,17 +53,20 @@ const ApplicationDetails: React.FC = () => { return; } const data = await ApiClient.getPantry(parseInt(applicationId, 10)); - setApplication(data); + setApplication(data as PantryWithShipment); } catch (err) { - setError('Error loading application details: ' + (err instanceof Error ? err.message : String(err))); + setError( + 'Error loading application details: ' + + (err instanceof Error ? err.message : String(err)), + ); } finally { setLoading(false); } - }; + }, [applicationId]); useEffect(() => { fetchApplicationDetails(); - }, [applicationId]); + }, [fetchApplicationDetails]); const handleApprove = async () => { if (application) { @@ -141,17 +155,22 @@ const ApplicationDetails: React.FC = () => { - {pantryUser - ? `${pantryUser.firstName} ${pantryUser.lastName}` - : application.secondaryContactFirstName && application.secondaryContactLastName + {pantryUser + ? `${pantryUser.firstName} ${pantryUser.lastName}` + : application.secondaryContactFirstName && + application.secondaryContactLastName ? `${application.secondaryContactFirstName} ${application.secondaryContactLastName}` : 'N/A'} - {formatPhone(pantryUser?.phone ?? application.secondaryContactPhone) ?? 'N/A'} + {formatPhone( + pantryUser?.phone ?? application.secondaryContactPhone, + ) ?? 'N/A'} - {pantryUser?.email ?? application.secondaryContactEmail ?? 'N/A'} + {pantryUser?.email ?? + application.secondaryContactEmail ?? + 'N/A'} @@ -160,11 +179,19 @@ const ApplicationDetails: React.FC = () => { Shipping Address - {(application as any).shipmentAddressLine1}, - {(application as any).shipmentAddressCity}, {(application as any).shipmentAddressState} {(application as any).shipmentAddressZip} + {application.shipmentAddressLine1 ?? 'N/A'}, + + + {application.shipmentAddressCity ?? 'N/A'},{' '} + {application.shipmentAddressState ?? 'N/A'}{' '} + {application.shipmentAddressZip ?? ''} + + + {application.shipmentAddressCountry === 'US' + ? 'United States of America' + : application.shipmentAddressCountry ?? 'N/A'} - {(application as any).shipmentAddressCountry === 'US' ? 'United States of America' : (application as any).shipmentAddressCountry} From 46fbf2e4e800da45c153a8e59d1cab6fe2a3bf50 Mon Sep 17 00:00:00 2001 From: Justin Wang Date: Sun, 15 Feb 2026 20:13:42 -0500 Subject: [PATCH 3/4] approve pantries frontend --- .../src/containers/applicationDetails.tsx | 51 ++- .../src/containers/approvePantries.tsx | 347 +++++++++++++----- 2 files changed, 303 insertions(+), 95 deletions(-) diff --git a/apps/frontend/src/containers/applicationDetails.tsx b/apps/frontend/src/containers/applicationDetails.tsx index c7541ab21..e9c80811f 100644 --- a/apps/frontend/src/containers/applicationDetails.tsx +++ b/apps/frontend/src/containers/applicationDetails.tsx @@ -105,7 +105,9 @@ const ApplicationDetails: React.FC = () => { {error} - + ); } @@ -116,7 +118,9 @@ const ApplicationDetails: React.FC = () => { Application not found - + ); } @@ -143,7 +147,12 @@ const ApplicationDetails: React.FC = () => { {application.pantryName} - Applied {new Date(application.dateApplied).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })} + Applied{' '} + {new Date(application.dateApplied).toLocaleDateString('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + })} @@ -223,7 +232,8 @@ const ApplicationDetails: React.FC = () => { Food Allergies and Restrictions - {application.restrictions && application.restrictions.length > 0 ? ( + {application.restrictions && + application.restrictions.length > 0 ? ( application.restrictions.map((restriction, index) => ( { - Willing to Reserve Donations for Allergen-Avoidant Individuals + Willing to Reserve Donations for Allergen-Avoidant + Individuals + + + {application.reserveFoodForAllergic} - {application.reserveFoodForAllergic} @@ -263,7 +276,9 @@ const ApplicationDetails: React.FC = () => { Justification - {application.reservationExplanation} + + {application.reservationExplanation} + )} @@ -272,13 +287,19 @@ const ApplicationDetails: React.FC = () => { Dedicated section for allergy-friendly items? - {application.dedicatedAllergyFriendly ? 'Yes, we have a dedicated shelf or box' : 'No'} + + {application.dedicatedAllergyFriendly + ? 'Yes, we have a dedicated shelf or box' + : 'No'} + How Often Allergen-Avoidant Clients Visit - {application.clientVisitFrequency ?? 'Not specified'} + + {application.clientVisitFrequency ?? 'Not specified'} + @@ -287,13 +308,17 @@ const ApplicationDetails: React.FC = () => { Confident in Identifying the Top 9 Allergens - {application.identifyAllergensConfidence ?? 'Not specified'} + + {application.identifyAllergensConfidence ?? 'Not specified'} + Serves Allergen-Avoidant Children - {application.serveAllergicChildren ?? 'Not specified'} + + {application.serveAllergicChildren ?? 'Not specified'} + @@ -354,7 +379,9 @@ const ApplicationDetails: React.FC = () => { Subscribed to Newsletter - {application.newsletterSubscription ? 'Yes' : 'No'} + + {application.newsletterSubscription ? 'Yes' : 'No'} + {/* Action Buttons */} diff --git a/apps/frontend/src/containers/approvePantries.tsx b/apps/frontend/src/containers/approvePantries.tsx index 61f94b51d..a5f8594b7 100644 --- a/apps/frontend/src/containers/approvePantries.tsx +++ b/apps/frontend/src/containers/approvePantries.tsx @@ -1,125 +1,306 @@ import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; import { - Center, Table, Button, + Box, + Heading, + VStack, + Checkbox, + Pagination, + ButtonGroup, + IconButton, Link, - NativeSelect, - NativeSelectIndicator, } from '@chakra-ui/react'; import ApiClient from '@api/apiClient'; import { Pantry } from 'types/types'; -import { formatDate } from '@utils/utils'; +import { ArrowDownUp, ChevronLeft, ChevronRight, Funnel } from 'lucide-react'; const ApprovePantries: React.FC = () => { - const navigate = useNavigate(); - const [pendingPantries, setPendingPantries] = useState([]); - const [sortedPantries, setSortedPantries] = useState([]); - const [sort, setSort] = useState(''); + const [pantries, setPantries] = useState([]); + const [sortAsc, setSortAsc] = useState(true); + const [selectedPantries, setSelectedPantries] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [isFilterOpen, setIsFilterOpen] = useState(false); const fetchPantries = async () => { try { const data = await ApiClient.getAllPendingPantries(); - setPendingPantries(data); + setPantries(data); } catch (error) { alert('Error fetching unapproved pantries: ' + error); } }; - const updatePantry = async ( - pantryId: number, - decision: 'approve' | 'deny', - ) => { - try { - await ApiClient.updatePantry(pantryId, decision); - setPendingPantries((prev) => prev.filter((p) => p.pantryId !== pantryId)); - } catch (error) { - alert(`Error ${decision} pantry: ` + error); - } - }; - useEffect(() => { fetchPantries(); }, []); useEffect(() => { - const sorted = [...pendingPantries]; + setCurrentPage(1); + }, [selectedPantries]); + + const pantryOptions = [ + ...new Set( + pantries + .map((p) => p.pantryName) + .filter((name): name is string => !!name), + ), + ].sort((a, b) => a.localeCompare(b)); - if (sort === 'name') { - sorted.sort((a, b) => a.pantryName.localeCompare(b.pantryName)); - } else if (sort === 'name-reverse') { - sorted.sort((a, b) => b.pantryName.localeCompare(a.pantryName)); - } else if (sort === 'date-recent') { - sorted.sort( - (a, b) => - new Date(b.dateApplied).getTime() - new Date(a.dateApplied).getTime(), - ); - } else if (sort === 'date-oldest') { - sorted.sort( - (a, b) => - new Date(a.dateApplied).getTime() - new Date(b.dateApplied).getTime(), - ); + const handleFilterChange = (pantry: string, checked: boolean) => { + if (checked) { + setSelectedPantries([...selectedPantries, pantry]); + } else { + setSelectedPantries(selectedPantries.filter((p) => p !== pantry)); } + }; + + const filteredPantries = pantries + .filter((p) => { + const matchesFilter = + selectedPantries.length === 0 || + selectedPantries.includes(p.pantryName); + return matchesFilter; + }) + .sort((a, b) => + sortAsc + ? new Date(a.dateApplied).getTime() - new Date(b.dateApplied).getTime() + : new Date(b.dateApplied).getTime() - new Date(a.dateApplied).getTime(), + ); - setSortedPantries(sorted); - }, [sort, pendingPantries]); + const itemsPerPage = 10; + const totalPages = Math.ceil(filteredPantries.length / itemsPerPage); + const paginatedPantries = filteredPantries.slice( + (currentPage - 1) * itemsPerPage, + currentPage * itemsPerPage, + ); + + const tableHeaderStyles = { + borderBottom: '1px solid', + borderColor: 'neutral.100', + color: 'neutral.800', + fontFamily: 'inter', + fontWeight: '600', + fontSize: 'sm', + }; return ( -
- - setSort(e.target.value)} - > - - - - - - - + + + Application Review + + + + - + {isFilterOpen && ( + <> + setIsFilterOpen(false)} + zIndex={10} + /> + + + {pantryOptions.map((pantry) => ( + + handleFilterChange(pantry, e.checked) + } + color="black" + size="sm" + > + + + {pantry} + + ))} + + + + )} + + + + + + + + Application # + + + Pantry + + + Date Applied + + + Actions + + + - {sortedPantries.map((pantry) => ( - - {pantry.pantryId} - - + {paginatedPantries.map((pantry, index) => ( + + + {pantry.pantryId} - {formatDate(pantry.dateApplied)} - - + + {pantry.pantryName} + + + {new Date(pantry.dateApplied).toLocaleDateString('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + })} - - + View Details + ))} -
+ + {totalPages > 1 && ( + setCurrentPage(e.page)} + > + + + + + + ( + + {page.value} + + )} + /> + + + + + + + )} + ); }; From 0457e9d88e3edca1a0591919666ceb41f318e36f Mon Sep 17 00:00:00 2001 From: Justin Wang Date: Wed, 18 Feb 2026 22:14:43 -0500 Subject: [PATCH 4/4] adding no pantry application message and icon --- apps/frontend/src/app.tsx | 5 +- .../src/containers/approvePantries.tsx | 442 ++++++++++-------- 2 files changed, 242 insertions(+), 205 deletions(-) diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx index e07988379..76e1f9861 100644 --- a/apps/frontend/src/app.tsx +++ b/apps/frontend/src/app.tsx @@ -7,7 +7,6 @@ import PantryPastOrders from '@containers/pantryPastOrders'; import Pantries from '@containers/pantries'; import Orders from '@containers/orders'; import PantryDashboard from '@containers/pantryDashboard'; -import submitFoodRequestFormModal from '@components/forms/requestFormModal'; import { submitDeliveryConfirmationFormModal } from '@components/forms/deliveryConfirmationModal'; import FormRequests from '@containers/formRequests'; import PantryApplication from '@containers/pantryApplication'; @@ -172,9 +171,9 @@ const router = createBrowserRouter([ { path: '/application-details/:applicationId', element: ( - + - + ), }, { diff --git a/apps/frontend/src/containers/approvePantries.tsx b/apps/frontend/src/containers/approvePantries.tsx index a5f8594b7..e59ff71fc 100644 --- a/apps/frontend/src/containers/approvePantries.tsx +++ b/apps/frontend/src/containers/approvePantries.tsx @@ -13,7 +13,13 @@ import { } from '@chakra-ui/react'; import ApiClient from '@api/apiClient'; import { Pantry } from 'types/types'; -import { ArrowDownUp, ChevronLeft, ChevronRight, Funnel } from 'lucide-react'; +import { + ArrowDownUp, + ChevronLeft, + ChevronRight, + CircleCheck, + Funnel, +} from 'lucide-react'; const ApprovePantries: React.FC = () => { const [pantries, setPantries] = useState([]); @@ -89,216 +95,248 @@ const ApprovePantries: React.FC = () => { Application Review - - - - - {isFilterOpen && ( - <> - setIsFilterOpen(false)} - zIndex={10} - /> - - - {pantryOptions.map((pantry) => ( - - handleFilterChange(pantry, e.checked) - } - color="black" - size="sm" - > - - - {pantry} - - ))} - - - - )} - - - - - - - - Application # - - - Pantry - - - Date Applied - - - Actions - - - - - {paginatedPantries.map((pantry, index) => ( - - - {pantry.pantryId} - - - {pantry.pantryName} - - + + + + No Applications + + + There are no applications to review at this time + + + ) : ( + + + + - {totalPages > 1 && ( - setCurrentPage(e.page)} - > - - + setIsFilterOpen(false)} + zIndex={10} + /> + + + {pantryOptions.map((pantry) => ( + + handleFilterChange(pantry, e.checked) + } + color="black" + size="sm" + > + + + {pantry} + + ))} + + + + )} + + + + + + + - {page.value} - - )} - /> + Application # + + + Pantry + + + Date Applied + + + Actions + + + + + {paginatedPantries.map((pantry, index) => ( + + + {pantry.pantryId} + + + {pantry.pantryName} + + + {new Date(pantry.dateApplied).toLocaleDateString('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + })} + + + + View Details + + + + ))} + + - 1 && ( + setCurrentPage(e.page)} > - - - - + + + + + + ( + + {page.value} + + )} + /> + + + + + + + )} + )} );