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

frontend/src/components/layout/side-components/production.tsx

@@ -1,4 +1,4 @@
-import {Printer} from "lucide-react";
+import { Printer } from "lucide-react";
 import {
     SidebarGroup,
     SidebarGroupContent,
@@ -7,8 +7,8 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from "../../ui/sidebar";
-import {hasPageAccess} from "@/utils/userAccess";
-import {User} from "@/types/users";
+import { hasPageAccess } from "@/utils/userAccess";
+import { User } from "@/types/users";
 
 const items = [
     {
@@ -19,9 +19,32 @@ const items = [
         module: "ocp",
         active: true,
     },
+    {
+        title: "RFID",
+        moduleName: "prodcution",
+        description: "RFID stuff",
+        url: "/rfid",
+        icon: "Tags",
+        active: true,
+        roles: [
+            "viewer",
+            "technician",
+            "supervisor",
+            "manager",
+            "admin",
+            "systemAdmin",
+        ],
+        subSubModule: [],
+    },
 ];
 
-export function ProductionSideBar({user, moduleID}: {user: User | null; moduleID: string}) {
+export function ProductionSideBar({
+    user,
+    moduleID,
+}: {
+    user: User | null;
+    moduleID: string;
+}) {
     return (
         <SidebarGroup>
             <SidebarGroupLabel>Production</SidebarGroupLabel>
@@ -30,14 +53,15 @@ export function ProductionSideBar({user, moduleID}: {user: User | null; moduleID
                     {items.map((item) => (
                         <SidebarMenuItem key={item.title}>
                             <>
-                                {hasPageAccess(user, item.role, moduleID) && item.active && (
-                                    <SidebarMenuButton asChild>
-                                        <a href={item.url}>
-                                            <item.icon />
-                                            <span>{item.title}</span>
-                                        </a>
-                                    </SidebarMenuButton>
-                                )}
+                                {hasPageAccess(user, item.role, moduleID) &&
+                                    item.active && (
+                                        <SidebarMenuButton asChild>
+                                            <a href={item.url}>
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </a>
+                                        </SidebarMenuButton>
+                                    )}
                             </>
                         </SidebarMenuItem>
                     ))}

frontend/src/components/rfid/RfidPage.tsx

@@ -0,0 +1,28 @@
+import { getReaders } from "@/utils/querys/rfid/getReaders";
+import { readerColumns } from "@/utils/tableData/rfid/readers/readerColumns";
+import { ReaderTable } from "@/utils/tableData/rfid/readers/readerData";
+import { useQuery } from "@tanstack/react-query";
+
+export default function RfidPage() {
+    const { data, isError, isLoading } = useQuery(getReaders());
+
+    if (isError) {
+        return <div>Error</div>;
+    }
+
+    if (isLoading) {
+        return <div>Loading</div>;
+    }
+
+    return (
+        <div className="m-2">
+            <ReaderTable
+                columns={readerColumns}
+                data={data.data.sort((a: any, b: any) =>
+                    a.reader.localeCompare(b.reader)
+                )}
+                //style={style}
+            />
+        </div>
+    );
+}