{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/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index fb0c95c7..32f14f94 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -2,8 +2,9 @@
import { HTMLProps, useEffect, useRef } from 'react';
import { cn } from '@/lib/helper';
+import { Size } from '@/types/theme';
-interface CheckboxInputProps extends HTMLProps {
+interface CheckboxInputProps extends Omit, 'size'> {
name: string;
label?: string;
indeterminate?: boolean;
@@ -16,6 +17,7 @@ interface CheckboxInputProps extends HTMLProps {
isError?: boolean;
isValid?: boolean;
errorMessage?: string;
+ size?: Size;
}
const CheckboxInput = ({
@@ -27,10 +29,19 @@ const CheckboxInput = ({
isValid,
isError,
errorMessage,
+ size = 'sm',
...rest
}: CheckboxInputProps) => {
const ref = useRef(null!);
+ const checkboxBaseClassName = cn('checkbox cursor-pointer rounded-md', {
+ 'checkbox-xs': size === 'xs',
+ 'checkbox-sm': size === 'sm',
+ 'checkbox-md': size === 'md',
+ 'checkbox-lg': size === 'lg',
+ 'checkbox-xl': size === 'xl',
+ });
+
useEffect(() => {
if (typeof indeterminate === 'boolean') {
ref.current.indeterminate = !rest.checked && indeterminate;
@@ -53,7 +64,7 @@ const CheckboxInput = ({
id={name}
name={name}
className={cn(
- 'checkbox cursor-pointer',
+ checkboxBaseClassName,
{
'border-error': isError,
'border-success': isValid,
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index b3981065..ae74717d 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,16 +1,32 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/helper';
+import { Size } from '@/types/theme';
interface MenuProps {
children?: ReactNode;
+ size?: Size;
+ direction?: 'vertical' | 'horizontal';
className?: string;
}
-const Menu = ({ children, className }: MenuProps) => {
- return (
-
- );
+const Menu = ({
+ children,
+ size = 'md',
+ direction = 'vertical',
+ className,
+}: MenuProps) => {
+ const menuBaseClassName = cn('menu w-full', {
+ 'menu-xs': size === 'xs',
+ 'menu-sm': size === 'sm',
+ 'menu-md': size === 'md',
+ 'menu-lg': size === 'lg',
+ 'menu-xl': size === 'xl',
+ 'menu-vertical': direction === 'vertical',
+ 'menu-horizontal': direction === 'horizontal',
+ });
+
+ return ;
};
export default Menu;
diff --git a/src/components/molecules/SidebarMenu.tsx b/src/components/molecules/SidebarMenu.tsx
new file mode 100644
index 00000000..6a217dcc
--- /dev/null
+++ b/src/components/molecules/SidebarMenu.tsx
@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import Menu from '@/components/menu/Menu';
+import { Icon } from '@iconify/react';
+import { cn, isPathActive } from '@/lib/helper';
+
+export interface SidebarMenuItem {
+ type?: 'item' | 'title';
+ text: string;
+ link: string;
+ icon?: string;
+ submenu?: SidebarMenuItem[];
+}
+
+interface SidebarMenuItemProps {
+ item: SidebarMenuItem;
+ activeLink: string;
+}
+
+interface SidebarMenuProps {
+ menu: SidebarMenuItem[];
+ activeLink: string;
+}
+
+const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+ const isItemActive = isPathActive(activeLink, item.link);
+
+ const menuItemWithoutSubmenu = (
+
+
+ {item.icon && }
+
+ {item.text}
+
+
+ );
+
+ if (!item.submenu || item.submenu.length === 0) {
+ return menuItemWithoutSubmenu;
+ }
+
+ const menuItemWithSubmenu = (
+
+
+
+ {item.icon && }
+
+ {item.text}
+
+
+
+ {item.submenu.map((submenuItem, submenuIdx) => (
+
+ ))}
+
+
+
+ );
+
+ return menuItemWithSubmenu;
+};
+
+const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
+ return (
+
+ );
+};
+
+export default SidebarMenu;
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,
+ }),
+ }}
+ />
+ |