Set up & retrieve HBForm to Admin

client/src/App.tsx

@@ -24,6 +24,7 @@ import UsersManagement from "./pages/UsersManagement";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import RestrictedLayout from "./layouts/restricted";
+import Ranking from "./pages/Ranking";
 
 function App() {
   return (
@@ -89,6 +90,10 @@ function App() {
             <Route element={<CreateEventsPage />} path="createEvent" />
             <Route element={<EditEventsPage />} path="editEvent/:id" />
           </Route>
+
+          <Route path="ranking">
+            <Route index element={<Ranking />} />
+          </Route>
         </Route>
       </Route>
     </Routes>

client/src/components/AdministratorNavigationPanel.tsx

@@ -63,8 +63,7 @@ export default function AdministratorNavigationPanel() {
   return (
     <div className="h-full">
       <div
-        className={`fixed transition-all ${
-          isScrolled ? "top-2" : "top-10"
+        className={`fixed transition-all ${isScrolled ? "top-2" : "top-10"
           } left-2`}
       >
         <div className="bg-white rounded-full z-40">
@@ -86,17 +85,14 @@ export default function AdministratorNavigationPanel() {
 
       {/* Panel */}
       <div
-        className={`h-full transition-all z-50 ${
-          panelVisible
+        className={`h-full transition-all z-50 ${panelVisible
           ? "scale-100 opacity-100 w-[300px] px-2"
           : "w-0 scale-[98%] opacity-0 px-0"
           }`}
       ></div>
       <div
-        className={`fixed h-full transition-all z-50 ${
-          isScrolled ? "pb-2 -mt-8" : "pb-10"
-        } ${
-          panelVisible
+        className={`fixed h-full transition-all z-50 ${isScrolled ? "pb-2 -mt-8" : "pb-10"
+          } ${panelVisible
             ? "scale-100 opacity-100 w-[300px] p-2"
             : "w-0 scale-[98%] opacity-0 p-0"
           }`}
@@ -167,7 +163,7 @@ export default function AdministratorNavigationPanel() {
                       <AdministratorNavigationPanelNavigationButton
                         text="Ranking"
                         icon={<ChartBarIcon />}
-                        onClickRef="#"
+                        onClickRef="ranking"
                       />
                       <AdministratorNavigationPanelNavigationButton
                         text="Vouchers"

client/src/pages/Ranking.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import config from '../config';
+import instance from '../security/http';
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor, Button } from '@nextui-org/react';
+import { EmailIcon, TrashDeleteIcon } from '../icons';
+
+interface FormData {
+    id: number;
+    electricalBill: number;
+    waterBill: number;
+    totalBill: number;
+    noOfDependents: number;
+    avgBill: number;
+    ebPicture: string;
+    wbPicture: string;
+    userId: string;
+}
+
+export default function Ranking() {
+    const [formData, setFormData] = useState<FormData[]>([]);
+    const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+        column: 'avgBill',
+        direction: 'ascending',
+    });
+
+    useEffect(() => {
+        const getFormData = async () => {
+            try {
+                const response = await instance.get(`${config.serverAddress}/hbcform`);
+                const processedData = response.data.map((data: FormData) => ({
+                    ...data,
+                    electricalBill: Number(data.electricalBill),
+                    waterBill: Number(data.waterBill),
+                    totalBill: Number(data.totalBill),
+                    avgBill: Number(data.avgBill),
+                }));
+                setFormData(processedData);
+            } catch (error) {
+                console.log("Failed to fetch form data");
+            }
+        };
+
+        getFormData();
+    }, []);
+
+    const sortFormData = (list: FormData[], descriptor: SortDescriptor) => {
+        const { column, direction } = descriptor;
+
+        if (column === 'avgBill') {
+            return [...list].sort((a, b) =>
+                direction === 'ascending' ? a.avgBill - b.avgBill : b.avgBill - a.avgBill
+            );
+        }
+
+        return list; // No sorting if the column is not 'avgBill'
+    };
+
+    const handleSort = () => {
+        const { direction } = sortDescriptor;
+        const newDirection = direction === 'ascending' ? 'descending' : 'ascending';
+
+        setSortDescriptor({ column: 'avgBill', direction: newDirection });
+    };
+
+    const renderSortIndicator = () => {
+        if (sortDescriptor.column === 'avgBill') {
+            return sortDescriptor.direction === 'ascending' ? <span>&uarr;</span> : <span>&darr;</span>;
+        }
+        return null;
+    };
+
+    const sortedFormData = sortFormData(formData, sortDescriptor);
+
+    return (
+        <section className="flex flex-col items-center justify-center py-5">
+            <p className="text-2xl 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>Electrical Bill Picture</TableColumn>
+                        <TableColumn>Water Bill Picture</TableColumn>
+                        <TableColumn>Actions</TableColumn>
+                    </TableHeader>
+                    <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.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />}
+                                </TableCell>
+                                <TableCell>
+                                    {data.wbPicture && <img src={`${config.serverAddress}/hbcform/wbPicture/${data.id}`} alt="Water Bill" className="w-full" />}
+                                </TableCell>
+                                <TableCell className="flex flex-row">
+                                    <Button isIconOnly variant="light"><EmailIcon /></Button>
+                                    <Button isIconOnly variant="light"><TrashDeleteIcon /></Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </section>
+    );
+}