Skip to content

Commit

Permalink
feat (wip): actually display businesses on admin page
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinWu098
KevinWu098 committed Aug 4, 2024
1 parent 1affa8a commit 70d3784
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 140 deletions.
127 changes: 3 additions & 124 deletions src/components/AdminDashboard/AdminDashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useEffect, useState } from 'react';
import { Box, Center, Divider, Flex, Heading, Stack, Text } from '@chakra-ui/react';
import { BiBuildingHouse, BiDonateHeart, BiFile, BiTime } from 'react-icons/bi';
import { Flex, Heading, Stack } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';

import { useAuth } from '../../contexts/AuthContext.jsx';
import { useBackend } from '../../contexts/BackendContext.jsx';
import { pageStyle } from '../../styles/sharedStyles';
import NotificationsDrawer from '../NotificationsDrawer/NotificationsDrawer.jsx';
import { AdminTotals } from './AdminTotals.js';
import { BusinessTable } from './BusinessTable/BusinessTable';

export const AdminDashboard = () => {
Expand Down Expand Up @@ -43,36 +43,6 @@ export const AdminDashboard = () => {
getData();
}, []);

// Counts number of donation forms submitted by unique businesses
const calculateTotalDonationForms = () => {
// const uniqueBusiness = [];
// for (const [value] of Object.entries(donationData)) {
// const businessId = value['business_id'];
// if (uniqueBusiness.includes(businessId) == false) {
// uniqueBusiness.push(businessId);
// }
// }
var submittedBusinesses = 0;
for (const [value] of Object.entries(businesses)) {
const status = businesses[value].submitted;
if (status) {
submittedBusinesses += 1;
}
}
// return uniqueBusiness.length;
return submittedBusinesses;
};

// Counts number of Donation Sites
const calculateTotalDonationSites = () => {
return Object.keys(businesses).length;
};

// Calculates number of pending applications from businesses
const calculatePendingBusinesses = () => {
return pendingBusinesses;
};

