dynamic device grid render

.gitignore

@@ -8,3 +8,4 @@ count.txt
 .nitro
 .tanstack
 .vscode/
+plans/

src/components/grids/device-grid.tsx

@@ -7,68 +7,107 @@ export function DeviceGrid({
   devices,
   folderStatuses,
   isCheckingFolder,
+  totalSeats,
 }: {
   devices: any[];
   folderStatuses?: Map<string, ClientFolderStatus>;
   isCheckingFolder?: boolean;
+  totalSeats?: number;
 }) {
   const getMachineNumber = useMachineNumber();
   const deviceMap = new Map<number, any>();
 
+  let maxMachineNumber = 0;
   devices.forEach((device) => {
     const number = getMachineNumber(device.id || "");
-    if (number > 0 && number <= 40) deviceMap.set(number, device);
+    if (number > maxMachineNumber) maxMachineNumber = number;
   });
 
-  const totalRows = 5;
+  const seatCount =
+    typeof totalSeats === "number" && totalSeats > 0 ? totalSeats : maxMachineNumber;
+
+  devices.forEach((device) => {
+    const number = getMachineNumber(device.id || "");
+    if (number > 0 && number <= seatCount) deviceMap.set(number, device);
+  });
+
+  const columnsPerSide = 4;
+  const rightCount = Math.ceil(seatCount / 2);
+  const leftCount = seatCount - rightCount;
+  const totalRows = Math.max(
+    Math.ceil(rightCount / columnsPerSide),
+    Math.ceil(leftCount / columnsPerSide)
+  );
+
+  const buildRowPositions = (side: "left" | "right", rowIndexFromBottom: number) => {
+    const start =
+      side === "right"
+        ? rowIndexFromBottom * columnsPerSide + 1
+        : rightCount + 1 + rowIndexFromBottom * columnsPerSide;
+    const end =
+      side === "right"
+        ? Math.min(start + columnsPerSide - 1, rightCount)
+        : Math.min(start + columnsPerSide - 1, seatCount);
+
+    const count = Math.max(0, end - start + 1);
+    const positions = Array<number | null>(columnsPerSide).fill(null);
+
+    if (count === 0) {
+      return positions;
+    }
+
+    const numbers: number[] = [];
+    for (let n = end; n >= start; n -= 1) {
+      numbers.push(n);
+    }
+
+    const offset = side === "right" ? 0 : columnsPerSide - count;
+    numbers.forEach((n, index) => {
+      positions[offset + index] = n;
+    });
+
+    return positions;
+  };
+
+  const renderSeat = (position: number | null, key: string) => {
+    if (!position) {
+      return <div key={key} className="w-24 h-24 shrink-0" />;
+    }
+
+    const device = deviceMap.get(position);
+    const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
+    const folderStatus = folderStatuses?.get(macAddress);
+
+    return (
+      <ComputerCard
+        key={key}
+        device={device}
+        position={position}
+        folderStatus={folderStatus}
+        isCheckingFolder={isCheckingFolder}
+      />
+    );
+  };
 
   const renderRow = (rowIndex: number) => {
-    // Đảo ngược: 21-40 sang trái, 1-20 sang phải
-    const leftStart = 21 + (totalRows - 1 - rowIndex) * 4;
-    const rightStart = (totalRows - 1 - rowIndex) * 4 + 1;
+    const rowIndexFromBottom = totalRows - 1 - rowIndex;
+    const leftPositions = buildRowPositions("left", rowIndexFromBottom);
+    const rightPositions = buildRowPositions("right", rowIndexFromBottom);
 
     return (
       <div key={rowIndex} className="flex items-center justify-center gap-3">
-        {/* Bên trái (21–40) */}
-        {Array.from({ length: 4 }).map((_, i) => {
-          const pos = leftStart + (3 - i);
-          const device = deviceMap.get(pos);
-          const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
-          const folderStatus = folderStatuses?.get(macAddress);
-
-          return (
-            <ComputerCard
-              key={pos}
-              device={device}
-              position={pos}
-              folderStatus={folderStatus}
-              isCheckingFolder={isCheckingFolder}
-            />
-          );
-        })}
+        {leftPositions.map((position, i) =>
+          renderSeat(position, `left-${rowIndex}-${i}`)
+        )}
 
         {/* Đường chia giữa */}
         <div className="w-32 flex items-center justify-center">
           <div className="h-px w-full bg-border border-t-2 border-dashed" />
         </div>
 
-        {/* Bên phải (1–20) */}
-        {Array.from({ length: 4 }).map((_, i) => {
-          const pos = rightStart + (3 - i);
-          const device = deviceMap.get(pos);
-          const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
-          const folderStatus = folderStatuses?.get(macAddress);
-
-          return (
-            <ComputerCard
-              key={pos}
-              device={device}
-              position={pos}
-              folderStatus={folderStatus}
-              isCheckingFolder={isCheckingFolder}
-            />
-          );
-        })}
+        {rightPositions.map((position, i) =>
+          renderSeat(position, `right-${rowIndex}-${i}`)
+        )}
       </div>
     );
   };

src/hooks/queries/useDeviceCommQueries.ts

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as deviceCommService from "@/services/device-comm.service";
 import type { DeviceHealthCheck } from "@/types/device";
 import type { ClientFolderStatus } from "@/types/folder";
+import type { Room } from "@/types/room";
 
 const DEVICE_COMM_QUERY_KEYS = {
   all: ["device-comm"] as const,
@@ -29,7 +30,7 @@ export function useGetAllDevices(enabled = true) {
  * Hook để lấy danh sách phòng
  */
 export function useGetRoomList(enabled = true) {
-  return useQuery({
+  return useQuery<Room[]>({
     queryKey: DEVICE_COMM_QUERY_KEYS.roomList(),
     queryFn: () => deviceCommService.getRoomList(),
     enabled,

src/routes/_auth/rooms/$roomName/index.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { LayoutGrid, TableIcon, Monitor, FolderCheck } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useGetDeviceFromRoom } from "@/hooks/queries";
+import { useGetDeviceFromRoom, useGetRoomList } from "@/hooks/queries";
 import { useDeviceEvents } from "@/hooks/useDeviceEvents";
 import { DeviceGrid } from "@/components/grids/device-grid";
 import { DeviceTable } from "@/components/tables/device-table";
@@ -32,6 +32,7 @@ function RoomDetailPage() {
   
   // Folder status from SS
   const { data: devices = [] } = useGetDeviceFromRoom(roomName);
+  const { data: roomData = [] } = useGetRoomList();
 
   const parseMachineNumber = useMachineNumber();
 
@@ -41,6 +42,9 @@ function RoomDetailPage() {
     return parseMachineNumber(a.id) - parseMachineNumber(b.id);
   });
 
+  const currentRoom = roomData.find((room) => room.name === roomName);
+  const totalSeats = currentRoom?.numberOfDevices;
+
   return (
     <div className="w-full px-6 space-y-6">
       <Card className="shadow-sm">
@@ -120,6 +124,7 @@ function RoomDetailPage() {
           ) : viewMode === "grid" ? (
             <DeviceGrid
               devices={sortedDevices}
+              totalSeats={totalSeats}
             />
           ) : (
             <DeviceTable

src/services/device-comm.service.ts

@@ -1,6 +1,7 @@
 import axios from "@/config/axios";
 import { API_ENDPOINTS } from "@/config/api";
 import type { DeviceHealthCheck } from "@/types/device";
+import type { Room } from "@/types/room";
 
 /**
  * Lấy tất cả thiết bị trong hệ thống
@@ -13,8 +14,8 @@ export async function getAllDevices(): Promise<any[]> {
 /**
  * Lấy danh sách phòng
  */
-export async function getRoomList(): Promise<any[]> {
-  const response = await axios.get<any[]>(API_ENDPOINTS.DEVICE_COMM.GET_ROOM_LIST);
+export async function getRoomList(): Promise<Room[]> {
+  const response = await axios.get<Room[]>(API_ENDPOINTS.DEVICE_COMM.GET_ROOM_LIST);
   return response.data;
 }