lti-web-client/src/components/pages/uniformity/UniformityTable.tsx

'use client';

import React, { useCallback, useState, useEffect, useMemo } from 'react';
import useSWR from 'swr';
import { Icon } from '@iconify/react';
import { ColumnDef, SortingState } from '@tanstack/react-table';
import { cn, formatDate } from '@/lib/helper';
import Button from '@/components/Button';
import UniformityChart from '@/components/pages/uniformity/UniformityChart';
// import UniformityStat from '@/components/pages/uniformity/chart/UniformityStat';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { UniformityApi } from '@/services/api/uniformity';
import { type Uniformity } from '@/types/api/uniformity/uniformity';
import { isResponseSuccess } from '@/lib/api-helper';
import Table from '@/components/Table';
import Badge from '@/components/Badge';
import CheckboxInput from '@/components/input/CheckboxInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import toast from 'react-hot-toast';
import Card from '@/components/Card';
import UniformityTableSkeleton from './skeleton/UniformityTableSkeleton';
import RequirePermission from '@/components/helper/RequirePermission';
import { useUniformityStore } from '@/stores/uniformity/uniformity.store';
import FloatingActionsButton from '@/components/FloatingActionsButton';

const statusColorMap: Record<string, string> = {
  APPROVED: 'bg-[#00D39033]',
  REJECTED: 'bg-error/10',
  CREATED: 'bg-[#f3f3f4]',
};

const statusIndicatorColorMap: Record<string, string> = {
  APPROVED: 'bg-[#008000]',
  REJECTED: 'bg-error',
  CREATED: 'bg-[#D9D9D9]',
};

const statusTextMap: Record<string, string> = {
  APPROVED: 'Disetujui',
  REJECTED: 'Ditolak',
  CREATED: 'Pengajuan',
};

const getStatusColor = (status: string): string => {
  return statusColorMap[status] || 'bg-info';
};

const getStatusIndicatorColor = (status: string): string => {
  return statusIndicatorColorMap[status] || 'bg-info';
};

const getStatusText = (status: string): string => {
  return statusTextMap[status] || status;
};

const isUniformityLocked = (uniformity: Uniformity): boolean => {
  return uniformity.status === 'APPROVED' || uniformity.status === 'REJECTED';
};

