TTMT.ManageWebGUI/src/routes/_authenticated/blacklist/index.tsx

import { API_ENDPOINTS, BASE_URL } from "@/config/api";
import { useMutationData } from "@/hooks/useMutationData";
import { useDeleteData } from "@/hooks/useDeleteData";
import { useQueryData } from "@/hooks/useQueryData";
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("/_authenticated/blacklist/")({
  head: () => ({ meta: [{ title: "Danh sách các ứng dụng bị chặn" }] }),
  component: BlacklistComponent,
});

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

  // Lấy danh sách blacklist
  const { data, isLoading } = useQueryData({
    queryKey: ["blacklist"],
    url: BASE_URL + API_ENDPOINTS.APP_VERSION.GET_VERSION,
  });

  // Lấy danh sách phòng
  const { data: roomData } = useQueryData({
    queryKey: ["rooms"],
    url: BASE_URL + API_ENDPOINTS.DEVICE_COMM.GET_ROOM_LIST,
  });

  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) {
              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 thêm blacklist
  const addNewBlacklistMutation = useMutationData<void>({
    url: "",
    method: "POST",
    onSuccess: () => toast.success("Thêm mới thành công!"),
    onError: () => toast.error("Thêm mới thất bại!"),
  });

  // API cập nhật thiết bị
  const updateDeviceMutation = useMutationData<void>({
    url: "",
    method: "POST",
    onSuccess: () => toast.success("Cập nhật thành công!"),
    onError: () => toast.error("Cập nhật thất bại!"),
  });

  // API xoá
  const deleteBlacklistMutation = useDeleteData<void>({
    invalidate: [["blacklist"]],
    onSuccess: () => toast.success("Xóa thành công!"),
    onError: () => toast.error("Xóa thất bại!"),
  });

  // Thêm blacklist
  const handleAddNewBlacklist = async (blacklist: {
    appName: string;
    processName: string;
  }) => {
    try {
      await addNewBlacklistMutation.mutateAsync({
        url: BASE_URL + API_ENDPOINTS.APP_VERSION.ADD_BLACKLIST,
        method: "POST",
        config: { headers: { "Content-Type": "application/json" } },
        data: undefined,
      });
    } catch {
      toast.error("Thêm mới thất bại!");
    }
  };

  // Xoá blacklist
  const handleDeleteBlacklist = async () => {
    try {
      for (const blacklistId of selectedRows) {
        await deleteBlacklistMutation.mutateAsync({
          url:
            BASE_URL + API_ENDPOINTS.APP_VERSION.DELETE_BLACKLIST(blacklistId),
          config: { headers: { "Content-Type": "application/json" } },
        });
      }
      setSelectedRows(new Set());
    } catch {}
  };

  const handleUpdateDevice = async (target: string | string[]) => {
    const targets = Array.isArray(target) ? target : [target];
    try {
      for (const deviceId of targets) {
        await updateDeviceMutation.mutateAsync({
          url: BASE_URL + API_ENDPOINTS.DEVICE_COMM.UPDATE_BLACKLIST(deviceId),
          data: undefined,
        });
        toast.success(`Đã gửi cập nhật cho ${deviceId}`);
      }
    } catch (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}
      onUpdate={handleUpdateDevice}  
    />
  );
}