diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx index feb1d3d2..1823b41a 100644 --- a/src/app/production/chickin/add/page.tsx +++ b/src/app/production/chickin/add/page.tsx @@ -15,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang'; import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang'; import { Icon } from '@iconify/react'; import { useRouter, useSearchParams } from 'next/navigation'; -import { use, useEffect, useState } from 'react'; +import { useState } from 'react'; import useSWR from 'swr'; @@ -34,9 +34,8 @@ const AddChickin = () => { const [selectedKandang, setSelectedKandang] = useState( undefined ); - const [projectFlockKandang, setProjectFlockKandang] = useState< - BaseApiResponse - >(); + const [projectFlockKandang, setProjectFlockKandang] = + useState>(); const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] = useState(false); const [searchProjectFlock, setSearchProjectFlock] = useState(''); @@ -87,7 +86,7 @@ const AddChickin = () => { } // Handle Function - const handleChickinClick = async (kandang: Kandang) => { + const handleChickinClick = async (kandang: Kandang) => { setIsLoadingProjectFlockKandang(true); setSelectedKandang(kandang); const ProjectFlockKandangRes = await ProjectFlockApi.customRequest< @@ -100,9 +99,7 @@ const AddChickin = () => { kandang_id: kandang.id, }, }); - if ( - isResponseSuccess(ProjectFlockKandangRes) - ) { + if (isResponseSuccess(ProjectFlockKandangRes)) { setProjectFlockKandang(ProjectFlockKandangRes); setIsLoadingProjectFlockKandang(false); if ( @@ -110,7 +107,7 @@ const AddChickin = () => { ProjectFlockKandangRes.data.available_quantity > 0 ) { chickinModal.openModal(); - }else{ + } else { alertModal.openModal(); } } diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx index 42aa5bf8..d62c92bf 100644 --- a/src/app/production/chickin/detail/page.tsx +++ b/src/app/production/chickin/detail/page.tsx @@ -13,7 +13,6 @@ const DetailChickin = () => { const { data: chickin, isLoading, - mutate: refreshChickin, } = useSWR( chickinId, (id: number) => ChickinApi.getSingle(id) diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx index bf0da188..bea96b84 100644 --- a/src/app/production/project-flock/detail/page.tsx +++ b/src/app/production/project-flock/detail/page.tsx @@ -1,46 +1,51 @@ -'use client' +'use client'; - -import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"; -import { isResponseError, isResponseSuccess } from "@/lib/api-helper"; -import { ProjectFlockApi } from "@/services/api/production"; -import { useRouter, useSearchParams } from "next/navigation"; -import useSWR from "swr"; +import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm'; +import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; +import { ProjectFlockApi } from '@/services/api/production'; +import { useRouter, useSearchParams } from 'next/navigation'; +import useSWR from 'swr'; const ProjectFlockDetail = () => { const router = useRouter(); const searchParams = useSearchParams(); - const projectFlockId = searchParams.get("projectFlockId"); + const projectFlockId = searchParams.get('projectFlockId'); - const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR( - projectFlockId, - (id: number) => ProjectFlockApi.getSingle(id) - ); + const { + data: projectFlock, + isLoading: isLoadingProjectFlock, + mutate: refreshProjectFlock, + } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id)); - if(!projectFlockId){ + if (!projectFlockId) { router.back(); return ( -
- +
+
); } - if(!isLoadingProjectFlock && (!projectFlock || isResponseError(projectFlock))){ - router.replace("/404"); + if ( + !isLoadingProjectFlock && + (!projectFlock || isResponseError(projectFlock)) + ) { + router.replace('/404'); return; } return ( -
- {isLoadingProjectFlock && } +
+ {isLoadingProjectFlock && ( + + )} {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && ( - + )}
- ) -} + ); +}; -export default ProjectFlockDetail; \ No newline at end of file +export default ProjectFlockDetail; diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx index fdb8775d..d264d9e4 100644 --- a/src/app/production/project-flock/page.tsx +++ b/src/app/production/project-flock/page.tsx @@ -1,4 +1,3 @@ -import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm" import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable"; const ProjectFlock = () => { diff --git a/src/components/PillBadge.tsx b/src/components/PillBadge.tsx new file mode 100644 index 00000000..827177a9 --- /dev/null +++ b/src/components/PillBadge.tsx @@ -0,0 +1,31 @@ +import { ReactNode } from 'react'; +import { cn } from '@/lib/helper'; + +interface PillBadgeProps { + content: ReactNode; + color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray'; + className?: string; +} + +const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => { + return ( +
+ {content} +
+ ); +}; + +export default PillBadge; diff --git a/src/components/Table.tsx b/src/components/Table.tsx index cfd77df6..d3498e33 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -48,6 +48,8 @@ export interface TableProps { sorting?: SortingState; setSorting?: OnChangeFn; manualSorting?: boolean; + rowSelection?: Record; + setRowSelection?: OnChangeFn>; } const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}]; @@ -86,6 +88,8 @@ const Table = ({ sorting, setSorting, manualSorting = false, + rowSelection, + setRowSelection, }: TableProps) => { const isServerSideTable = totalItems !== undefined && @@ -137,6 +141,15 @@ const Table = ({ }; } + if (rowSelection && setRowSelection) { + tableOptions.onRowSelectionChange = setRowSelection; + tableOptions.state = { + ...tableOptions.state, + rowSelection, + }; + tableOptions.getRowId = (row) => (row as { id: string }).id; + } + const table = useReactTable(tableOptions); const { setPageSize } = table; diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx new file mode 100644 index 00000000..fb0c95c7 --- /dev/null +++ b/src/components/input/CheckboxInput.tsx @@ -0,0 +1,89 @@ +'use client'; + +import { HTMLProps, useEffect, useRef } from 'react'; +import { cn } from '@/lib/helper'; + +interface CheckboxInputProps extends HTMLProps { + name: string; + label?: string; + indeterminate?: boolean; + classNames?: { + wrapper?: string; + inputWrapper?: string; + checkbox?: string; + label?: string; + }; + isError?: boolean; + isValid?: boolean; + errorMessage?: string; +} + +const CheckboxInput = ({ + indeterminate, + name, + label, + className, + classNames, + isValid, + isError, + errorMessage, + ...rest +}: CheckboxInputProps) => { + const ref = useRef(null!); + + useEffect(() => { + if (typeof indeterminate === 'boolean') { + ref.current.indeterminate = !rest.checked && indeterminate; + } + }, [ref, indeterminate]); + + return ( +
+
+ + + {label && ( + + )} +
+ + {errorMessage && {errorMessage}} +
+ ); +}; + +export default CheckboxInput; diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx index 95361278..3f4afc47 100644 --- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx +++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx @@ -1,6 +1,7 @@ 'use client'; import Button from '@/components/Button'; +import CheckboxInput from '@/components/input/CheckboxInput'; import DebouncedTextInput from '@/components/input/DebouncedTextInput'; import SelectInput, { OptionType } from '@/components/input/SelectInput'; import { useModal } from '@/components/Modal'; @@ -120,10 +121,15 @@ const ProjectFlockTable = () => { periodFilter: 'period', }, }); + + // State + const [rowSelection, setRowSelection] = useState>({}); + const selectedRowIds = Object.keys(rowSelection) + .filter((id) => rowSelection[id]) + .map((id) => parseInt(id)); const [locationSelectInputValue, setLocationSelectInputValue] = useState(''); const [areaSelectInputValue, setAreaSelectInputValue] = useState(''); const [kandangSelectInputValue, setKandangSelectInputValue] = useState(''); - const [selectedArea, setSelectedArea] = useState(null); const [selectedLocation, setSelectedLocation] = useState( null @@ -132,6 +138,14 @@ const ProjectFlockTable = () => { null ); const [periodInputValue, setPeriodInputValue] = useState(null); + const [sorting, setSorting] = useState([]); + const [selectedProjectFlock, setSelectedProjectFlock] = + useState(); + const deleteModal = useModal(); + const confirmModal = useModal(); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + const [selectedFlocks, setSelectedFlocks] = useState([]); + const [isApproveLoading, setIsApproveLoading] = useState(false); // Fetch Data const { @@ -193,16 +207,6 @@ const ProjectFlockTable = () => { })) : []; - // State - const [sorting, setSorting] = useState([]); - const [selectedProjectFlock, setSelectedProjectFlock] = - useState(); - const deleteModal = useModal(); - const confirmModal = useModal(); - const [isDeleteLoading, setIsDeleteLoading] = useState(false); - const [selectedIds, setSelectedIds] = useState([]); - const [selectedFlocks, setSelectedFlocks] = useState([]); - const [isApproveLoading, setIsApproveLoading] = useState(false); // Handler const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => { const newVal = val as OptionType; @@ -221,40 +225,6 @@ const ProjectFlockTable = () => { const searchChangeHandler: ChangeEventHandler = (e) => { updateFilter('search', e.target.value); }; - const handleSelectAll = (checked: boolean) => { - if (checked && isResponseSuccess(projectFlocks)) { - const allIds = projectFlocks.data - .filter((item) => item.approval.step_name === 'Pengajuan') - .map((item) => item.id); - setSelectedIds(allIds); - setSelectedFlocks( - projectFlocks.data.filter( - (item) => item.approval.step_name === 'Pengajuan' - ) - ); - } else { - setSelectedIds([]); - setSelectedFlocks([]); - } - }; - - const handleSelectRow = (id: number, checked: boolean) => { - if (!isResponseSuccess(projectFlocks)) return; - - const targetFlock = projectFlocks.data.find((item) => item.id === id); - - if (!targetFlock) return; - - if (checked) { - setSelectedIds((prev) => [...prev, id]); - setSelectedFlocks((prev) => [...(prev || []), targetFlock]); - } else { - setSelectedIds((prev) => prev.filter((val) => val !== id)); - setSelectedFlocks((prev) => - (prev || []).filter((flock) => flock.id !== id) - ); - } - }; const confirmationModalApproveClickHandler = async () => { setIsApproveLoading(true); @@ -265,7 +235,7 @@ const ProjectFlockTable = () => { method: 'POST', payload: { action: 'APPROVED', - approvable_ids: selectedFlocks.map((flock) => flock.id), + approvable_ids: selectedRowIds.map((id) => id), }, }); @@ -277,8 +247,7 @@ const ProjectFlockTable = () => { toast.error(approveProjectFlockRes?.message as string); confirmModal.closeModal(); } - setSelectedIds([]); - setSelectedFlocks([]); + setRowSelection({}); refreshProjectFlocks(); setIsApproveLoading(false); }; @@ -301,11 +270,9 @@ const ProjectFlockTable = () => { variant='outline' color='success' onClick={() => { - if (selectedIds.length > 0) { - confirmModal.openModal(); - } + confirmModal.openModal(); }} - disabled={!(selectedIds.length > 0)} + disabled={selectedRowIds.length === 0} className='w-full sm:w-fit' > @@ -400,33 +367,58 @@ const ProjectFlockTable = () => { columns={[ { id: 'select', - header: () => { - const allSelected = - isResponseSuccess(projectFlocks) && - projectFlocks.data.length > 0 && - selectedIds.length === projectFlocks.data.length; - return ( - handleSelectAll(e.target.checked)} - /> + header: ({ table }) => { + const allRows = table.getRowModel().rows; + const selectableRows = allRows.filter( + (row) => row.original?.approval?.step_number == 1 ); - }, - cell: (props) => { - const id = props.row.original.id; - const isChecked = selectedIds.includes(id); + + const allSelected = selectableRows.every((row) => + row.getIsSelected() + ) && selectableRows.length != 0; + + const someSelected = + selectableRows.some((row) => row.getIsSelected()) && + !allSelected; + + const toggleSelectableRows = () => { + const shouldSelect = !allSelected; + selectableRows.forEach((row) => + row.toggleSelected(shouldSelect) + ); + }; return ( - + flock.approval.step_number == 1 + ).length == 0 + } + /> +
+ ); + }, + cell: ({ row }) => { + return ( + handleSelectRow(id, e.target.checked)} + disabled={ + !row.getCanSelect() || + row.original.approval.step_number != 1 + } + indeterminate={row.getIsSomeSelected()} + onChange={row.getToggleSelectedHandler()} /> ); }, @@ -541,6 +533,8 @@ const ProjectFlockTable = () => { isLoading={isLoading} sorting={sorting} setSorting={setSorting} + rowSelection={rowSelection} + setRowSelection={setRowSelection} className={{ containerClassName: cn({ 'mb-20': @@ -578,18 +572,19 @@ const ProjectFlockTable = () => { 0 - ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks - .map( - (flock) => - `${flock.flock?.name ?? '(Tanpa nama)'} - ${ - flock.area?.name ?? '-' - }` - ) - .join(', ')})` - : 'Tidak ada Project Flock yang dipilih.' - } + text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`} + // text={ + // selectedFlocks.length > 0 + // ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks + // .map( + // (flock) => + // `${flock.flock?.name ?? '(Tanpa nama)'} - ${ + // flock.area?.name ?? '-' + // }` + // ) + // .join(', ')})` + // : 'Tidak ada Project Flock yang dipilih.' + // } secondaryButton={{ text: 'Tidak', }} diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx index d098aba3..14eee9b7 100644 --- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx +++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx @@ -14,7 +14,7 @@ import { Icon } from '@iconify/react'; import { useFormik } from 'formik'; import { useRouter } from 'next/navigation'; import { useEffect, useMemo, useState } from 'react'; -import useSWR from 'swr'; +import useSWR, { KeyedMutator } from 'swr'; import { ProjectFlockFormSchema, ProjectFlockFormValues, @@ -35,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general'; import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant'; import { useModal } from '@/components/Modal'; import ConfirmationModal from '@/components/modal/ConfirmationModal'; +import ProjectFlockKandangTable from './ProjectFlockKandangTable'; interface ProjectFlockFormProps { formType?: 'add' | 'edit' | 'detail'; initialValues?: ProjectFlock; + refreshProjectFlocks?: KeyedMutator< + BaseApiResponse | undefined + >; } const ProjectFlockForm = ({ formType = 'add', initialValues, + refreshProjectFlocks, }: ProjectFlockFormProps) => { // State const router = useRouter(); @@ -71,18 +76,34 @@ const ProjectFlockForm = ({ const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isApproveLoading, setIsApproveLoading] = useState(false); - const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true); - const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled); - const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED'); + const [isApprovedDisabled, setIsApprovedDisabled] = useState( + initialValues?.approval.step_name == 'Pengajuan' ? false : true + ); + const [isRejectedDisabled, setIsRejectedDisabled] = useState( + !isApprovedDisabled + ); + const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>( + !isApprovedDisabled ? 'APPROVED' : 'REJECTED' + ); + + const [rowSelection, setRowSelection] = useState>( + () => + Object.fromEntries( + (initialValues?.kandangs ?? []).map((k: Kandang) => [ + k.id.toString(), + true, + ]) + ) + ); useEffect(() => { - if (initialValues?.approval?.step_name) { - const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan'; - setIsApprovedDisabled(approvedDisabled); - setIsRejectedDisabled(!approvedDisabled); - setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED'); - } -}, [initialValues]); + if (initialValues?.approval?.step_name) { + const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan'; + setIsApprovedDisabled(approvedDisabled); + setIsRejectedDisabled(!approvedDisabled); + setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED'); + } + }, [initialValues]); // Fetch Data const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({ @@ -122,7 +143,7 @@ const ProjectFlockForm = ({ search: '', location_id: selectedLocation == '' ? '0' : selectedLocation, }).toString()}`; - const { data: kandang, isLoading: isLoadingKandang } = useSWR( + const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR( kandangUrl, KandangApi.getAllFetcher ); @@ -180,6 +201,20 @@ const ProjectFlockForm = ({ } } }, [kandang]); + useEffect(() => { + if (initialValues?.kandangs) { + refreshKandang(); + setOpenSelectKandangs(true); + + const newRowSelection = Object.fromEntries( + initialValues.kandangs.map((k: Kandang) => [ + k.id.toString(), + true, + ]) + ); + setRowSelection(newRowSelection); + } + }, [initialValues, refreshKandang]); // Options Handler const areaChangeHandler = (val: OptionType | OptionType[] | null) => { @@ -224,38 +259,6 @@ const ProjectFlockForm = ({ formik.setFieldTouched('category', true); }; - const kandangChangeHandler = (event: React.ChangeEvent) => { - const { value, checked } = event.target; - if (checked) { - formik.setFieldValue( - 'kandang_ids', - formik.values.kandang_ids.concat(parseInt(value)) - ); - } else { - formik.setFieldValue( - 'kandang_ids', - formik.values.kandang_ids.filter((id) => id !== parseInt(value)) - ); - } - }; - const kandangCheckAll = (event: React.ChangeEvent) => { - const { checked } = event.target; - if (checked) { - formik.setFieldValue( - 'kandang_ids', - optionsKandang - .filter( - (kandang) => - kandang.status === 'NON_ACTIVE' || - formik.values.kandang_ids.includes(kandang.id) - ) - .map((kandang) => kandang.id) - ); - } else { - formik.setFieldValue('kandang_ids', []); - } - }; - // Submit Handler const createProjectFlockHandler = async ( payload: CreateProjectFlockPayload @@ -418,6 +421,16 @@ const ProjectFlockForm = ({ } }, [periodFlocks]); + useEffect(() => { + const selectedRowIds = Object.keys(rowSelection) + .filter((id) => rowSelection[id]) + .map((id) => parseInt(id)); + formikSetValues({ + ...formik.values, + kandang_ids: selectedRowIds, + }); + }, [rowSelection, formikSetValues]); + // Actions handler const confirmationModalDeleteClickHandler = async () => { setIsDeleteLoading(true); @@ -454,14 +467,17 @@ const ProjectFlockForm = ({ }); if (isResponseSuccess(approveProjectFlockRes)) { - if(action == 'APPROVED'){ - setIsApprovedDisabled(true); - setIsRejectedDisabled(false); - } - if(action == 'REJECTED'){ - setIsRejectedDisabled(true); - setIsApprovedDisabled(false); + if (refreshProjectFlocks) { + await refreshProjectFlocks(); } + // if (action == 'APPROVED') { + // setIsApprovedDisabled(true); + // setIsRejectedDisabled(false); + // } + // if (action == 'REJECTED') { + // setIsRejectedDisabled(true); + // setIsApprovedDisabled(false); + // } toast.success(approveProjectFlockRes.message as string); } if (isResponseError(approveProjectFlockRes)) { @@ -520,10 +536,7 @@ const ProjectFlockForm = ({ confirmModal.openModal(); } }} - disabled={ - !initialValues?.id || - isApprovedDisabled - } + disabled={!initialValues?.id || isApprovedDisabled} className='w-full sm:w-fit' > @@ -538,10 +551,7 @@ const ProjectFlockForm = ({ confirmModal.openModal(); } }} - disabled={ - !initialValues?.id || - isRejectedDisabled - } + disabled={!initialValues?.id || isRejectedDisabled} className='w-full sm:w-fit' > @@ -682,100 +692,13 @@ const ProjectFlockForm = ({ {isLoadingKandang && ( )} - - {/* head */} - - - - - {/* */} - - - - - {/* rows */} - {selectedLocation != '' && - optionsKandang.map((kandang) => ( - - - - {/* */} - - - ))} - {selectedLocation == '' && ( - - - - )} - - {/* foot */} - {selectedLocation != '' && ( - - - - - - - - )} -
- - KandangStatusPenanggung Jawab
- - {kandang.name}{kandang.status}{kandang.pic?.name}
- Data tidak tersedia -
KandangPenanggung Jawab
+
@@ -845,7 +768,11 @@ const ProjectFlockForm = ({ ; + setRowSelection: OnChangeFn>; + selectedIds: (number | undefined)[]; + formType: 'add' | 'edit' | 'detail'; +}) => { + console.log('selectedIds'); + console.log(selectedIds); + return ( + + data={listKandang} + columns={[ + { + id: 'select', + header: ({ table }) => { + const allRows = table.getRowModel().rows; + const selectableRows = allRows.filter( + (row) => + row.original.status == 'NON_ACTIVE' || + row.original.status == 'PENGAJUAN' + ); + + const allSelected = + selectableRows.every((row) => row.getIsSelected()) && + selectableRows.length != 0 && formType != 'detail'; + + const someSelected = + selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail'; + + const toggleSelectableRows = () => { + const shouldSelect = !allSelected; + selectableRows.forEach((row) => row.toggleSelected(shouldSelect)); + }; + + return ( +
+ + kandang.status == 'NON_ACTIVE' || + kandang.status == 'PENGAJUAN' + ).length == 0 || formType == 'detail' + } + /> +
+ ); + }, + cell: ({ row }) => { + return ( + + ); + }, + }, + { + accessorFn: (row) => row.name, + header: 'Kandang', + }, + { + accessorFn: (row) => row.status, + header: 'Status', + cell: (props) => { + return ( + { + switch (props.row.original.status) { + case 'ACTIVE': + return 'red'; + case 'PENGAJUAN': + return 'green'; + case 'NON_ACTIVE': + return 'blue'; + default: + return 'gray'; + } + })()} + content={props.row.original.status + .toLowerCase() + .replace(/_/g, ' ') + .replace(/\b\w/g, (char) => char.toUpperCase())} + /> + ); + }, + }, + { + accessorFn: (row) => row.pic?.name, + header: 'Penanggung Jawab', + }, + ]} + className={{ + containerClassName: cn({ + 'mb-20': listKandang?.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', + paginationClassName: 'hidden', + }} + rowSelection={rowSelection} + setRowSelection={setRowSelection} + /> + ); +}; + +export default ProjectFlockKandangTable;