feat(rfid): front end view of the readers and there status

frontend/src/utils/tableData/rfid/readers/readerColumns.tsx

@@ -0,0 +1,97 @@
+//import { fixTime } from "@/utils/fixTime";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns-tz";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Readers = {
+    rfidReader_id: string;
+    reader: string;
+    readerIP: string;
+    lastHeartBeat: string;
+    lastTrigger: string;
+    lastTriggerGood: boolean;
+    active: boolean;
+    lastTagScanned: string;
+    goodReads: number;
+    badReads: number;
+    totalReads: number;
+    goodRatio: number;
+};
+
+export const readerColumns: ColumnDef<Readers>[] = [
+    {
+        accessorKey: "reader",
+        header: () => <div className="text-left">Name</div>,
+    },
+    {
+        accessorKey: "lastHeartBeat",
+        header: "Last HeartBeat",
+        cell: ({ row }) => {
+            if (row.getValue("lastHeartBeat")) {
+                const correctDate: any = row.getValue("lastHeartBeat");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "lastTrigger",
+        header: "Last Trigger",
+        cell: ({ row }) => {
+            if (row.getValue("lastTrigger")) {
+                const correctDate: any = row.getValue("lastTrigger");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "lastTriggerGood",
+        header: "Last Trigger Status",
+    },
+    {
+        accessorKey: "lastTagScanned",
+        header: "Last Scanned Tag",
+    },
+    {
+        accessorKey: "goodReads",
+        header: "Total Good Reads",
+    },
+    {
+        accessorKey: "badReads",
+        header: "Total Bad Reads",
+    },
+    {
+        accessorKey: "totalReads",
+        header: "Total Reads",
+        cell: ({ row }) => {
+            const total =
+                parseInt(row.getValue("goodReads")) +
+                parseInt(row.getValue("badReads"));
+            return <div className="text-left font-medium">{total}</div>;
+        },
+    },
+    {
+        accessorKey: "goodRatio",
+        header: "Good Ratio",
+        cell: ({ row }) => {
+            const goodRatio =
+                (parseInt(row.getValue("goodReads")) /
+                    (parseInt(row.getValue("goodReads")) +
+                        parseInt(row.getValue("badReads")))) *
+                100;
+            return (
+                <div className="text-left font-medium">
+                    {isNaN(goodRatio) ? 0 : goodRatio}%
+                </div>
+            );
+        },
+    },
+];