const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
  const isSuccess = useUniformityStore((s) => s.isSuccess);
  const setIsSuccess = useUniformityStore((s) => s.setIsSuccess);

  const {
    state: tableFilterState,
    setPage,
    toQueryString: getTableFilterQueryString,
  } = useTableFilter({
    initial: {
      search: '',
    },
    paramMap: {
      page: 'page',
      pageSize: 'limit',
      search: 'search',
    },
  });

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
  const [selectedUniformity] = useState<Uniformity | undefined>(undefined);
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
  const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);

  const singleDeleteModal = useModal();
  const bulkDeleteModal = useModal();
  const successModal = useModal();
  const singleApproveModal = useModal();
  const singleRejectModal = useModal();
  const bulkApproveModal = useModal();
  const bulkRejectModal = useModal();

  const {
    data: uniformities,
    isLoading,
    mutate: refreshUniformities,
  } = useSWR(
    `${UniformityApi.basePath}${getTableFilterQueryString()}`,
    UniformityApi.getAllFetcher
  );

  const selectedRowIds = useMemo(() => {
    return Object.keys(rowSelection)
      .filter((key) => rowSelection[key])
      .map((key) => parseInt(key));
  }, [rowSelection]);

  const selectedUniformities = useMemo(() => {
    if (!isResponseSuccess(uniformities) || !uniformities.data) return [];
    return uniformities.data.filter((u) => selectedRowIds.includes(u.id));
  }, [uniformities, selectedRowIds]);

  const canApproveReject = useMemo(() => {
    return (
      selectedUniformities.length > 0 &&
      selectedUniformities.every((u) => u.status === 'CREATED')
    );
  }, [selectedUniformities]);

  useEffect(() => {
    if (isSuccess) {
      successModal.openModal();
    }
  }, [isSuccess, successModal]);

  const handleSuccessModalClose = () => {
    successModal.closeModal();
    setIsSuccess(false);
  };

  const singleDeleteHandler = useCallback(async () => {
    setIsDeleteLoading(true);

    await UniformityApi.delete(selectedUniformity?.id as number);
    refreshUniformities();

    singleDeleteModal.closeModal();
    toast.success('Successfully delete Uniformity!');
    setIsDeleteLoading(false);
  }, [selectedUniformity?.id, refreshUniformities, singleDeleteModal]);

  const singleApproveHandler = useCallback(async () => {
    setIsDeleteLoading(true);

    try {
      await UniformityApi.approve([selectedUniformity?.id as number]);
      refreshUniformities();

      singleApproveModal.closeModal();
      toast.success('Successfully approved Uniformity!');
    } catch {
      toast.error('Failed to approve Uniformity');
    } finally {
      setIsDeleteLoading(false);
    }
  }, [selectedUniformity?.id, refreshUniformities, singleApproveModal]);

  const singleRejectHandler = useCallback(async () => {
    setIsDeleteLoading(true);

    try {
      await UniformityApi.reject([selectedUniformity?.id as number]);
      refreshUniformities();

      singleRejectModal.closeModal();
      toast.success('Successfully rejected Uniformity!');
    } catch {
      toast.error('Failed to reject Uniformity');
    } finally {
      setIsDeleteLoading(false);
    }
  }, [selectedUniformity?.id, refreshUniformities, singleRejectModal]);

  const handleBulkDelete = useCallback(() => {
    bulkDeleteModal.openModal();
  }, [bulkDeleteModal]);

  const bulkDeleteHandler = useCallback(async () => {
    setIsBulkActionLoading(true);

    try {
      await UniformityApi.bulkDelete(selectedRowIds);

      setRowSelection({});
      refreshUniformities();

      bulkDeleteModal.closeModal();
      toast.success(
        `Successfully deleted ${selectedRowIds.length} Uniformity data!`
      );
    } catch {
      toast.error('Failed to delete Uniformity data');
    } finally {
      setIsBulkActionLoading(false);
    }
  }, [selectedRowIds, refreshUniformities, bulkDeleteModal]);

  const handleCloseFab = useCallback(() => {
    setRowSelection({});
  }, []);

  const handleBulkApprove = useCallback(() => {
    bulkApproveModal.openModal();
  }, [bulkApproveModal]);

  const handleBulkReject = useCallback(() => {
    bulkRejectModal.openModal();
  }, [bulkRejectModal]);

  const bulkApproveHandler = useCallback(async () => {
    setIsBulkActionLoading(true);

    try {
      await UniformityApi.approve(selectedRowIds);

      setRowSelection({});
      refreshUniformities();

      bulkApproveModal.closeModal();
      toast.success(
        `Successfully approved ${selectedRowIds.length} Uniformity data!`
      );
    } catch {
      toast.error('Failed to approve Uniformity data');
    } finally {
      setIsBulkActionLoading(false);
    }
  }, [selectedRowIds, refreshUniformities, bulkApproveModal]);

  const bulkRejectHandler = useCallback(async () => {
    setIsBulkActionLoading(true);

    try {
      await UniformityApi.reject(selectedRowIds);

      setRowSelection({});
      refreshUniformities();

      bulkRejectModal.closeModal();
      toast.success(
        `Successfully rejected ${selectedRowIds.length} Uniformity data!`
      );
    } catch (error) {
      toast.error('Failed to reject Uniformity data');
    } finally {
      setIsBulkActionLoading(false);
    }
  }, [selectedRowIds, refreshUniformities, bulkRejectModal]);

  useEffect(() => {
    if (isResponseSuccess(uniformities) && uniformities.data) {
      const newSelection: Record<string, boolean> = {};

      Object.entries(rowSelection).forEach(([rowId, isSelected]) => {
        if (isSelected) {
          const uniformity = uniformities.data.find(
            (r) => r.id === parseInt(rowId)
          );
          if (uniformity && !isUniformityLocked(uniformity)) {
            newSelection[rowId] = true;
          }
        }
      });

      if (
        Object.keys(newSelection).length !== Object.keys(rowSelection).length
      ) {
        setRowSelection(newSelection);
      }
    }
  }, [uniformities, rowSelection]);

  // ===== TABLE COLUMNS DEFINITION =====
  const uniformityColumns: ColumnDef<Uniformity>[] = useMemo(
    () => [
      {
        id: 'select',
        header: ({ table }) => {
          const allRows = table.getRowModel().rows;
          const selectableRows = allRows.filter((row) => {
            const uniformity = row.original;
            return !isUniformityLocked(uniformity);
          });

          const hasNoSelectableRows = selectableRows.length === 0;

          const handleSelectAll = () => {
            const isAllSelected = selectableRows.every((row) =>
              row.getIsSelected()
            );

            selectableRows.forEach((row) => {
              row.toggleSelected(!isAllSelected);
            });
          };

          const isAllSelected =
            selectableRows.length > 0 &&
            selectableRows.every((row) => row.getIsSelected());

          const isSomeSelected = selectableRows.some((row) =>
            row.getIsSelected()
          );

          return (
            <div className='w-full flex flex-row justify-center'>
              <CheckboxInput
                name='allRow'
                checked={isAllSelected}
                indeterminate={isSomeSelected && !isAllSelected}
                onChange={handleSelectAll}
                disabled={hasNoSelectableRows}
              />
            </div>
          );
        },
        cell: ({ row }) => {
          const uniformity = row.original;
          const isDisabled = isUniformityLocked(uniformity);

          return (
            <div className={cn({ 'opacity-50': isDisabled })}>
              <CheckboxInput
                name='row'
                checked={row.getIsSelected()}
                indeterminate={row.getIsSomeSelected()}
                onChange={row.getToggleSelectedHandler()}
                disabled={isDisabled}
              />
            </div>
          );
        },
      },
      {
        accessorKey: 'location.name',
        header: 'Lokasi',
        cell: (props) => props.row.original.location_name || '-',
      },
      {
        accessorKey: 'flock_name',
        header: 'Flock',
        cell: (props) => props.row.original.flock_name || '-',
      },
      {
        accessorKey: 'kandang_name',
        header: 'Kandang',
        cell: (props) => props.row.original.kandang_name || '-',
      },
      {
        accessorKey: 'week',
        header: 'Tanggal (Week)',
        cell: (props) =>
          `${formatDate(props.row.original.applied_at, 'DD MMM YYYY')} (${props.row.original.week})`,
      },
      {
        accessorKey: 'status',
        header: 'Status',
        cell: (props) => {
          const status = props.row.original.status;
          return (
            <div className='w-full'>
              <Badge
                statusIndicator={true}
                variant='soft'
                className={{
                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
                  status: getStatusIndicatorColor(status),
                }}
              >
                {getStatusText(status)}
              </Badge>
            </div>
          );
        },
      },
      {
        accessorKey: 'uniformity',
        header: 'Uniformity',
        cell: (props) => {
          const uniformity = props.row.original.uniformity;
          return <span>{uniformity}%</span>;
        },
      },
    ],
    []
  );

  return (
    <>
      <section className='[&_button]:w-full [&_button]:sm:w-fit [&_button]:last:mt-2 [&_button]:last:sm:mt-0 sm:flex sm:justify-between grid grid-cols-1 sm:gap-0 gap-2'>
        <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
          <RequirePermission permissions='lti.production.uniformity.create'>
            <Button color='primary' href='/uniformity/add'>
              <Icon icon='ic:round-plus' width={18} height={18} />
              Add Uniformity
            </Button>
          </RequirePermission>
        </div>

        <div className='sm:flex gap-2'>
          <Button variant='outline'>
            <Icon icon='heroicons:funnel' width={18} height={18} />
            Filter
          </Button>

          <Button variant='outline'>
            <Icon icon='heroicons:cloud-arrow-down' width={18} height={18} />
            Export
          </Button>
        </div>
      </section>

      <div className='my-4 divider'></div>

      {/*<section>
        <UniformityStat />
      </section>*/}

      <div className='my-4'></div>

      <section>
        <UniformityChart />
      </section>

      <Card
        variant='bordered'
        className={{
          wrapper: 'my-4 w-full relative',
        }}
      >
        <Table<Uniformity>
          data={isResponseSuccess(uniformities) ? uniformities?.data : []}
          columns={uniformityColumns}
          pageSize={tableFilterState.pageSize}
          page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
          totalItems={
            isResponseSuccess(uniformities)
              ? uniformities?.meta?.total_results
              : 0
          }
          onPageChange={setPage}
          isLoading={isLoading}
          sorting={sorting}
          setSorting={setSorting}
          rowSelection={rowSelection}
          setRowSelection={setRowSelection}
          className={{
            containerClassName: cn({
              'mb-20':
                isResponseSuccess(uniformities) &&
                uniformities?.data?.length === 0,
            }),
            tableWrapperClassName: 'overflow-x-auto min-h-full ',
            tableClassName: 'font-inter w-full table-auto min-h-full!',
            headerRowClassName: 'border-b border-b-gray-200',
            headerColumnClassName:
              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
            bodyRowClassName: 'border-b border-b-gray-200',
            bodyColumnClassName:
              'px-6 py-3 last:flex last:flex-row last:justify-end',
          }}
          emptyContent={<UniformityTableSkeleton />}
        />

        <ConfirmationModal
          ref={singleDeleteModal.ref}
          type='error'
          iconPosition='left'
          iconSize={32}
          text={`Apakah anda yakin ingin menghapus data Uniformity ini?`}
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'error',
            isLoading: isDeleteLoading,
            onClick: singleDeleteHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          {' '}
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={[
                {
                  id: 'tanggal',
                  label: 'Tanggal',
                  value: '28 Desember 2025',
                },
                {
                  id: 'lokasi-farm',
                  label: 'Lokasi Farm',
                  value: 'Farm A',
                },
                {
                  id: 'project-flock',
                  label: 'Project Flock',
                  value: 'Flock 2025-01',
                },
                {
                  id: 'kandang',
                  label: 'Kandang',
                  value: 'Kandang 1',
                },
                {
                  id: 'file-uniformity',
                  label: 'File Uniformity',
                  value: 'uniformity_data.xlsx',
                },
                {
                  id: 'status',
                  label: 'Status',
                  value: 'Disetujui',
                },
              ]}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={6}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={bulkDeleteModal.ref}
          type='error'
          iconPosition='left'
          iconSize={32}
          text={`Apakah anda yakin ingin menghapus ${selectedRowIds.length} data Uniformity yang dipilih?`}
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'error',
            isLoading: isBulkActionLoading,
            onClick: bulkDeleteHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={[
                {
                  id: 'tanggal',
                  label: 'Tanggal',
                  value: '28 Desember 2025',
                },
                {
                  id: 'lokasi-farm',
                  label: 'Lokasi Farm',
                  value: 'Farm A',
                },
                {
                  id: 'project-flock',
                  label: 'Project Flock',
                  value: 'Flock 2025-01',
                },
                {
                  id: 'kandang',
                  label: 'Kandang',
                  value: 'Kandang 1',
                },
                {
                  id: 'file-uniformity',
                  label: 'File Uniformity',
                  value: 'uniformity_data.xlsx',
                },
                {
                  id: 'status',
                  label: 'Status',
                  value: 'Disetujui',
                },
              ]}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={6}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={successModal.ref}
          type='success'
          iconPosition='left'
          iconSize={32}
          text='Data Berhasil Ditambahkan'
          subtitleText='Data uniformity telah berhasil disimpan.'
          closeOnBackdrop={false}
          primaryButton={{
            text: 'Ok',
            color: 'primary',
            onClick: handleSuccessModalClose,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={[
                {
                  id: 'tanggal',
                  label: 'Tanggal',
                  value: '28 Desember 2025',
                },
                {
                  id: 'lokasi-farm',
                  label: 'Lokasi Farm',
                  value: 'Farm A',
                },
                {
                  id: 'project-flock',
                  label: 'Project Flock',
                  value: 'Flock 2025-01',
                },
                {
                  id: 'kandang',
                  label: 'Kandang',
                  value: 'Kandang 1',
                },
                {
                  id: 'file-uniformity',
                  label: 'File Uniformity',
                  value: 'uniformity_data.xlsx',
                },
                {
                  id: 'status',
                  label: 'Status',
                  value: 'Disetujui',
                },
              ]}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={6}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={singleApproveModal.ref}
          type='success'
          iconPosition='left'
          iconSize={32}
          text='Apakah anda yakin ingin menyetujui data Uniformity ini?'
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'success',
            isLoading: isDeleteLoading,
            onClick: singleApproveHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={[
                {
                  id: 'tanggal',
                  label: 'Tanggal',
                  value: selectedUniformity
                    ? formatDate(selectedUniformity.applied_at, 'DD MMM YYYY')
                    : '-',
                },
                {
                  id: 'lokasi-farm',
                  label: 'Lokasi Farm',
                  value: selectedUniformity?.location_name || '-',
                },
                {
                  id: 'project-flock',
                  label: 'Project Flock',
                  value: selectedUniformity?.flock_name || '-',
                },
                {
                  id: 'kandang',
                  label: 'Kandang',
                  value: selectedUniformity?.kandang_name || '-',
                },
                {
                  id: 'uniformity',
                  label: 'Uniformity',
                  value: `${selectedUniformity?.uniformity || 0}%`,
                },
                {
                  id: 'status',
                  label: 'Status',
                  value: getStatusText(selectedUniformity?.status || 'CREATED'),
                },
              ]}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={6}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={singleRejectModal.ref}
          type='error'
          iconPosition='left'
          iconSize={32}
          text='Apakah anda yakin ingin menolak data Uniformity ini?'
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'error',
            isLoading: isDeleteLoading,
            onClick: singleRejectHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={[
                {
                  id: 'tanggal',
                  label: 'Tanggal',
                  value: selectedUniformity
                    ? formatDate(selectedUniformity.applied_at, 'DD MMM YYYY')
                    : '-',
                },
                {
                  id: 'lokasi-farm',
                  label: 'Lokasi Farm',
                  value: selectedUniformity?.location_name || '-',
                },
                {
                  id: 'project-flock',
                  label: 'Project Flock',
                  value: selectedUniformity?.flock_name || '-',
                },
                {
                  id: 'kandang',
                  label: 'Kandang',
                  value: selectedUniformity?.kandang_name || '-',
                },
                {
                  id: 'uniformity',
                  label: 'Uniformity',
                  value: `${selectedUniformity?.uniformity || 0}%`,
                },
                {
                  id: 'status',
                  label: 'Status',
                  value: getStatusText(selectedUniformity?.status || 'CREATED'),
                },
              ]}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={6}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={bulkApproveModal.ref}
          type='success'
          iconPosition='left'
          iconSize={32}
          text={`Apakah anda yakin ingin menyetujui ${selectedRowIds.length} data Uniformity yang dipilih?`}
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'success',
            isLoading: isBulkActionLoading,
            onClick: bulkApproveHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={selectedUniformities.map((u, index) => ({
                id: `bulk-approve-${index}`,
                label: `${index + 1}. ${u.location_name}`,
                value: `${u.flock_name} - ${u.kandang_name}`,
              }))}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={selectedUniformities.length}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        <ConfirmationModal
          ref={bulkRejectModal.ref}
          type='error'
          iconPosition='left'
          iconSize={32}
          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
          secondaryButton={{
            text: 'Tidak',
          }}
          primaryButton={{
            text: 'Ya',
            color: 'error',
            isLoading: isBulkActionLoading,
            onClick: bulkRejectHandler,
          }}
          className={{
            modalBox: 'rounded-2xl',
          }}
        >
          <div className='flex flex-col gap-4 mt-4'>
            <Table
              data={selectedUniformities.map((u, index) => ({
                id: `bulk-reject-${index}`,
                label: `${index + 1}. ${u.location_name}`,
                value: `${u.flock_name} - ${u.kandang_name}`,
              }))}
              columns={[
                {
                  accessorKey: 'label',
                  header: 'Label',
                  cell: (props) => props.row.original.label,
                },
                {
                  accessorKey: 'value',
                  header: 'Value',
                  cell: (props) => <span>{props.row.original.value}</span>,
                },
              ]}
              pageSize={selectedUniformities.length}
              className={{
                containerClassName: 'mb-0',
                paginationClassName: 'hidden',
              }}
            />
          </div>
        </ConfirmationModal>

        {/* Floating Actions Button */}
        <FloatingActionsButton
          actions={[
            {
              action: 'DELETE',
              icon: 'mdi:delete-outline',
              label: 'Delete',
              onClick: handleBulkDelete,
              permissions: 'lti.production.uniformity.delete',
            },
          ]}
          approvals={[
            {
              action: 'APPROVED',
              icon: 'mdi:check-circle-outline',
              label: 'Approve',
              onClick: handleBulkApprove,
              permissions: 'lti.production.uniformity.approve',
              disabled: !canApproveReject,
            },
            {
              action: 'REJECTED',
              icon: 'mdi:close-circle-outline',
              label: 'Reject',
              onClick: handleBulkReject,
              permissions: 'lti.production.uniformity.approve',
              disabled: !canApproveReject,
            },
          ]}
          selectedRowIds={selectedRowIds}
          onClose={handleCloseFab}
        />
      </Card>
    </>
  );
};

export default UniformityTable;