Skip to content

[SSF-22] Create temporary site index on homepage #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bhuvanh66 merged 4 commits into from
Oct 9, 2025
Merged

[SSF-22] Create temporary site index on homepage #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3bbb62
added temporary site hompage functionality
bhuvanh66 Sep 17, 2025
75ea494
conerted homepage to use chakra ui + centered everything
bhuvanh66 Sep 20, 2025
90c192c
Merge branch 'main' of https://github.com/Code-4-Community/ssf into B…
bhuvanh66 Oct 6, 2025
c6a60ca
added Volunteer Management page + minor rearranging of page grouping
bhuvanh66 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/frontend/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,18 @@ import ApprovePantries from '@containers/approvePantries';
import VolunteerManagement from '@containers/volunteerManagement';
import FoodManufacturerOrderDashboard from '@containers/foodManufacturerOrderDashboard';
import DonationManagement from '@containers/donationManagement';
import Homepage from '@containers/homepage';

const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <NotFound />,
children: [
{
index: true,
element: <Homepage />,
},
{
path: '/landing-page',
element: <LandingPage />,
Expand Down
147 changes: 147 additions & 0 deletions apps/frontend/src/containers/homepage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
Box,
Container,
Heading,
VStack,
List,
ListItem,
Link,
Text,
Alert,
AlertDescription,
} from '@chakra-ui/react';

const Homepage: React.FC = () => {
return (
<Container maxW="container.md" py={5}>
<VStack align="center" spacing={8}>
<Heading as="h2" size="lg" textAlign="center">
Site Navigation
</Heading>

<Box w="full">
<Heading as="h3" size="md" mb={3} textAlign="center">
Pantry View
</Heading>
<List spacing={2}>
<ListItem textAlign="center">
<Link as={RouterLink} to="/pantry-overview" color="teal.500">
Pantry Overview
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/pantry-dashboard/1" color="teal.500">
Pantry Dashboard (ID: 1)
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/pantry-past-orders" color="teal.500">
Past Orders
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/request-form/1" color="teal.500">
Request Form (Pantry ID: 1)
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/pantry-application" color="teal.500">
Pantry Application
</Link>
</ListItem>
</List>
</Box>

<Box w="full">
<Heading as="h3" size="md" mb={3} textAlign="center">
Food Manufacturer View
</Heading>
<List spacing={2}>
<ListItem textAlign="center">
<Link
as={RouterLink}
to="/food-manufacturer-order-dashboard"
color="teal.500"
>
Order Dashboard
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/orders" color="teal.500">
Orders
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/donation-management" color="teal.500">
Donation Management
</Link>
</ListItem>
</List>
</Box>

<Box w="full">
<Heading as="h3" size="md" mb={3} textAlign="center">
Admin View
</Heading>
<List spacing={2}>
<ListItem textAlign="center">
<Link as={RouterLink} to="/approve-pantries" color="teal.500">
Approve Pantries
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/pantries" color="teal.500">
All Pantries
</Link>
</ListItem>
<ListItem textAlign="center">
<Link as={RouterLink} to="/volunteer-management" color="teal.500">
Volunteer Management
</Link>
</ListItem>
</List>
</Box>

<Box w="full">
<Heading as="h3" size="md" mb={3} textAlign="center">
Other Pages
</Heading>
<List spacing={2}>
<ListItem textAlign="center">
<Link as={RouterLink} to="/landing-page" color="teal.500">
Landing Page
</Link>
</ListItem>
</List>
</Box>

<Alert
status="info"
variant="subtle"
flexDirection="column"
alignItems="center"
justifyContent="center"
textAlign="center"
borderRadius="md"
mt={5}
>
<AlertDescription>
<VStack align="center" spacing={2}>
<Text>
<strong>Note:</strong> This is a temporary navigation page for
development purposes.
</Text>
<Text>
Routes with parameters are using default values (e.g., ID: 1)
</Text>
</VStack>
</AlertDescription>
</Alert>
</VStack>
</Container>
);
};
Copy link

@dburkhart07 dburkhart07 Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This all looks really good visually. For consistency purposes, as we are using Chakra UI for this project, can we convert all of this to that? You can reference other files to see how we structure some pieces, but the headers can be replaced with Heading, sections with Box, lists and list items with List and ListItems, paragraph with Text. Can reference this here for how to implement all of these: https://chakra-ui.com/docs/components/concepts/overview


export default Homepage;