return (
<Flex sx={pageStyle}>
<Stack flexDirection={'row'} justifyContent={'space-between'} paddingY={4}>
Expand All @@ -82,98 +52,7 @@ export const AdminDashboard = () => {
<NotificationsDrawer notificationsData={notification} />
</Stack>

<Flex
borderRadius={8}
justifyContent="space-around"
p={4}
borderWidth={1}
borderColor="gray.200"
bg="white"
>
<Flex justifyContent="center" alignItems="center">
<BiBuildingHouse color="teal" size={30} />

<div className="vstack">
<div style={{ marginLeft: '12px' }}>
<Box>
<Text fontSize={25} fontWeight={500}>
{calculateTotalDonationSites()}
</Text>
</Box>
<Box>
<Text color="gray" mt={-2}>
Current Donation Sites
</Text>
</Box>
</div>
</div>
</Flex>

<Center height="50px">
<Divider orientation="vertical" color="#E2E8F0" />
</Center>

<Flex justifyContent="center" alignItems="center">
<BiDonateHeart color="teal" size={30} />

<div className="vstack">
<div style={{ marginLeft: '12px' }}>
<Box>
<Text fontSize={25} fontWeight={500}>
{calculateTotalDonationForms()}
</Text>
</Box>
<Box>
<Text color="gray" mt={-2}>
Donation Forms Submitted
</Text>
</Box>
</div>
</div>
</Flex>

<Center height="50px">
<Divider orientation="vertical" color="#E2E8F0" />
</Center>

<Flex justifyContent="center" alignItems="center">
<BiFile color="teal" size={30} />

<div className="vstack">
<div style={{ marginLeft: '12px' }}>
<Box>
<Text fontSize={25} fontWeight={500}>
{calculateTotalDonationSites() - calculateTotalDonationForms()}
</Text>
</Box>
<Text color="gray" mt={-2}>
Donation Forms Not Submitted
</Text>
</div>
</div>
</Flex>

<Center height="50px">
<Divider orientation="vertical" color="#E2E8F0" />
</Center>

<Flex justifyContent="center" alignItems="center">
<BiTime color="teal" size={30} />

<div className="vstack">
<div style={{ marginLeft: '12px' }}>
<Box>
<Text fontSize={25} fontWeight={500}>
{calculatePendingBusinesses()}
</Text>
</Box>
<Text color="gray" mt={-2}>
Pending Applications
</Text>
</div>
</div>
</Flex>
</Flex>
<AdminTotals businesses={businesses} pendingBusinesses={pendingBusinesses} />

<BusinessTable />
</Flex>
Expand Down
80 changes: 80 additions & 0 deletions src/components/AdminDashboard/AdminTotals.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Fragment } from 'react/jsx-runtime';
import { Box, Center, Divider, Flex, Icon, Text } from '@chakra-ui/react';
import { BiBuildingHouse, BiDonateHeart, BiFile, BiTime } from 'react-icons/bi';

export const AdminTotals = ({ businesses, pendingBusinesses }) => {
const calculateTotalDonationForms = () => {
var submittedBusinesses = 0;
for (const [value] of Object.entries(businesses)) {
const status = businesses[value].submitted;
if (status) {
submittedBusinesses += 1;
}
}

return submittedBusinesses;
};

const calculateTotalDonationSites = () => {
return Object.keys(businesses).length;
};

const calculatePendingBusinesses = () => {
return pendingBusinesses;
};

const stats = [
{
icon: BiBuildingHouse,
value: calculateTotalDonationSites(),
label: 'Donation Sites',
},
{
icon: BiDonateHeart,
value: calculateTotalDonationForms(),
label: 'Donation Forms Submitted',
},
{
icon: BiFile,
value: calculateTotalDonationSites() - calculateTotalDonationForms(),
label: 'Donation Forms Not Submitted',
},
{
icon: BiTime,
value: calculatePendingBusinesses(),
label: 'Pending Applications',
},
];

return (
<Flex justifyContent="space-around" p={4} borderWidth={1} borderColor="gray.200" bg="white">
{stats.map((stat, index) => (
<Fragment key={index}>
<Flex justifyContent="center" alignItems="center" gap={4}>
<Icon as={stat.icon} color="teal" width={8} height={8} />

<Flex flexDirection="column">
<Box>
<Text fontSize={25} fontWeight={500}>
{stat.value}
</Text>
</Box>

<Box>
<Text color="gray" mt={-2}>
{stat.label}
</Text>
</Box>
</Flex>
</Flex>

{index < stats.length - 1 && (
<Center height="50px">
<Divider orientation="vertical" color="#E2E8F0" />
</Center>
)}
</Fragment>
))}
</Flex>
);
};
42 changes: 26 additions & 16 deletions src/components/AdminDashboard/BusinessTable/BusinessTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Checkbox,
Flex,
Heading,
HStack,
IconButton,
Input,
Modal,
Expand Down Expand Up @@ -37,6 +38,16 @@ import { useBackend } from '../../../contexts/BackendContext';
import DownloadCSV from '../../../utils/downloadCSV';
import DropZone from './DropZone';

const TABLE_HEADERS = ['Business Name', 'Location', 'Email', 'Form Status', 'Last Submitted'];

const PENDING_HEADERS = [
'Business Name',
'Location',
'Email',
'Residential Status',
'Application Sent',
];

export const BusinessTable = () => {
const navigate = useNavigate();
const { backend } = useBackend();
Expand All @@ -50,19 +61,9 @@ export const BusinessTable = () => {
const [selectedBusinessIds, setSelectedBusinessIds] = useState<Set<string>>(new Set());
const toast = useToast();

const TABLE_HEADERS = ['Business Name', 'Location', 'Email', 'Form Status', 'Last Submitted'];

const PENDING_HEADERS = [
'Business Name',
'Location',
'Email',
'Residential Status',
'Application Sent',
];

const [headers, setHeaders] = useState(TABLE_HEADERS);

const changeTab = async (tab) => {
const changeTab = async (tab: string) => {
setCurrentTab(tab);
setSelectedBusinessIds(new Set());
setCurrentPageNum(1);
Expand Down Expand Up @@ -153,8 +154,8 @@ export const BusinessTable = () => {
};

const handleSendReminders = async () => {
// ! FIX ME
for (const businessId of selectedBusinessIds) {
// ! FIX ME
try {
const requestData = {
businessId: businessId,
Expand Down Expand Up @@ -241,24 +242,29 @@ export const BusinessTable = () => {
try {
const searchTerm = search.replace(' ', '+');
const businessResponse = await backend.get(
`/business/filter/${currentTab}?pageLimit=10&pageNum=${currentPageNum}&searchTerm=${searchTerm}`,
`/business/filter/search/?currentTab=${currentTab}&pageLimit=10&pageNum=${currentPageNum}&searchTerm=${searchTerm}`,
);

const businessCountResponse = await backend.get(
`/business/totalBusinesses?tab=${currentTab}&searchTerm=${searchTerm}`,
`/business/filter/searchCount?currentTab=${currentTab}&searchTerm=${searchTerm}`,
);

console.log(businessResponse);
if (currentTab === 'All' && search === '' && businessCountResponse.data[0]['count'] === 0) {
onOpen();
}
setPageLimit(Math.ceil(businessCountResponse.data[0]['count'] / 10));
setCurrentBusinessNum(businessCountResponse.data[0]['count']);
setData(businessResponse.data);

if (currentTab === 'Pending') {
setHeaders(PENDING_HEADERS);
}
} catch (error) {
console.error('Error fetching data:', error);
}
};

getData();
}, [search, currentTab, currentPageNum, backend]);

Expand Down Expand Up @@ -300,6 +306,7 @@ export const BusinessTable = () => {
</Tab>
</TabList>
</Tabs>

<Box>
<Box style={{ display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
<Box>
Expand All @@ -324,6 +331,7 @@ export const BusinessTable = () => {
Add business
</Button>
</Box>

<Box>
<Button
colorScheme={currentTab === 'Submitted' ? 'gray' : 'teal'}
Expand Down Expand Up @@ -352,6 +360,7 @@ export const BusinessTable = () => {
</Button>
</Box>
</Box>

<Card mb="20px" mt="20px">
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
Expand Down Expand Up @@ -430,7 +439,8 @@ export const BusinessTable = () => {
</Tbody>
</Table>
</Card>
<Flex gap={4} justifyContent={'flex-end'} alignItems={'center'}>

<HStack justifyContent={'flex-end'}>
<Box>
{(currentPageNum - 1) * 10 + 1} to {Math.min(currentPageNum * 10, currentBusinessNum)}{' '}
of {currentBusinessNum}
Expand All @@ -449,7 +459,7 @@ export const BusinessTable = () => {
icon={<ChevronRightIcon />}
onClick={() => setCurrentPageNum(currentPageNum + 1)}
/>
</Flex>
</HStack>
</Box>
</Box>
);
Expand Down

0 comments on commit 70d3784

Please sign in to comment.