+
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}}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const TransferToLayingsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ transferDate: '',
+ flockSource: '',
+ flockDestination: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ transferDate: 'transfer_date',
+ flockSource: 'flock_source',
+ flockDestination: 'flock_destination',
+ },
+ });
+
+ const {
+ data: transferToLayings,
+ isLoading,
+ mutate: refreshTransferToLayings,
+ } = useSWR(
+ `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+ TransferToLayingApi.getAllFetcher
+ );
+
+ // Modal hooks
+ const deleteModal = useModal();
+ const approveModal = useModal();
+ const rejectModal = useModal();
+
+ // Flocks data
+ const {
+ setInputValue: setFlockSourceInputValue,
+ options: flockSourceOptions,
+ isLoadingOptions: isLoadingFlockSourceOptions,
+ } = useSelect(FlockApi.basePath, 'id', 'name');
+
+ const {
+ setInputValue: setFlockDestinationInputValue,
+ options: flockDestinationOptions,
+ isLoadingOptions: isLoadingFlockDestinationOptions,
+ } = useSelect(FlockApi.basePath, 'id', 'name');
+
+ // Flocks value
+ const [selectedFlockSource, setSelectedFlockSource] =
+ useState(null);
+ const [selectedFlockDestination, setSelectedFlockDestination] =
+ useState(null);
+
+ const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+ TransferToLaying | undefined
+ >(undefined);
+
+ // Modal loading state
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+ const [isApproveLoading, setIsApproveLoading] = useState(false);
+ const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+ const [sorting, setSorting] = useState([]);
+ const [rowSelection, setRowSelection] = useState>({});
+ const selectedRowIds = Object.keys(rowSelection).map((item) =>
+ parseInt(item)
+ );
+
+ const transferToLayingsColumns: ColumnDef[] = [
+ {
+ id: 'select',
+ header: ({ table }) => (
+
+
+
+ ),
+ cell: ({ row }) => (
+
+
+
+ ),
+ },
+ {
+ header: '#',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'transfer_date',
+ header: 'Tanggal Transfer',
+ cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+ },
+ {
+ accessorKey: 'flock_source',
+ header: 'Flock Asal',
+ cell: (props) => props.row.original.flock_source.name,
+ },
+ {
+ accessorKey: 'flock_destination',
+ header: 'Flock Tujuan',
+ cell: (props) => props.row.original.flock_destination.name,
+ },
+ {
+ accessorKey: 'quantity',
+ header: 'Kuantitas',
+ },
+ {
+ accessorKey: 'reason',
+ header: 'Alasan Transfer',
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize = props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const approveClickHandler = () => {
+ setSelectedTransferToLaying(props.row.original);
+
+ // Set row selection
+ setRowSelection({
+ [String(props.row.original.id)]: true,
+ });
+
+ approveModal.openModal();
+ };
+
+ const rejectClickHandler = () => {
+ setSelectedTransferToLaying(props.row.original);
+
+ // Set row selection
+ setRowSelection({
+ [String(props.row.original.id)]: true,
+ });
+
+ rejectModal.openModal();
+ };
+
+ const deleteClickHandler = () => {
+ setSelectedTransferToLaying(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+
+
+
+ )}
+
+ {currentPageSize <= 2 && (
+
+
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ const bulkApproveClickHandler = () => {
+ approveModal.openModal();
+ };
+
+ const bulkRejectClickHandler = () => {
+ rejectModal.openModal();
+ };
+
+ // Modal confirm click handler
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsDeleteLoading(true);
+
+ await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+ refreshTransferToLayings();
+
+ deleteModal.closeModal();
+ toast.success('Berhasil menghapus data transfer ke laying!');
+ setIsDeleteLoading(false);
+ };
+
+ const confirmationModalApproveClickHandler = async () => {
+ setIsApproveLoading(true);
+
+ const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+ selectedRowIds
+ );
+
+ if (isResponseSuccess(bulkApproveResponse)) {
+ refreshTransferToLayings();
+ approveModal.closeModal();
+
+ // TODO: remove console.log
+ console.log('Approved data:', selectedRowIds);
+
+ toast.success(
+ `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+ );
+
+ setRowSelection({});
+ } else {
+ approveModal.closeModal();
+
+ toast.error(
+ `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+ );
+ }
+
+ setIsApproveLoading(false);
+ };
+
+ const confirmationModalRejectClickHandler = async () => {
+ setIsRejectLoading(true);
+
+ const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+ selectedRowIds
+ );
+
+ if (isResponseSuccess(bulkRejectResponse)) {
+ refreshTransferToLayings();
+ rejectModal.closeModal();
+
+ // TODO: remove console.log
+ console.log('Rejected data:', selectedRowIds);
+
+ toast.success(
+ `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+ );
+ setRowSelection({});
+ } else {
+ rejectModal.closeModal();
+
+ toast.error(
+ `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+ );
+ }
+
+ setIsRejectLoading(false);
+ };
+
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
+
+ const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+ const newVal = val as OptionType;
+
+ setPageSize(newVal.value as number);
+ };
+
+ const transferDateChangeHandler: ChangeEventHandler = (
+ e
+ ) => {
+ updateFilter('transferDate', e.target.value);
+ };
+
+ const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+ setSelectedFlockSource(val as OptionType);
+ updateFilter(
+ 'flockSource',
+ val ? ((val as OptionType).value as string) : ''
+ );
+ };
+
+ const flockDestinationChangeHandler = (
+ val: OptionType | OptionType[] | null
+ ) => {
+ setSelectedFlockDestination(val as OptionType);
+ updateFilter(
+ 'flockDestination',
+ val ? ((val as OptionType).value as string) : ''
+ );
+ };
+
+ // track sorting
+ // useEffect(() => {
+ // const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+ // if (!isNameSorted) {
+ // updateFilter('nameSort', '');
+ // } else {
+ // updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+ // }
+ // }, [sorting, updateFilter]);
+
+ return (
+ <>
+
+
+
+
+
+
+ {selectedRowIds.length > 0 && (
+ <>
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ data={
+ isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+ }
+ columns={transferToLayingsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(transferToLayings)
+ ? transferToLayings?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(transferToLayings)
+ ? transferToLayings?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(transferToLayings) &&
+ transferToLayings?.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',
+ }}
+ />
+