From 0ac14fe3420400ec1a449119e82c6f220a375ee3 Mon Sep 17 00:00:00 2001 From: randy-ar Date: Tue, 13 Jan 2026 11:11:10 +0700 Subject: [PATCH] fix(FE): fixing floating action button project flock and change page size --- src/components/FloatingActionsButton.tsx | 6 +- .../project-flock/ProjectFlockTable.tsx | 383 +++++++----------- src/dummy/report/debt-supplier.dummy.json | 2 +- 3 files changed, 152 insertions(+), 239 deletions(-) diff --git a/src/components/FloatingActionsButton.tsx b/src/components/FloatingActionsButton.tsx index 974ca280..9bfbb1a1 100644 --- a/src/components/FloatingActionsButton.tsx +++ b/src/components/FloatingActionsButton.tsx @@ -39,8 +39,8 @@ const FloatingActionsButton = ({ // Jika tidak ada baris yang dipilih, jangan tampilkan FAB const positionStyles = selectedRowIds.length > 0 - ? 'bottom-[10%] opacity-100' - : 'bottom-[-10%] opacity-0'; + ? 'bottom-[5%] opacity-100' + : 'bottom-[-5%] opacity-0'; // Helper untuk menentukan gaya warna tombol approval const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => { @@ -60,7 +60,7 @@ const FloatingActionsButton = ({ // Container utama FAB
; - deleteClickHandler: () => void; -}) => { - return ( -
-
- - - - {props.row.original.approval.step_name === 'Aktif' && ( - - - - )} - {props.row.original.approval.step_name === 'Pengajuan' && ( - - - - )} - - - -
-
- ); -}; - const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { const { state: tableFilterState, @@ -149,8 +71,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { ); const [periodInputValue, setPeriodInputValue] = useState(null); const [sorting, setSorting] = useState([]); - const [selectedProjectFlock, setSelectedProjectFlock] = - useState(); const deleteModal = useModal(); const confirmModal = useModal(); const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>( @@ -221,10 +141,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { : []; // ====== HANDLER ====== - const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => { - const newVal = val as OptionType; - setPageSize(newVal.value as number); - }; const confirmationModalDeleteClickHandler = async () => { setIsDeleteLoading(true); @@ -292,12 +208,146 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { const canApprove = useMemo(() => { if (!selectedSingleRow || isApproveLoading) return false; - const isPengajuan = selectedSingleRow.approval.step_number == 1; - const isNotRejected = selectedSingleRow.approval.action != 'REJECTED'; + const isPengajuan = selectedSingleRow.approval?.step_number == 1; + const isNotRejected = selectedSingleRow.approval?.action != 'REJECTED'; return isPengajuan && isNotRejected; }, [selectedSingleRow, isApproveLoading]); + // ====== COLUMNS ====== + const columns = useMemo[]>( + () => [ + { + id: 'select', + header: ({ table }) => { + const allRows = table.getRowModel().rows; + const selectableRows = allRows; + + 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 ( +
+ +
+ ); + }, + cell: ({ row }) => { + return ( + + ); + }, + }, + + { + accessorKey: 'flock_name', + header: 'Flock', + }, + { + accessorKey: 'area.name', + header: 'Area', + }, + { + accessorKey: 'location.name', + header: 'Lokasi', + }, + { + accessorKey: 'fcr.name', + header: 'FCR', + }, + { + accessorKey: 'category', + header: 'Kategori', + }, + { + accessorKey: 'approval.step_name', + header: 'Status', + cell: (props) => { + const approval = props.row.original.approval; + + return ( + + + {approval?.step_name} + + ); + }, + }, + { + header: 'Kandang', + cell: (props) => { + const kandang = props.row.original.kandangs; + if (kandang) { + const kandangNames = kandang.map((k: Kandang) => k.name); + return ( +
+ {kandangNames.length > 0 + ? kandangNames.join(', ') + : 'Tidak ada'} +
+ ); + } else { + return '-'; + } + }, + }, + { + accessorKey: 'period', + header: 'Periode', + }, + { + accessorKey: 'created_at', + header: 'Dibuat pada', + cell: (props) => + formatDate(props.row.original.created_at, 'MMM DD, YYYY'), + }, + ], + [] + ); + return ( <>
@@ -320,7 +370,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
void }) => { type='number' label='Periode' placeholder='Masukan periode' - value={periodInputValue ?? ''} + value={periodInputValue?.toString() ?? ''} onChange={(e) => { setPeriodInputValue(parseInt(e.target.value)); updateFilter('periodFilter', e.target.value); }} /> -
data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []} - columns={[ - { - id: 'select', - header: ({ table }) => { - const allRows = table.getRowModel().rows; - const selectableRows = allRows; - - 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 ( -
- -
- ); - }, - cell: ({ row }) => { - return ( - - ); - }, - }, - - { - accessorKey: 'flock_name', - header: 'Flock', - }, - { - accessorKey: 'area.name', - header: 'Area', - }, - { - accessorKey: 'location.name', - header: 'Lokasi', - }, - { - accessorKey: 'fcr.name', - header: 'FCR', - }, - { - accessorKey: 'category', - header: 'Kategori', - }, - { - accessorKey: 'approval.step_name', - header: 'Status', - cell: (props) => { - const approval = props.row.original.approval; - - return ( - - - {approval.step_name} - - ); - }, - }, - { - header: 'Kandang', - cell: (props) => { - const kandang = props.row.original.kandangs; - if (kandang) { - const kandangNames = kandang.map((k: Kandang) => k.name); - return ( -
- {kandangNames.length > 0 - ? kandangNames.join(', ') - : 'Tidak ada'} -
- ); - } else { - return '-'; - } - }, - }, - { - accessorKey: 'period', - header: 'Periode', - }, - { - accessorKey: 'created_at', - header: 'Dibuat pada', - cell: (props) => - formatDate(props.row.original.created_at, 'MMM DD, YYYY'), - }, - ]} + columns={columns} pageSize={tableFilterState.pageSize} page={ isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0 @@ -545,7 +453,12 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { ? projectFlocks?.meta?.total_results : 0 } - onPageChange={setPage} + onPageChange={(page) => { + setPage(page); + }} + onPageSizeChange={(pageSize) => { + setPageSize(pageSize); + }} isLoading={isLoading} sorting={sorting} setSorting={setSorting} @@ -553,9 +466,9 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => { setRowSelection={setRowSelection} className={{ containerClassName: cn({ - 'mb-20': + 'mb-40': isResponseSuccess(projectFlocks) && - projectFlocks?.data?.length === 0, + projectFlocks?.data?.length > 0, }), tableWrapperClassName: 'overflow-x-auto min-h-full!', tableClassName: 'font-inter w-full table-auto min-h-full!', diff --git a/src/dummy/report/debt-supplier.dummy.json b/src/dummy/report/debt-supplier.dummy.json index 43b13669..27090eb0 100644 --- a/src/dummy/report/debt-supplier.dummy.json +++ b/src/dummy/report/debt-supplier.dummy.json @@ -289,4 +289,4 @@ "debt_price": -181845000 } } -] \ No newline at end of file +]