diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx index c8b3f89b..8fe3ff7f 100644 --- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx +++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx @@ -114,17 +114,45 @@ const ProjectFlockTable = () => { const [selectedProjectFlock, setSelectedProjectFlock] = useState(); const deleteModal = useModal(); + const confirmModal = useModal(); const [isDeleteLoading, setIsDeleteLoading] = useState(false); + const [selectedIds, setSelectedIds] = useState([]); + const [selectedFlocks, setSelectedFlocks] = useState([]); // Columns const projectFlocksColumns: ColumnDef[] = [ { - header: '#', - cell: (props) => - tableFilterState.pageSize * (tableFilterState.page - 1) + - props.row.index + - 1, + id: 'select', + header: () => { + const allSelected = + isResponseSuccess(projectFlocks) && + projectFlocks.data.length > 0 && + selectedIds.length === projectFlocks.data.length; + + return ( + handleSelectAll(e.target.checked)} + /> + ); + }, + cell: (props) => { + const id = props.row.original.id; + const isChecked = selectedIds.includes(id); + + return ( + handleSelectRow(id, e.target.checked)} + /> + ); + }, }, + { accessorKey: 'flock.name', header: 'Flock', @@ -226,11 +254,9 @@ const ProjectFlockTable = () => { toast.success('Successfully delete Project Flock!'); setIsDeleteLoading(false); }; - const searchChangeHandler: ChangeEventHandler = (e) => { updateFilter('search', e.target.value); }; - const updateSortingFilter = useCallback( ( sortName: Exclude, @@ -244,6 +270,34 @@ const ProjectFlockTable = () => { }, [updateFilter] ); + const handleSelectAll = (checked: boolean) => { + if (checked && isResponseSuccess(projectFlocks)) { + const allIds = projectFlocks.data.map((item) => item.id); + setSelectedIds(allIds); + setSelectedFlocks(projectFlocks.data); + } 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) + ); + } + }; return ( <> @@ -259,14 +313,28 @@ const ProjectFlockTable = () => { Tambah +
{
0 + ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks + .map( + (flock, index) => + `${flock.flock?.name ?? '(Tanpa nama)'} - ${ + flock.area?.name ?? '-' + }` + ) + .join(', ')})` + : 'Tidak ada Project Flock yang dipilih.' + } secondaryButton={{ text: 'Tidak', }} primaryButton={{ text: 'Ya', - color: 'error', - isLoading: isDeleteLoading, - onClick: confirmationModalDeleteClickHandler, + color: 'success', + onClick: async () => { + toast.success('Project Flock berhasil di-approve!'); + confirmModal.closeModal(); + }, }} /> diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts index 1fb71563..caaf1844 100644 --- a/src/types/api/production/project-flock.d.ts +++ b/src/types/api/production/project-flock.d.ts @@ -7,6 +7,7 @@ import { ProductCategory } from "@/types/api/master-data/product-category"; export type BaseProjectFlock = { name: string; + status: string; flock: Flock; flock_id: number; area: Area;