TTMT.ManageWebGUI/src/routes/_auth/blacklists/index.tsx

import {
  useGetBlacklist,
  useGetRoomList,
  useAddBlacklist,
  useDeleteBlacklist,
  useUpdateDeviceBlacklist,
} from "@/hooks/queries";
import { createFileRoute } from "@tanstack/react-router";
import type { ColumnDef } from "@tanstack/react-table";
import type { Blacklist } from "@/types/black-list";
import { BlackListManagerTemplate } from "@/template/table-manager-template";
import { toast } from "sonner";
import { useState } from "react";

export const Route = createFileRoute("/_auth/blacklists/")({
  head: () => ({ meta: [{ title: "Danh sách các ứng dụng bị chặn" }] }),
  component: BlacklistComponent,
  loader: async ({ context }) => {
    context.breadcrumbs = [
      { title: "Quản lý danh sách chặn", path: "/_auth/blacklists/" },
    ];
  },
});

function BlacklistComponent() {
  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());

  // Lấy danh sách blacklist
  const { data, isLoading } = useGetBlacklist();

  // Lấy danh sách phòng
  const { data: roomData = [] } = useGetRoomList();

  const blacklist: Blacklist[] = Array.isArray(data)
    ? (data as Blacklist[])
    : [];

  const columns: ColumnDef<Blacklist>[] = [
    {
      accessorKey: "id",
      header: "STT",
      cell: (info) => info.getValue(),
    },
    {
      accessorKey: "appName",
      header: "Tên ứng dụng",
      cell: (info) => info.getValue(),
    },
    {
      accessorKey: "processName",
      header: "Tên tiến trình",
      cell: (info) => info.getValue(),
    },
    {
      accessorKey: "createdAt",
      header: "Ngày tạo",
      cell: (info) => info.getValue(),
    },
    {
      accessorKey: "updatedAt",
      header: "Ngày cập nhật",
      cell: (info) => info.getValue(),
    },
    {
      accessorKey: "createdBy",
      header: "Người tạo",
      cell: (info) => info.getValue(),
    },
    {
      id: "select",
      header: () => (
        <input
          type="checkbox"
          onChange={(e) => {
            if (e.target.checked && data) {
              const allIds = data.map((item: { id: number }) => item.id);
              setSelectedRows(new Set(allIds));
            } else {
              setSelectedRows(new Set());
            }
          }}
        />
      ),
      cell: ({ row }) => (
        <input
          type="checkbox"
          checked={selectedRows.has(row.original.id)}
          onChange={(e) => {
            const newSelected = new Set(selectedRows);
            if (e.target.checked) {
              newSelected.add(row.original.id);
            } else {
              newSelected.delete(row.original.id);
            }
            setSelectedRows(newSelected);
          }}
        />
      ),
    },
  ];

  // API mutations
  const addNewBlacklistMutation = useAddBlacklist();
  const deleteBlacklistMutation = useDeleteBlacklist();
  const updateDeviceMutation = useUpdateDeviceBlacklist();

  // Thêm blacklist
  const handleAddNewBlacklist = async (blacklistData: {
    appName: string;
    processName: string;
  }) => {
    try {
      await addNewBlacklistMutation.mutateAsync(blacklistData);
      toast.success("Thêm mới thành công!");
    } catch (error: any) {
      console.error("Add blacklist error:", error);
      toast.error("Thêm mới thất bại!");
    }
  };

  // Xoá blacklist
  const handleDeleteBlacklist = async () => {
    try {
      for (const blacklistId of selectedRows) {
        await deleteBlacklistMutation.mutateAsync(blacklistId);
      }
      toast.success("Xóa thành công!");
      setSelectedRows(new Set());
    } catch (error: any) {
      console.error("Delete blacklist error:", error);
      toast.error("Xóa thất bại!");
    }
  };

  const handleUpdateDevice = async (target: string | string[]) => {
    const targets = Array.isArray(target) ? target : [target];
    try {
      for (const roomName of targets) {
        await updateDeviceMutation.mutateAsync({
          roomName,
          data: {},
        });
        toast.success(`Đã gửi cập nhật cho ${roomName}`);
      }
    } catch (e: any) {
      console.error("Update device error:", e);
      toast.error("Có lỗi xảy ra khi cập nhật!");
    }
  };

  return (
    <BlackListManagerTemplate<Blacklist>
      title="Danh sách các ứng dụng bị chặn"
      description="Quản lý các ứng dụng và tiến trình bị chặn trên thiết bị"
      data={blacklist}
      columns={columns}
      isLoading={isLoading}
      rooms={roomData}
      onAdd={handleAddNewBlacklist}
      onDelete={handleDeleteBlacklist}
      onUpdate={handleUpdateDevice}
    />
  );
}