Set up Admin KG schedule page
This commit is contained in:
ZacTohZY
@@ -25,6 +25,7 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
|
||||
import ForgotPasswordPage from "./pages/ForgotPasswordPage";
|
||||
import RestrictedLayout from "./layouts/restricted";
|
||||
import Ranking from "./pages/Ranking";
|
||||
import ManageSchedulePage from "./pages/ManageSchedulePage";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -44,7 +45,7 @@ function App() {
|
||||
<Route path="events">
|
||||
<Route index element={<EventsPage />} />
|
||||
</Route>
|
||||
<Route element={<EventDetailsPage />} path="event/:id"/>
|
||||
<Route element={<EventDetailsPage />} path="event/:id" />
|
||||
|
||||
{/* Karang Guni Schedules Route */}
|
||||
<Route path="karang-guni-schedules">
|
||||
@@ -94,6 +95,10 @@ function App() {
|
||||
<Route path="ranking">
|
||||
<Route index element={<Ranking />} />
|
||||
</Route>
|
||||
|
||||
<Route path="schedules">
|
||||
<Route index element={<ManageSchedulePage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
@@ -178,7 +178,7 @@ export default function AdministratorNavigationPanel() {
|
||||
<AdministratorNavigationPanelNavigationButton
|
||||
text="Schedules"
|
||||
icon={<CalendarDaysIcon />}
|
||||
onClickRef="#"
|
||||
onClickRef="schedules"
|
||||
/>
|
||||
<AdministratorNavigationPanelNavigationButton
|
||||
text="Transactions"
|
||||
|
||||
156
client/src/pages/ManageSchedulePage.tsx
Normal file
156
client/src/pages/ManageSchedulePage.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import instance from "../security/http";
|
||||
import { PencilSquareIcon, PlusIcon, TrashDeleteIcon } from "../icons";
|
||||
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, SortDescriptor, Link as NextUILink } from "@nextui-org/react";
|
||||
|
||||
interface Schedule {
|
||||
id: number;
|
||||
dateTime: string;
|
||||
location: string;
|
||||
postalCode: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export default function ManageSchedulePage() {
|
||||
|
||||
const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
|
||||
const [scheduleIdToDelete, setScheduleIdToDelete] = useState<number | null>(null);
|
||||
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
||||
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
||||
column: 'dateTime',
|
||||
direction: 'ascending',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
instance.get('/schedule')
|
||||
.then((res) => {
|
||||
const schedules = res.data.map((schedule: Schedule) => ({
|
||||
...schedule,
|
||||
dateTime: new Date(schedule.dateTime), // Convert to Date object
|
||||
}));
|
||||
setScheduleList(schedules);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching schedules:', err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const deleteSchedule = () => {
|
||||
if (scheduleIdToDelete !== null) {
|
||||
instance.delete(`/schedule/${scheduleIdToDelete}`)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
setScheduleList((prev) => prev.filter(schedule => schedule.id !== scheduleIdToDelete));
|
||||
onOpenChange();
|
||||
setScheduleIdToDelete(null);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error deleting schedule:', err);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const sortScheduleList = (list: Schedule[], descriptor: SortDescriptor) => {
|
||||
const { column, direction } = descriptor;
|
||||
|
||||
const sortedList = [...list].sort((a, b) => {
|
||||
switch (column) {
|
||||
case 'dateTime':
|
||||
const dateA = new Date(a.dateTime);
|
||||
const dateB = new Date(b.dateTime);
|
||||
return direction === 'ascending' ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime();
|
||||
case 'location':
|
||||
return direction === 'ascending' ? a.location.localeCompare(b.location) : b.location.localeCompare(a.location);
|
||||
case 'postalCode':
|
||||
return direction === 'ascending' ? a.postalCode.localeCompare(b.postalCode) : b.postalCode.localeCompare(a.postalCode);
|
||||
case 'status':
|
||||
return direction === 'ascending' ? a.status.localeCompare(b.status) : b.status.localeCompare(a.status);
|
||||
default:
|
||||
throw new Error(`Unsupported column: ${column}`);
|
||||
}
|
||||
});
|
||||
|
||||
return sortedList;
|
||||
};
|
||||
|
||||
const handleSort = () => {
|
||||
const { column, direction } = sortDescriptor;
|
||||
const newDirection = direction === 'ascending' ? 'descending' : 'ascending';
|
||||
|
||||
setSortDescriptor({ column, direction: newDirection });
|
||||
};
|
||||
|
||||
const renderSortIndicator = () => {
|
||||
if (sortDescriptor.direction === 'ascending') {
|
||||
return <span>↑</span>;
|
||||
} else {
|
||||
return <span>↓</span>;
|
||||
}
|
||||
};
|
||||
|
||||
const sortedScheduleList = sortScheduleList(scheduleList, sortDescriptor);
|
||||
|
||||
return (
|
||||
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
|
||||
<div className="inline-block text-center justify-center flex flex-row gap-10">
|
||||
<p className="text-3xl font-bold">Admin Karang Guni Schedule</p>
|
||||
<Link to="/Addschedules">
|
||||
<Button isIconOnly color="primary">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full overflow-auto max-w-screen-lg">
|
||||
<Table aria-label="Schedule Table">
|
||||
<TableHeader>
|
||||
<TableColumn>
|
||||
<NextUILink className="font-normal text-[12px] opacity-70" color="foreground" onClick={handleSort}>Date{renderSortIndicator()}</NextUILink>
|
||||
</TableColumn>
|
||||
<TableColumn>Time</TableColumn>
|
||||
<TableColumn>Location</TableColumn>
|
||||
<TableColumn>Postal Code</TableColumn>
|
||||
<TableColumn>Status</TableColumn>
|
||||
<TableColumn>Action</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedScheduleList.map((schedule) => (
|
||||
<TableRow key={schedule.id}>
|
||||
<TableCell>{((schedule.dateTime as unknown) as Date).toLocaleDateString()}</TableCell>
|
||||
<TableCell>{((schedule.dateTime as unknown) as Date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</TableCell>
|
||||
<TableCell>{schedule.location}</TableCell>
|
||||
<TableCell>{schedule.postalCode}</TableCell>
|
||||
<TableCell>{schedule.status}</TableCell>
|
||||
<TableCell>
|
||||
<Link to={`/Editschedules/${schedule.id}`}><Button isIconOnly color="success" variant="light"><PencilSquareIcon /></Button></Link>
|
||||
<Button isIconOnly color="danger" variant="light" onPress={() => { setScheduleIdToDelete(schedule.id); onOpen(); }}><TrashDeleteIcon /></Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={false} isKeyboardDismissDisabled={true}>
|
||||
<ModalContent>
|
||||
{(onClose) => (
|
||||
<>
|
||||
<ModalHeader className="flex flex-col gap-1">Delete Schedule</ModalHeader>
|
||||
<ModalBody>
|
||||
<p>Are you sure you want to delete this schedule?</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="danger" variant="light" onPress={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
<Button color="danger" onPress={() => { deleteSchedule(); onClose(); }}>
|
||||
Delete
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -73,19 +73,18 @@ export default function Ranking() {
|
||||
|
||||
return (
|
||||
<section className="flex flex-col items-center justify-center py-5">
|
||||
<p className="text-2xl font-bold">Form Data</p>
|
||||
<p className="text-xl font-bold">Form Data</p>
|
||||
<div className="gap-8 p-8">
|
||||
<Table aria-label="Form Data Table">
|
||||
<TableHeader>
|
||||
<TableColumn onClick={handleSort}>
|
||||
Average Bill {renderSortIndicator()}
|
||||
</TableColumn>
|
||||
<TableColumn>Form ID</TableColumn>
|
||||
<TableColumn>User ID</TableColumn>
|
||||
<TableColumn>Electrical Bill</TableColumn>
|
||||
<TableColumn>Water Bill</TableColumn>
|
||||
<TableColumn>Total Bill</TableColumn>
|
||||
<TableColumn>Number of Dependents</TableColumn>
|
||||
<TableColumn onClick={handleSort}>
|
||||
Average Bill {renderSortIndicator()}
|
||||
</TableColumn>
|
||||
<TableColumn>Electrical Bill Picture</TableColumn>
|
||||
<TableColumn>Water Bill Picture</TableColumn>
|
||||
<TableColumn>Actions</TableColumn>
|
||||
@@ -93,13 +92,12 @@ export default function Ranking() {
|
||||
<TableBody>
|
||||
{sortedFormData.map((data) => (
|
||||
<TableRow key={data.id}>
|
||||
<TableCell>${data.avgBill.toFixed(2)}</TableCell>
|
||||
<TableCell>{data.id}</TableCell>
|
||||
<TableCell>{data.userId}</TableCell>
|
||||
<TableCell>${data.electricalBill.toFixed(2)}</TableCell>
|
||||
<TableCell>${data.waterBill.toFixed(2)}</TableCell>
|
||||
<TableCell>${data.totalBill.toFixed(2)}</TableCell>
|
||||
<TableCell>{data.noOfDependents}</TableCell>
|
||||
<TableCell>${data.avgBill.toFixed(2)}</TableCell>
|
||||
<TableCell>
|
||||
{data.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />}
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user