{row.getVisibleCells().map((cell) => (
- |
+ |
{!isLoading &&
flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -270,7 +298,7 @@ const Table = ({
emptyContent}
{data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-
+
({
onPrevPage={prevPageClickHandler}
onNextPage={nextPageClickHandler}
onPageChange={pageChangeHandler}
+ rowOptions={rowOptions}
+ onRowChange={onPageSizeChange}
/>
)}
diff --git a/src/components/pages/closing/ClosingDetail.tsx b/src/components/pages/closing/ClosingDetail.tsx
new file mode 100644
index 00000000..147b3fbd
--- /dev/null
+++ b/src/components/pages/closing/ClosingDetail.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+
+interface ClosingDetailProps {
+ id: number;
+ initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingDetail: React.FC = ({ id, initialValue }) => {
+ const [activeTab, setActiveTab] = useState('sapronak');
+
+ const closingDetailTabs = useMemo(() => {
+ const validTabs = [
+ {
+ id: 'sapronak',
+ label: 'Sapronak',
+ content: ,
+ },
+ {
+ id: 'perhitunganSapronak',
+ label: 'Perhitungan Sapronak',
+ content: 'Perhitungan Sapronak',
+ },
+ {
+ id: 'penjualan',
+ label: 'Penjualan',
+ content: 'Penjualan',
+ },
+ {
+ id: 'overhead',
+ label: 'Overhead',
+ content: 'Overhead',
+ },
+ {
+ id: 'hppEkspedisi',
+ label: 'HPP Ekspedisi',
+ content: 'HPP Ekspedisi',
+ },
+ {
+ id: 'dataProduksi',
+ label: 'Data Produksi',
+ content: 'Data Produksi',
+ },
+ {
+ id: 'keuangan',
+ label: 'Keuangan',
+ content: 'Keuangan',
+ },
+ ];
+
+ return validTabs;
+ }, [initialValue]);
+
+ return (
+ <>
+
+
+
+
+ Detail Closing
+
+
+
+
+
+
+
+ );
+};
+
+export default ClosingDetail;
diff --git a/src/components/pages/closing/ClosingGeneralInformationTable.tsx b/src/components/pages/closing/ClosingGeneralInformationTable.tsx
new file mode 100644
index 00000000..af21497a
--- /dev/null
+++ b/src/components/pages/closing/ClosingGeneralInformationTable.tsx
@@ -0,0 +1,100 @@
+import { ClosingGeneralInformation } from '@/types/api/closing';
+
+interface ClosingGeneralInformationProps {
+ initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingGeneralInformationTable = ({
+ initialValue,
+}: ClosingGeneralInformationProps) => {
+ return (
+
+
+
+
+
+
+
+ | Lokasi |
+ : |
+ {initialValue?.location_name} |
+
+
+ | Periode |
+ : |
+ {initialValue?.period} |
+
+
+ | Kategori |
+ : |
+ {initialValue?.project_category} |
+
+
+ | Populasi |
+ : |
+ {initialValue?.population} Ekor |
+
+
+ | Jenis Project |
+ : |
+ {initialValue?.project_type} |
+
+
+ | Kandang Aktif |
+ : |
+ {initialValue?.active_house_count} Kandang |
+
+
+ | Status Pembayaran Penjualan |
+ : |
+ {initialValue?.sales_payment_status} |
+
+
+ | Status Project |
+ : |
+ {initialValue?.project_status} |
+
+
+ | Status Closing |
+ : |
+ {initialValue?.closing_status} |
+
+
+
+
+
+
+
+
+
+
+
+ | Kandang Aktif |
+ : |
+ {initialValue?.active_house_count} Kandang |
+
+
+ | Status Pembayaran Penjualan |
+ : |
+ {initialValue?.sales_payment_status} |
+
+
+ | Status Project |
+ : |
+ {initialValue?.project_status} |
+
+
+ | Status Closing |
+ : |
+ {initialValue?.closing_status} |
+
+
+
+
+
+
+ Sapronak Masuk
+
+
+
+
+
+
+ data={
+ isResponseSuccess(incomingSapronaks)
+ ? incomingSapronaks?.data
+ : []
+ }
+ columns={incomingSapronaksColumns}
+ pageSize={tableFilterState.pageSize}
+ onPageSizeChange={setPageSize}
+ rowOptions={[10, 20, 50, 100]}
+ page={
+ isResponseSuccess(incomingSapronaks)
+ ? incomingSapronaks?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(incomingSapronaks)
+ ? incomingSapronaks?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoadingIncomingSapronaks}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn({
+ 'w-full mb-20':
+ isResponseSuccess(incomingSapronaks) &&
+ incomingSapronaks?.data?.length === 0,
+ }),
+ }}
+ />
+ Sapronak Keluar
+
+
+
+ }
+ className='w-full!'
+ titleClassName='w-full p-0!'
+ >
+
+
+
+
+ data={
+ isResponseSuccess(outgoingSapronaks)
+ ? outgoingSapronaks?.data
+ : []
+ }
+ columns={outgoingSapronaksColumns}
+ pageSize={tableFilterState.pageSize}
+ onPageSizeChange={setPageSize}
+ rowOptions={[10, 20, 50, 100]}
+ page={
+ isResponseSuccess(outgoingSapronaks)
+ ? outgoingSapronaks?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(outgoingSapronaks)
+ ? outgoingSapronaks?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoadingOutgoingSapronaks}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn({
+ 'w-full mb-20':
+ isResponseSuccess(outgoingSapronaks) &&
+ outgoingSapronaks?.data?.length === 0,
+ }),
+ }}
+ />
+
+ {projectFlockId && (
+ <>
+
+
+
+
+ )}
+
+ );
+};
+
+export default ClosingSapronakTabContent;
diff --git a/src/components/pages/closing/ClosingsTable.tsx b/src/components/pages/closing/ClosingsTable.tsx
new file mode 100644
index 00000000..91e78c8c
--- /dev/null
+++ b/src/components/pages/closing/ClosingsTable.tsx
@@ -0,0 +1,299 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import SelectInput, {
+ OptionType,
+ useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { LocationApi } from '@/services/api/master-data';
+import { Location } from '@/types/api/master-data/location';
+import { ClosingApi } from '@/services/api/closing';
+import { Closing } from '@/types/api/closing';
+
+const PROJECT_STATUS_OPTIONS = [
+ {
+ value: 1,
+ label: 'Pengajuan',
+ },
+ {
+ value: 2,
+ label: 'Aktif',
+ },
+];
+
+const RowOptionsMenu = ({
+ type = 'dropdown',
+ props,
+}: {
+ type: 'dropdown' | 'collapse';
+ props: CellContext;
+}) => {
+ return (
+
+ {/* TODO: apply RBAC */}
+
+
+
+
+ );
+};
+
+const ClosingsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ nameSort: '',
+ transactionDate: '',
+ realizationDate: '',
+ locationId: '',
+ projectStatus: '',
+ userId: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ transactionDate: 'transaction_date',
+ realizationDate: 'realization_date',
+ locationId: 'location_id',
+ projectStatus: 'project_status',
+ userId: 'user_id',
+ },
+ });
+
+ const { data: closings, isLoading: isLoadingClosings } = useSWR(
+ `${ClosingApi.basePath}${getTableFilterQueryString()}`,
+ ClosingApi.getAllFetcher
+ );
+
+ const [sorting, setSorting] = useState([]);
+ const [rowSelection, setRowSelection] = useState>({});
+
+ const closingsColumns: ColumnDef[] = [
+ {
+ header: '#',
+ cell: (props) => props.row.index + 1,
+ },
+ {
+ accessorKey: 'location_name',
+ header: 'Lokasi',
+ },
+ {
+ accessorKey: 'project_category',
+ header: 'Kategori',
+ },
+ {
+ accessorKey: 'period',
+ header: 'Periode',
+ },
+ {
+ accessorKey: 'closing_date',
+ header: 'Periode',
+ cell: (props) =>
+ formatDate(props.row.original.closing_date, 'DD MMM YYYY'),
+ },
+ {
+ accessorKey: 'shed_label',
+ header: 'Jumlah Kandang',
+ },
+ {
+ accessorKey: 'sales_paid_amount',
+ header: 'Jumlah Sudah Bayar',
+ cell: (props) => (
+
+ {formatCurrency(props.row.original.sales_paid_amount)}
+
+ ),
+ },
+ {
+ accessorKey: 'sales_remaining_amount',
+ header: 'Jumlah Sisa Bayar',
+ cell: (props) => (
+
+ {formatCurrency(props.row.original.sales_remaining_amount)}
+
+ ),
+ },
+ {
+ accessorKey: 'sales_payment_status',
+ header: 'Status Pembayaran',
+ },
+ {
+ accessorKey: 'project_status',
+ header: 'Status',
+ },
+ {
+ 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 - 3;
+
+ return (
+ <>
+ {currentPageSize > 3 && (
+
+
+
+ )}
+
+ {currentPageSize <= 3 && (
+
+
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ const {
+ setInputValue: setLocationInputValue,
+ options: locationOptions,
+ isLoadingOptions: isLoadingLocationOptions,
+ } = useSelect(LocationApi.basePath, 'id', 'name');
+
+ const [selectedLocation, setSelectedLocation] = useState(
+ null
+ );
+
+ const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+ setSelectedLocation(val as OptionType);
+ updateFilter(
+ 'locationId',
+ val ? ((val as OptionType).value as string) : ''
+ );
+ };
+
+ const [selectedProjectStatus, setSelectedProjectStatus] =
+ useState(null);
+
+ const projectStatusChangeHandler = (
+ val: OptionType | OptionType[] | null
+ ) => {
+ setSelectedProjectStatus(val as OptionType);
+ updateFilter(
+ 'projectStatus',
+ val ? ((val as OptionType).value as string) : ''
+ );
+ };
+
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
+
+ // 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 (
+ <>
+
+
+
+
+ data={isResponseSuccess(closings) ? closings?.data : []}
+ columns={closingsColumns}
+ pageSize={tableFilterState.pageSize}
+ onPageSizeChange={setPageSize}
+ rowOptions={[10, 20, 50, 100]}
+ page={isResponseSuccess(closings) ? closings?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(closings) ? closings?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoadingClosings}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn({
+ 'w-full mb-20':
+ isResponseSuccess(closings) && closings?.data?.length === 0,
+ }),
+ }}
+ />
+ |