Skip to content

Commit

Permalink
Add extra pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@TaylorBeck
TaylorBeck committed Sep 2, 2024
1 parent b464fa4 commit 6239807
Show file tree
Hide file tree
Showing 8 changed files with 1,706 additions and 14 deletions.
30 changes: 30 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@ import { Provider } from 'react-redux';
import { store, persistor } from './redux/store';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react';
import ChickenDetailsPage from './pages/ChickenDetailsPage';
import FarmDetailsPage from './pages/FarmDetailsPage';
import FarmsPage from './pages/FarmsPage';
import OrdersPage from './pages/OrdersPage';

// Lazy load components
const SignUp = lazy(() => import('./pages/SignUp'));
const SignIn = lazy(() => import('./pages/SignIn'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const ChickensPage = lazy(() => import('./pages/ChickensPage'));
const BreederPage = lazy(() => import('./pages/BreederPage'));
const HatcheryPage = lazy(() => import('./pages/HatcheryPage'));
const FinancesPage = lazy(() => import('./pages/FinancesPage'));
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
const NotFound = lazy(() => import('./pages/NotFound'));
Expand Down Expand Up @@ -66,10 +72,26 @@ function App() {
path="/dashboard"
element={<Dashboard />}
/>
<Route
path="/farms"
element={<FarmsPage />}
/>
<Route
path="/farms/:farmId"
element={<FarmDetailsPage />}
/>
<Route
path="/chickens"
element={<ChickensPage />}
/>
<Route
path="/breeder"
element={<BreederPage />}
/>
<Route
path="/hatchery"
element={<HatcheryPage />}
/>
<Route
path="/finances"
element={<FinancesPage />}
Expand All @@ -82,6 +104,14 @@ function App() {
path="/calendar"
element={<SettingsPage />}
/>
<Route
path="/farms/:farmId/chickens/:chickenId"
element={<ChickenDetailsPage />}
/>
<Route
path="/orders"
element={<OrdersPage />}
/>
</Route>

<Route
Expand Down
182 changes: 168 additions & 14 deletions src/components/layout/MainLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { logout } from '../../redux/slices/authSlice';
import { persistor } from '../../redux/store';
import { auth } from '../../api/firebaseConfig';
Expand All @@ -23,7 +23,8 @@ import {
ListItemIcon,
ListItemText,
Divider,
Drawer
Drawer,
ListItemAvatar
} from '@mui/material';

import MenuIcon from '@mui/icons-material/Menu';
Expand All @@ -32,16 +33,39 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
import AgricultureIcon from '@mui/icons-material/Agriculture';
import PetsIcon from '@mui/icons-material/Pets';
import EggIcon from '@mui/icons-material/Egg';
import WarehouseIcon from '@mui/icons-material/Warehouse';
import LocalDiningIcon from '@mui/icons-material/LocalDining';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import CalendarIcon from '@mui/icons-material/CalendarMonth';
import SettingsIcon from '@mui/icons-material/Settings';
import LogoutIcon from '@mui/icons-material/Logout';
import NotificationsIcon from '@mui/icons-material/Notifications';
import Badge from '@mui/material/Badge';
import WarningIcon from '@mui/icons-material/Warning';
import InfoIcon from '@mui/icons-material/Info';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

const drawerWidth = 200;
const closedDrawerWidth = 59;

const theme = createTheme({
typography: {
fontFamily: [
'Roboto',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Arial',
'sans-serif'
].join(',')
},
palette: {
primary: {
main: '#003049' // prussian_blue
Expand All @@ -61,7 +85,7 @@ const StyledAppBar = styled(AppBar, {
zIndex: theme.zIndex.drawer + 1,
width: `calc(100% - ${closedDrawerWidth + 12}px)`,
marginLeft: closedDrawerWidth,
backgroundColor: theme.palette.primary.main, // Add this line
backgroundColor: theme.palette.primary.main,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
Expand Down Expand Up @@ -104,12 +128,14 @@ const StyledDrawer = styled(Drawer, {

const menuItems = [
{ text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
{ text: 'Farms', icon: <AgricultureIcon />, path: '/chickens' },
{ text: 'Farms', icon: <AgricultureIcon />, path: '/farms' },
{ text: 'Chickens', icon: <WarehouseIcon />, path: '/chickens' },
{ text: 'Breeder', icon: <PetsIcon />, path: '/breeder' },
{ text: 'Hatchery', icon: <EggIcon />, path: '/hatchery' },
{ text: 'Feed Mill', icon: <LocalDiningIcon />, path: '/feed-mill' },
{ text: 'Finances', icon: <AttachMoneyIcon />, path: '/finances' },
{ text: 'Calendar', icon: <CalendarIcon />, path: '/calendar' }
{ text: 'Calendar', icon: <CalendarIcon />, path: '/calendar' },
{ text: 'Orders', icon: <ShoppingCartIcon />, path: '/orders' }
];

const Logo = styled('img')({
Expand All @@ -136,12 +162,14 @@ const MainContent = styled(Box, {
})
}));

export default function Dashboard({ children }) {
export default function Dashboard({ children, title }) {
const navigate = useNavigate();
const dispatch = useDispatch();
const user = useSelector(state => state.auth.user);
const [open, setOpen] = useState(true);
const [anchorEl, setAnchorEl] = useState(null);
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const [notificationsOpen, setNotificationsOpen] = useState(false);

useEffect(() => {
if (isSmallScreen) {
Expand Down Expand Up @@ -172,6 +200,64 @@ export default function Dashboard({ children }) {
navigate('/sign-in'); // Navigate to sign-in page
};

const toggleNotifications = () => {
setNotificationsOpen(!notificationsOpen);
};

const notifications = [
{
id: 1,
type: 'warning',
message: 'Low feed stock in Coop #3',
time: '2 hours ago'
},
{
id: 2,
type: 'info',
message: 'Egg collection due for Coop #1',
time: '3 hours ago'
},
{
id: 3,
type: 'success',
message: 'Vaccinations completed',
time: '1 day ago'
},
{
id: 4,
type: 'warning',
message: 'Unusual temperatures - Coop 1',
time: '2 days ago'
},
{
id: 5,
type: 'info',
message: 'Order #124983 received',
time: '3 days ago'
},
{
id: 6,
type: 'danger',
message: 'Disease outbreak in Coop #2',
time: '3 days ago'
}
];

const getNotificationIcon = type => {
switch (type) {
case 'warning':
return <WarningIcon sx={{ color: 'orange' }} />;
case 'info':
return <InfoIcon sx={{ color: 'blue' }} />;
case 'success':
return <CheckCircleIcon sx={{ color: 'green' }} />;
case 'danger':
return <ErrorIcon sx={{ color: 'red' }} />;
default:
return <InfoIcon />;
}
};

return (
<ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}>
Expand Down Expand Up @@ -203,8 +289,19 @@ export default function Dashboard({ children }) {
noWrap
sx={{ flexGrow: 1 }}
>
Dashboard
{title}
</Typography>
<IconButton
color="inherit"
onClick={toggleNotifications}
>
<Badge
badgeContent={4}
color="secondary"
>
<NotificationsIcon />
</Badge>
</IconButton>
</Toolbar>
</StyledAppBar>
<StyledDrawer
Expand Down Expand Up @@ -273,17 +370,30 @@ export default function Dashboard({ children }) {
</ListItem>
))}
</List>
<Box sx={{ position: 'absolute', bottom: 0, width: '100%', p: 2 }}>
<Box
sx={{
bottom: 0,
width: '100%',
p: 2,
display: 'flex',
height: '100%',
alignItems: 'flex-end',
justifyContent: 'center'
}}
>
<IconButton
onClick={handlePopoverOpen}
sx={{ marginLeft: '0', padding: '0' }}
sx={{
marginLeft: '0',
padding: '0'
}}
>
<Avatar
alt="User Avatar"
src="/face-1.png"
sx={{
boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)'
}}
src={
user?.image ||
'https://s3-poultrypro.s3.us-west-2.amazonaws.com/face-1.png'
}
/>
</IconButton>
<Popover
Expand Down Expand Up @@ -332,11 +442,55 @@ export default function Dashboard({ children }) {
</Popover>
</Box>
</StyledDrawer>
<Drawer
anchor="right"
open={notificationsOpen}
onClose={toggleNotifications}
sx={{
'& .MuiDrawer-paper': {
width: 350,
boxSizing: 'border-box'
}
}}
>
<Box sx={{ p: 2 }}>
<Typography
variant="h6"
gutterBottom
>
Notifications
</Typography>
<List>
{notifications.map(notification => (
<>
<ListItem
sx={{
height: '90px'
}}
key={notification.id}
alignItems="center"
>
<ListItemAvatar>
<Avatar sx={{ backgroundColor: 'transparent' }}>
{getNotificationIcon(notification.type)}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={notification.message}
secondary={notification.time}
/>
</ListItem>
<Divider />
</>
))}
</List>
</Box>
</Drawer>
<MainContent open={open}>
<Toolbar />
<Container
maxWidth="lg"
sx={{ mt: 0, mb: 4, pr: 0, mr: 0 }}
sx={{ mt: 0, ml: 0, mb: 4, pr: 0, mr: 0 }}
>
<Grid container>{children}</Grid>
</Container>
Expand Down
Loading

0 comments on commit 6239807

Please sign in to comment.