Connected springboard to HBC

client/src/pages/Ranking.tsx

@@ -27,7 +27,7 @@ interface User {
   townCouncil: string;
 }
 
-interface FormData {
+export interface FormData {
   id: string;
   electricalBill: number;
   waterBill: number;
@@ -60,6 +60,17 @@ interface UserVoucher {
   voucherId: string;
 }
 
+// Sort form data based on descriptor
+export const sortFormData = (list: FormData[], descriptor: SortDescriptor) => {
+  const { column } = descriptor;
+
+  if (column === "avgBill") {
+    return [...list].sort((a, b) => a.avgBill - b.avgBill);
+  }
+
+  return list;
+};
+
 export default function Ranking() {
   const [originalFormData, setOriginalFormData] = useState<FormData[]>([]);
   const [filteredFormData, setFilteredFormData] = useState<FormData[]>([]);
@@ -157,17 +168,6 @@ export default function Ranking() {
     setTop3Users(topUsersByTownCouncil);
   }, [filteredFormData, userData]);
 
-  // Sort form data based on descriptor
-  const sortFormData = (list: FormData[], descriptor: SortDescriptor) => {
-    const { column } = descriptor;
-
-    if (column === "avgBill") {
-      return [...list].sort((a, b) => a.avgBill - b.avgBill);
-    }
-
-    return list;
-  };
-
   const sortedFormData = sortFormData(filteredFormData, sortDescriptor);
 
   const combinedData: FormDataWithUser[] = sortedFormData.map((data) => {