mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'fix/debt-supplier' into 'development'
[FIX/FE] Pixel Perfect Report Finance Debt Supplier & Customer Supplier See merge request mbugroup/lti-web-client!282
This commit is contained in:
Adnan Zahir
@@ -123,6 +123,10 @@ const Card = ({
|
||||
return cn(baseClasses, 'p-6', className?.body);
|
||||
};
|
||||
|
||||
const getCollapsibleClasses = () => {
|
||||
return cn('', className?.collapsible);
|
||||
};
|
||||
|
||||
const getTitleClasses = () => {
|
||||
const sizeClasses = {
|
||||
sm: 'text-lg',
|
||||
@@ -213,6 +217,7 @@ const Card = ({
|
||||
titleClassName='w-full cursor-pointer'
|
||||
contentClassName='p-0'
|
||||
fullWidth={true}
|
||||
className={getCollapsibleClasses()}
|
||||
>
|
||||
{cardContent}
|
||||
</Collapse>
|
||||
|
||||
@@ -42,6 +42,7 @@ interface TableClassNames {
|
||||
footerRowClassName?: string;
|
||||
footerColumnClassName?: string;
|
||||
paginationClassName?: string;
|
||||
skeletonCellClassName?: string;
|
||||
}
|
||||
|
||||
export interface TableProps<TData extends object> {
|
||||
@@ -79,7 +80,9 @@ export interface TableProps<TData extends object> {
|
||||
getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;
|
||||
}
|
||||
|
||||
const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
|
||||
const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
|
||||
id: index,
|
||||
}));
|
||||
|
||||
const emptyContentDefaultValue = (
|
||||
<div className='w-full p-5 text-center'>
|
||||
@@ -414,7 +417,14 @@ const Table = <TData extends object>({
|
||||
cell.getContext()
|
||||
)}
|
||||
|
||||
{isLoading && <div className='skeleton w-full h-4' />}
|
||||
{isLoading && (
|
||||
<div
|
||||
className={cn(
|
||||
'skeleton w-full h-4',
|
||||
tableClassNames.skeletonCellClassName
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
|
||||
+23
-12
@@ -25,8 +25,10 @@ export interface TabsProps
|
||||
wrapper?: string;
|
||||
tab?: string;
|
||||
content?: string;
|
||||
tabHeaderWrapper?: string;
|
||||
};
|
||||
onTabChange?: (tabId: string) => void;
|
||||
sideContent?: ReactNode;
|
||||
}
|
||||
|
||||
const Tabs = ({
|
||||
@@ -38,6 +40,7 @@ const Tabs = ({
|
||||
activeTabId: controlledActiveId,
|
||||
className,
|
||||
onTabChange,
|
||||
sideContent,
|
||||
...props
|
||||
}: TabsProps) => {
|
||||
// State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
|
||||
@@ -59,6 +62,7 @@ const Tabs = ({
|
||||
wrapper: wrapperClassName,
|
||||
tab: tabClassName,
|
||||
content: contentClassName,
|
||||
tabHeaderWrapper: tabHeaderWrapperClassName,
|
||||
} = typeof className === 'object'
|
||||
? className
|
||||
: { wrapper: className, tab: undefined };
|
||||
@@ -102,6 +106,10 @@ const Tabs = ({
|
||||
tabClassName
|
||||
);
|
||||
|
||||
const getSideContentClasses = () => {
|
||||
return cn('flex flex-row', tabHeaderWrapperClassName);
|
||||
};
|
||||
|
||||
const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
|
||||
|
||||
return (
|
||||
@@ -112,18 +120,21 @@ const Tabs = ({
|
||||
typeof className === 'string' ? className : containerClassName
|
||||
)}
|
||||
>
|
||||
<div role='tablist' className={getTabsClasses()}>
|
||||
{tabs.map(({ id, label, disabled }) => (
|
||||
<button
|
||||
key={id}
|
||||
role='tab'
|
||||
className={getTabClasses(id === activeTabId, disabled)}
|
||||
onClick={() => !disabled && handleTabChange(id)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
<div className={getSideContentClasses()}>
|
||||
<div role='tablist' className={getTabsClasses()}>
|
||||
{tabs.map(({ id, label, disabled }) => (
|
||||
<button
|
||||
key={id}
|
||||
role='tab'
|
||||
className={getTabClasses(id === activeTabId, disabled)}
|
||||
onClick={() => !disabled && handleTabChange(id)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{sideContent && sideContent}
|
||||
</div>
|
||||
|
||||
{activeContent && (
|
||||
|
||||
@@ -19,11 +19,11 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
|
||||
'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
|
||||
getFilledFormikValuesCount(values) > 0
|
||||
? 'border-primary-gradient !rounded-[8px]'
|
||||
: '!rounded-[8px]',
|
||||
? 'border-primary-gradient text-primary rounded-lg!'
|
||||
: 'rounded-lg',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
@@ -37,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
|
||||
/>
|
||||
Filter
|
||||
{getFilledFormikValuesCount(values) > 0 && (
|
||||
<span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
|
||||
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
|
||||
{getFilledFormikValuesCount(values)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -27,6 +27,7 @@ const StatusBadge = ({
|
||||
'bg-success/30': color === 'success',
|
||||
'bg-error/20': color === 'error',
|
||||
'bg-primary/20': color === 'info',
|
||||
'bg-[#FF9A20]/12': color === 'warning',
|
||||
},
|
||||
className?.badge
|
||||
),
|
||||
@@ -43,6 +44,7 @@ const StatusBadge = ({
|
||||
'text-[#008000]': color === 'success',
|
||||
'text-error': color === 'error',
|
||||
'text-primary': color === 'info',
|
||||
'text-[#FF9A20]': color === 'warning',
|
||||
})}
|
||||
>
|
||||
<circle r='6' cx='6' cy='6' fill='currentColor' />
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
const DataStateSkeleton = ({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<IconSkeleton
|
||||
className={{
|
||||
outer: 'mb-2.25',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</IconSkeleton>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
{title}
|
||||
</h3>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataStateSkeleton;
|
||||
@@ -0,0 +1,33 @@
|
||||
import { cn } from '@/lib/helper';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const IconSkeleton = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: {
|
||||
outer?: string;
|
||||
inner?: string;
|
||||
};
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
|
||||
className?.outer
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]',
|
||||
className?.inner
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconSkeleton;
|
||||
@@ -280,7 +280,7 @@ const DateInput = ({
|
||||
ref={calendarModal.ref}
|
||||
className={{
|
||||
modal: 'rounded',
|
||||
modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
|
||||
modalBox: `max-w-max flex flex-col`,
|
||||
}}
|
||||
closeOnBackdrop
|
||||
>
|
||||
@@ -296,7 +296,11 @@ const DateInput = ({
|
||||
endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
|
||||
selected={selectedRange as DateRange}
|
||||
onSelect={handleSelectRange}
|
||||
footer={<div className='text-center mt-3'>{displayValue}</div>}
|
||||
footer={
|
||||
<div className='text-center py-2 text-base-content/65 font-semibold text-xs'>
|
||||
{displayValue}
|
||||
</div>
|
||||
}
|
||||
disabled={
|
||||
[
|
||||
minDate ? { before: minDate } : undefined,
|
||||
@@ -326,17 +330,26 @@ const DateInput = ({
|
||||
)}
|
||||
<div className='mt-auto flex flex-col gap-2'>
|
||||
{isRange && (
|
||||
<small className='text-secondary'>
|
||||
Tekan dua kali untuk memilih tanggal awal
|
||||
<small className='text-base-content/65'>
|
||||
Tekan dua kali untuk reset tanggal awal
|
||||
</small>
|
||||
)}
|
||||
|
||||
<div className='flex h-full justify-end items-end gap-2'>
|
||||
<Button type='button' color='warning' onClick={handleResetDate}>
|
||||
<div className='flex h-full justify-end items-end gap-1.5 mt-3'>
|
||||
<Button
|
||||
type='button'
|
||||
color='none'
|
||||
className='bg-transparent hover:bg-base-content/10 border-none text-base text-base-content/65 px-3'
|
||||
onClick={handleResetDate}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
{isRange && (
|
||||
<Button type='button' onClick={handleSaveDate}>
|
||||
<Button
|
||||
type='button'
|
||||
className='rounded-lg px-3 py-2 text-white'
|
||||
onClick={handleSaveDate}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -226,7 +226,7 @@ const DashboardProduction = () => {
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'p-2 rounded-lg font-semibold text-sm gap-1.5',
|
||||
'rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
import Menu from '@/components/menu/Menu';
|
||||
import MenuItem from '@/components/menu/MenuItem';
|
||||
@@ -721,24 +722,18 @@ const DashboardLineChart = ({
|
||||
return (
|
||||
<div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
|
||||
{/* Chart icon */}
|
||||
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
|
||||
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<DataStateSkeleton
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
description='Please change your filters to get the data.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Icon } from '@iconify/react';
|
||||
import { DashboardMeta } from '@/types/api/dashboard/dashboard';
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
|
||||
const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
|
||||
return (
|
||||
@@ -24,50 +25,35 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
|
||||
{!meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='mb-2'>
|
||||
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
|
||||
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
No Filters Selected
|
||||
</h3>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
Please choose filters to narrow down your results and make
|
||||
your search easier.
|
||||
</p>
|
||||
<DataStateSkeleton
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='No Filters Selected'
|
||||
description='Please choose filters to narrow down your results and make your search easier.'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
|
||||
<div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<DataStateSkeleton
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
description='Please change your filters to get the data.'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Tabs from '@/components/Tabs';
|
||||
import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
|
||||
import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
|
||||
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
|
||||
|
||||
const FinanceTabs = () => {
|
||||
const [activeTabId, setActiveTabId] = useState<string>('1');
|
||||
const tabActions = useFinanceTabStore((state) => state.tabActions);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: '1',
|
||||
label: 'Rekapitulasi Hutang Ke Supplier',
|
||||
|
||||
content: <DebtSupplierTab />,
|
||||
content: <DebtSupplierTab tabId={'1'} />,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'Kontrol Pembayaran Customer',
|
||||
|
||||
content: <CustomerPaymentTab />,
|
||||
content: <CustomerPaymentTab tabId={'2'} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<Tabs tabs={tabs} variant='lifted' />
|
||||
<section className='w-full'>
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
variant='boxed'
|
||||
activeTabId={activeTabId}
|
||||
onTabChange={setActiveTabId}
|
||||
className={{
|
||||
tabHeaderWrapper:
|
||||
'justify-between items-center p-3 border-b border-base-content/10',
|
||||
tab: 'w-fit',
|
||||
content: 'p-0 m-0',
|
||||
}}
|
||||
sideContent={tabActions[activeTabId] || null}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -281,16 +281,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
|
||||
<Text>No</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
|
||||
<Text>No. PR</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
|
||||
<Text>No. PO</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
|
||||
<Text>Tgl Terima/Bayar</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
|
||||
<Text>Tgl PO</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}>
|
||||
@@ -320,7 +320,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
|
||||
<Text>Status</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
|
||||
<View
|
||||
style={[
|
||||
pdfStyles.tableCellHeader,
|
||||
{ flex: 1, borderRight: 'none' },
|
||||
]}
|
||||
>
|
||||
<Text>No. Perjalanan</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -330,16 +335,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
|
||||
<Text></Text> {/* NO */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text></Text> {/* No. PR */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text></Text> {/* No. PO */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
|
||||
<Text></Text> {/* Tgl Terima/Bayar */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
|
||||
<Text></Text> {/* Tgl PO */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
|
||||
@@ -381,8 +386,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
|
||||
<Text></Text> {/* Status */}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text></Text> {/* No. Perjalanan */}
|
||||
<View
|
||||
style={[
|
||||
pdfStyles.tableCell, // No. Perjalanan
|
||||
{ flex: 1, borderRight: 'none' },
|
||||
]}
|
||||
>
|
||||
<Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -400,13 +410,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
|
||||
<Text>{index + 1}</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text>{item.pr_number || '-'}</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text>{item.po_number || '-'}</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
|
||||
<Text>
|
||||
{item.received_date
|
||||
? item.received_date != '-'
|
||||
@@ -415,7 +425,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
: '-'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
|
||||
<Text>
|
||||
{item.po_date
|
||||
? item.po_date != '-'
|
||||
@@ -526,7 +536,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<Text>-</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<View
|
||||
style={[
|
||||
pdfStyles.tableCell, // No. Perjalanan
|
||||
{ flex: 1, borderRight: 'none' },
|
||||
]}
|
||||
>
|
||||
<Text>{item.travel_number || '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -538,18 +553,18 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
|
||||
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
|
||||
<Text>Total</Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
|
||||
<Text>{formatNumber(supplierReport.total.aging)} Hari</Text>
|
||||
</View>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
import Table from '@/components/Table';
|
||||
import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
const CustomerSupplierSkeleton = ({
|
||||
columns,
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
}: {
|
||||
columns: ColumnDef<CustomerPaymentRow>[];
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className='relative size-full'>
|
||||
<Table
|
||||
data={[]}
|
||||
columns={columns}
|
||||
isLoading={true}
|
||||
className={{
|
||||
skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
|
||||
headerColumnClassName: 'whitespace-nowrap',
|
||||
containerClassName: 'mb-0 overflow-hidden',
|
||||
tableWrapperClassName: 'overflow-hidden',
|
||||
}}
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<DataStateSkeleton icon={icon} title={title} description={subtitle} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerSupplierSkeleton;
|
||||
@@ -0,0 +1,38 @@
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
import Table from '@/components/Table';
|
||||
import { DebtRow } from '@/types/api/report/debt-supplier';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
const DebtSupplierSkeleton = ({
|
||||
columns,
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
}: {
|
||||
columns: ColumnDef<DebtRow>[];
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className='relative size-full'>
|
||||
<Table
|
||||
data={[]}
|
||||
columns={columns}
|
||||
isLoading={true}
|
||||
className={{
|
||||
skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
|
||||
headerColumnClassName: 'whitespace-nowrap',
|
||||
containerClassName: 'mb-0 overflow-hidden',
|
||||
tableWrapperClassName: 'overflow-hidden',
|
||||
}}
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<DataStateSkeleton icon={icon} title={title} description={subtitle} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DebtSupplierSkeleton;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Card from '@/components/Card';
|
||||
@@ -11,9 +11,10 @@ import { FinanceApi } from '@/services/api/report/finance-report';
|
||||
import { UserApi } from '@/services/api/user';
|
||||
import Table from '@/components/Table';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
|
||||
import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
|
||||
import {
|
||||
CustomerPaymentReport,
|
||||
CustomerPaymentRow,
|
||||
CustomerPaymentSummary,
|
||||
} from '@/types/api/report/customer-payment';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
@@ -26,8 +27,14 @@ import { useModal } from '@/components/Modal';
|
||||
import toast from 'react-hot-toast';
|
||||
import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
|
||||
import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
|
||||
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
|
||||
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
|
||||
|
||||
const CustomerPaymentTab = () => {
|
||||
interface CustomerPaymentTabProps {
|
||||
tabId: string;
|
||||
}
|
||||
|
||||
const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
// ===== STATE MANAGEMENT =====
|
||||
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
|
||||
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
||||
@@ -111,6 +118,10 @@ const CustomerPaymentTab = () => {
|
||||
};
|
||||
|
||||
// ===== FILTER HANDLERS =====
|
||||
const handleFilterModalOpen = useCallback(() => {
|
||||
filterModal.openModal();
|
||||
}, [filterModal]);
|
||||
|
||||
const handleResetFilters = useCallback(() => {
|
||||
setIsSubmitted(false);
|
||||
setFilterCustomer([]);
|
||||
@@ -298,6 +309,92 @@ const CustomerPaymentTab = () => {
|
||||
}
|
||||
}, [customerPaymentExport]);
|
||||
|
||||
// ===== REGISTER TAB ACTIONS TO STORE =====
|
||||
const setTabActions = useFinanceTabStore((state) => state.setTabActions);
|
||||
const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
|
||||
|
||||
useEffect(() => {
|
||||
setTabActions(
|
||||
tabId,
|
||||
<div className='flex flex-row gap-3'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
onClick={handleFilterModalOpen}
|
||||
className={cn(
|
||||
'px-3 py-2.5',
|
||||
'rounded-lg! font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
|
||||
hasFilters && 'border-primary-gradient text-primary'
|
||||
)}
|
||||
>
|
||||
<Icon icon='heroicons:funnel' width={18} height={18} />
|
||||
Filter
|
||||
{hasFilters && (
|
||||
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
|
||||
{activeFiltersCount}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
isLoading={isAnyExportLoading}
|
||||
className={cn(
|
||||
'px-3 py-2.5',
|
||||
'rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
<Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
|
||||
Export
|
||||
<div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon width={14} height={14} icon='heroicons:chevron-down' />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
align='end'
|
||||
className={{
|
||||
content:
|
||||
'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
|
||||
}}
|
||||
>
|
||||
<Menu className='p-0 w-full'>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='Excel'
|
||||
onClick={handleExportExcel}
|
||||
/>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPdf}
|
||||
/>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}, [
|
||||
tabId,
|
||||
hasFilters,
|
||||
activeFiltersCount,
|
||||
isAnyExportLoading,
|
||||
handleExportExcel,
|
||||
handleExportPdf,
|
||||
filterModal.open,
|
||||
setTabActions,
|
||||
]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearTabActions(tabId);
|
||||
};
|
||||
}, [tabId, clearTabActions]);
|
||||
|
||||
const getTableColumns = (
|
||||
summary: CustomerPaymentSummary
|
||||
): ColumnDef<CustomerPaymentReport['rows'][0]>[] => {
|
||||
@@ -552,192 +649,40 @@ const CustomerPaymentTab = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='w-full p-0 sm:p-4'>
|
||||
<Card
|
||||
subtitle='Laporan > Kontrol Pembayaran Customer'
|
||||
className={{ wrapper: 'w-full', body: 'p-1!' }}
|
||||
>
|
||||
<div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
|
||||
<Button
|
||||
variant='outline'
|
||||
onClick={filterModal.openModal}
|
||||
className={
|
||||
hasFilters
|
||||
? 'bg-linear-to-b from-[#0069E0]/40 to-white text-[#0069E0] rounded-lg'
|
||||
: 'rounded-lg'
|
||||
}
|
||||
>
|
||||
<Icon icon='heroicons:funnel' width={18} height={18} />
|
||||
Filter
|
||||
{hasFilters && (
|
||||
<Badge
|
||||
variant='default'
|
||||
className={{
|
||||
badge:
|
||||
'rounded-lg px-1.5 py-2.5 text-xs font-semibold bg-error text-white',
|
||||
}}
|
||||
>
|
||||
{activeFiltersCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
isLoading={isAnyExportLoading}
|
||||
className='rounded-lg'
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
Export
|
||||
</Button>
|
||||
}
|
||||
align='end'
|
||||
>
|
||||
<Menu className={'w-full'}>
|
||||
<MenuItem title='Excel' onClick={handleExportExcel} />
|
||||
<MenuItem title='PDF' onClick={handleExportPdf} />
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
{/* Filter Modal */}
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-semibold'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className='space-y-4 px-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
|
||||
<div>
|
||||
<DateInput
|
||||
label='Tanggal'
|
||||
name='start_date'
|
||||
value={filterStartDate}
|
||||
onChange={(e) => {
|
||||
setFilterStartDate(e.target.value);
|
||||
}}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<DateInput
|
||||
label=' '
|
||||
name='end_date'
|
||||
value={filterEndDate}
|
||||
onChange={(e) => {
|
||||
setFilterEndDate(e.target.value);
|
||||
}}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SelectInputCheckbox
|
||||
label='Customer'
|
||||
placeholder='Pilih Customer'
|
||||
options={customerOptions}
|
||||
value={filterCustomer}
|
||||
onChange={(val) => {
|
||||
setFilterCustomer(
|
||||
Array.isArray(val) ? val : val ? [val] : []
|
||||
);
|
||||
}}
|
||||
onInputChange={setCustomerInputValue}
|
||||
isLoading={isLoadingCustomers}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreCustomers}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TODO: Uncomment when BE is ready */}
|
||||
{/* <div>
|
||||
<SelectInputCheckbox
|
||||
label='Sales'
|
||||
placeholder='Pilih Sales'
|
||||
options={salesOptions}
|
||||
value={filterSales}
|
||||
onChange={(val) => {
|
||||
setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
|
||||
}}
|
||||
onInputChange={setSalesInputValue}
|
||||
isLoading={isLoadingSales}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreSales}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
{/* TODO: Uncomment when BE is ready */}
|
||||
{/* <div>
|
||||
<SelectInput
|
||||
label='Filter Berdasarkan'
|
||||
placeholder='Pilih Filter Berdasarkan'
|
||||
options={dataTypeOptions}
|
||||
value={dataTypeOptions[0]}
|
||||
isDisabled={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
onClick={handleResetFilters}
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
className='me-4 min-w-36 rounded-lg'
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||
{!isSubmitted ? (
|
||||
<div className='mt-6 text-center text-gray-500'>
|
||||
Silakan klik tombol Filter untuk mengatur filter dan menampilkan
|
||||
data.
|
||||
</div>
|
||||
<CustomerSupplierSkeleton
|
||||
columns={getTableColumns({} as CustomerPaymentSummary)}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='No Filters Selected'
|
||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
||||
/>
|
||||
) : isLoading ? (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className='mt-6 text-center text-gray-500'>
|
||||
Tidak ada data yang dapat ditampilkan...
|
||||
</div>
|
||||
<CustomerSupplierSkeleton
|
||||
columns={getTableColumns({} as CustomerPaymentSummary)}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
subtitle='Please change your filters to get the data.'
|
||||
/>
|
||||
) : (
|
||||
data.map((customerReport) => {
|
||||
const summary = customerReport.summary || {
|
||||
@@ -757,15 +702,17 @@ const CustomerPaymentTab = () => {
|
||||
title={customerReport.customer.name}
|
||||
subtitle={`(${customerReport.customer.address})`}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-2xl',
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
body: 'p-0',
|
||||
title:
|
||||
'py-1.5 px-3 bg-primary text-white text-lg font-normal',
|
||||
'px-2 py-1.5 font-normal text-sm bg-primary text-white',
|
||||
subtitle:
|
||||
'px-3 pb-1 bg-primary text-white text-sm font-normal',
|
||||
'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
|
||||
collapsible: 'rounded-lg',
|
||||
}}
|
||||
variant='bordered'
|
||||
collapsible={true}
|
||||
defaultCollapsed={true}
|
||||
>
|
||||
<Table
|
||||
data={[
|
||||
@@ -779,7 +726,8 @@ const CustomerPaymentTab = () => {
|
||||
renderFooter={customerReport.rows.length > 0}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
tableWrapperClassName:
|
||||
'overflow-x-auto rounded-tr-none rounded-tl-none',
|
||||
tableClassName: 'w-full table-auto text-sm',
|
||||
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
|
||||
headerColumnClassName:
|
||||
@@ -799,8 +747,8 @@ const CustomerPaymentTab = () => {
|
||||
if (row.index === 0) {
|
||||
return (
|
||||
<tr
|
||||
className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
|
||||
key={row.index}
|
||||
className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
|
||||
>
|
||||
<td
|
||||
className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
|
||||
@@ -830,8 +778,123 @@ const CustomerPaymentTab = () => {
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Modal */}
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-medium text-sm'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className='p-4 flex flex-col gap-1.5'>
|
||||
<div>
|
||||
<label className='block text-xs font-semibold text-base-content py-2'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex flex-row gap-1.5 items-center justify-between'>
|
||||
<DateInput
|
||||
name='start_date'
|
||||
value={filterStartDate}
|
||||
onChange={(e) => {
|
||||
setFilterStartDate(e.target.value);
|
||||
}}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
/>
|
||||
<hr className='w-full max-w-3 h-px border-base-content/10' />
|
||||
|
||||
<DateInput
|
||||
name='end_date'
|
||||
value={filterEndDate}
|
||||
onChange={(e) => {
|
||||
setFilterEndDate(e.target.value);
|
||||
}}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SelectInputCheckbox
|
||||
label='Customer'
|
||||
placeholder='Pilih Customer'
|
||||
options={customerOptions}
|
||||
value={filterCustomer}
|
||||
onChange={(val) => {
|
||||
setFilterCustomer(Array.isArray(val) ? val : val ? [val] : []);
|
||||
}}
|
||||
onInputChange={setCustomerInputValue}
|
||||
isLoading={isLoadingCustomers}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreCustomers}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
{/* TODO: Uncomment when BE is ready */}
|
||||
{/* <div>
|
||||
<SelectInputCheckbox
|
||||
label='Sales'
|
||||
placeholder='Pilih Sales'
|
||||
options={salesOptions}
|
||||
value={filterSales}
|
||||
onChange={(val) => {
|
||||
setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
|
||||
}}
|
||||
onInputChange={setSalesInputValue}
|
||||
isLoading={isLoadingSales}
|
||||
isClearable
|
||||
onMenuScrollToBottom={loadMoreSales}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
{/* TODO: Uncomment when BE is ready */}
|
||||
{/* <div>
|
||||
<SelectInput
|
||||
label='Filter Berdasarkan'
|
||||
placeholder='Pilih Filter Berdasarkan'
|
||||
options={dataTypeOptions}
|
||||
value={dataTypeOptions[0]}
|
||||
isDisabled={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
{/* Action Buttons */}
|
||||
</div>
|
||||
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
|
||||
onClick={handleResetFilters}
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -2,10 +2,7 @@ import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import { OptionType, useSelect } from '@/components/input/SelectInput';
|
||||
import Menu from '@/components/menu/Menu';
|
||||
import MenuItem from '@/components/menu/MenuItem';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
@@ -22,7 +19,7 @@ import { generateDebtSupplierExcel } from '@/components/pages/report/finance/exp
|
||||
import { generateDebtSupplierPDF } from '@/components/pages/report/finance/export/DebtSupllierExportPDF';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
import { DebtSupplierApi } from '@/services/api/report/debt-supplier';
|
||||
@@ -32,11 +29,14 @@ import {
|
||||
DebtSupplierFilterType,
|
||||
} from '@/components/pages/report/finance/filter/DebtSupplierFilter';
|
||||
import ButtonFilter from '@/components/helper/ButtonFilter';
|
||||
import Badge from '@/components/Badge';
|
||||
import { Color } from '@/types/theme';
|
||||
import { Supplier } from '@/types/api/master-data/supplier';
|
||||
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
|
||||
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
|
||||
const dueStatus: Record<string, Color> = {
|
||||
'Sudah Jatuh Tempo': 'error',
|
||||
@@ -60,22 +60,14 @@ const getPillBadge = (
|
||||
? dueStatus[statusText] || 'neutral'
|
||||
: paymentStatus[statusText] || 'neutral';
|
||||
|
||||
return (
|
||||
<Badge
|
||||
color={color as Color}
|
||||
size='sm'
|
||||
variant='soft'
|
||||
className={{
|
||||
badge: `py-2.5 px-2 font-medium text-base-content rounded-full border border-${color}`,
|
||||
}}
|
||||
statusIndicator
|
||||
>
|
||||
{statusText}
|
||||
</Badge>
|
||||
);
|
||||
return <StatusBadge color={color as Color} text={statusText} />;
|
||||
};
|
||||
|
||||
const DebtSupplierTab = () => {
|
||||
interface DebtSupplierTabProps {
|
||||
tabId: string;
|
||||
}
|
||||
|
||||
const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
||||
// ===== STATE MANAGEMENT =====
|
||||
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
|
||||
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
||||
@@ -271,7 +263,78 @@ const DebtSupplierTab = () => {
|
||||
}
|
||||
}, [debtSupplierExport]);
|
||||
|
||||
const getTableColumns = (supplier: DebtSupplier): ColumnDef<DebtRow>[] => [
|
||||
// ===== REGISTER TAB ACTIONS TO STORE =====
|
||||
const setTabActions = useFinanceTabStore((state) => state.setTabActions);
|
||||
const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
|
||||
|
||||
useEffect(() => {
|
||||
setTabActions(
|
||||
tabId,
|
||||
<div className='flex flex-row gap-3 '>
|
||||
<ButtonFilter
|
||||
values={formik.values}
|
||||
onClick={handleFilterModalOpen}
|
||||
variant='outline'
|
||||
className='px-3 py-2.5'
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
isLoading={isAnyExportLoading}
|
||||
className={cn(
|
||||
'px-3 py-2.5',
|
||||
'rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
<Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
|
||||
Export
|
||||
<div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon width={14} height={14} icon='heroicons:chevron-down' />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
align='end'
|
||||
className={{
|
||||
content:
|
||||
'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
|
||||
}}
|
||||
>
|
||||
<Menu className='p-0 w-full'>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='Excel'
|
||||
onClick={handleExportExcel}
|
||||
/>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPdf}
|
||||
/>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}, [
|
||||
tabId,
|
||||
formik.values,
|
||||
isAnyExportLoading,
|
||||
handleExportExcel,
|
||||
handleExportPdf,
|
||||
setTabActions,
|
||||
]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearTabActions(tabId);
|
||||
};
|
||||
}, [tabId, clearTabActions]);
|
||||
|
||||
const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
|
||||
{
|
||||
id: 'no',
|
||||
header: 'No',
|
||||
@@ -337,8 +400,10 @@ const DebtSupplierTab = () => {
|
||||
return <div className='text-center'>{formatNumber(value)} Hari</div>;
|
||||
},
|
||||
footer: () => {
|
||||
const value = supplier.total.aging;
|
||||
return <div className='text-center'>{formatNumber(value)} Hari</div>;
|
||||
const value = supplier?.total.aging;
|
||||
return (
|
||||
<div className='text-center'>{formatNumber(value || 0)} Hari</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -399,10 +464,10 @@ const DebtSupplierTab = () => {
|
||||
);
|
||||
},
|
||||
footer: () => {
|
||||
const value = supplier.total.total_price;
|
||||
const value = supplier?.total.total_price;
|
||||
return (
|
||||
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value)}
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -421,10 +486,10 @@ const DebtSupplierTab = () => {
|
||||
);
|
||||
},
|
||||
footer: () => {
|
||||
const value = supplier.total.payment_price;
|
||||
const value = supplier?.total.payment_price;
|
||||
return (
|
||||
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value)}
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -443,10 +508,10 @@ const DebtSupplierTab = () => {
|
||||
);
|
||||
},
|
||||
footer: () => {
|
||||
const value = supplier.total.debt_price;
|
||||
const value = supplier?.total.debt_price;
|
||||
return (
|
||||
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value)}
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@@ -478,52 +543,39 @@ const DebtSupplierTab = () => {
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-4 flex flex-col gap-4'>
|
||||
<Card
|
||||
subtitle='Laporan > Rekapitulasi Hutang ke Supplier'
|
||||
className={{ wrapper: 'w-full', body: 'p-1!' }}
|
||||
>
|
||||
<div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
|
||||
<ButtonFilter
|
||||
values={formik.values}
|
||||
onClick={handleFilterModalOpen}
|
||||
variant='outline'
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button variant='outline' isLoading={isAnyExportLoading}>
|
||||
<Icon
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
Export
|
||||
</Button>
|
||||
}
|
||||
align='end'
|
||||
>
|
||||
<Menu>
|
||||
<MenuItem title='Excel' onClick={handleExportExcel} />
|
||||
<MenuItem title='PDF' onClick={handleExportPdf} />
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||
{!isSubmitted ? (
|
||||
<div className='mt-6 text-center text-gray-500'>
|
||||
Silakan klik tombol Filter untuk mengatur filter dan menampilkan
|
||||
data.
|
||||
</div>
|
||||
<DebtSupplierSkeleton
|
||||
columns={getTableColumns()}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='No Filters Selected'
|
||||
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
||||
/>
|
||||
) : isLoading ? (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className='mt-6 text-center text-gray-500'>
|
||||
Tidak ada data yang dapat ditampilkan...
|
||||
</div>
|
||||
<DebtSupplierSkeleton
|
||||
columns={getTableColumns()}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
subtitle='Please change your filters to get the data.'
|
||||
/>
|
||||
) : (
|
||||
data.map((supplierReport) => {
|
||||
return (
|
||||
@@ -531,10 +583,11 @@ const DebtSupplierTab = () => {
|
||||
key={supplierReport.supplier.id}
|
||||
title={supplierReport.supplier.name}
|
||||
className={{
|
||||
wrapper: 'w-full !rounded-lg',
|
||||
body: 'p-0 rounded-lg',
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
body: 'p-0',
|
||||
title:
|
||||
'ps-2 pt-1 pb-1 font-normal text-md bg-primary text-white',
|
||||
'px-2 py-1.5 font-normal text-sm bg-primary text-white',
|
||||
collapsible: 'rounded-lg',
|
||||
}}
|
||||
variant='bordered'
|
||||
collapsible={true}
|
||||
@@ -551,8 +604,9 @@ const DebtSupplierTab = () => {
|
||||
pageSize={supplierReport.rows.length + 1}
|
||||
renderFooter={supplierReport.rows.length > 0}
|
||||
className={{
|
||||
containerClassName: 'w-full',
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
containerClassName: 'w-full mb-0',
|
||||
tableWrapperClassName:
|
||||
'overflow-x-auto rounded-tr-none rounded-tl-none',
|
||||
headerColumnClassName: cn(
|
||||
TABLE_DEFAULT_STYLING.headerColumnClassName,
|
||||
'whitespace-nowrap'
|
||||
@@ -617,33 +671,34 @@ const DebtSupplierTab = () => {
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
|
||||
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
<form
|
||||
className='space-y-6'
|
||||
onSubmit={formik.handleSubmit}
|
||||
onReset={formik.handleReset}
|
||||
>
|
||||
<form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
|
||||
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-semibold'>Filter Data</h3>
|
||||
<h3 className='font-medium text-sm'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
type='button'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
|
||||
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className='space-y-4 px-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
|
||||
<div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className='p-4 flex flex-col gap-1.5'>
|
||||
<div>
|
||||
<label className='block text-xs font-semibold text-base-content py-2'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex flex-row gap-1.5 items-center justify-between'>
|
||||
<DateInput
|
||||
label='Tanggal'
|
||||
name='startDate'
|
||||
value={formik.values.startDate || ''}
|
||||
onChange={(e) => {
|
||||
@@ -654,12 +709,10 @@ const DebtSupplierTab = () => {
|
||||
formik.touched.startDate && !!formik.errors.startDate
|
||||
}
|
||||
errorMessage={formik.errors.startDate}
|
||||
isNestedModal
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-auto'>
|
||||
<hr className='w-full max-w-3 h-px border-base-content/10'></hr>
|
||||
<DateInput
|
||||
label=' '
|
||||
name='endDate'
|
||||
value={formik.values.endDate || ''}
|
||||
onChange={(e) => {
|
||||
@@ -668,6 +721,7 @@ const DebtSupplierTab = () => {
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isError={formik.touched.endDate && !!formik.errors.endDate}
|
||||
errorMessage={formik.errors.endDate}
|
||||
isNestedModal
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -730,15 +784,19 @@ const DebtSupplierTab = () => {
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
color='none'
|
||||
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
|
||||
type='reset'
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button className='me-4 min-w-36 rounded-lg' type='submit'>
|
||||
<Button
|
||||
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
|
||||
type='submit'
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
|
||||
export type FinanceTabActionsSlice = {
|
||||
// State - actions per tab ID
|
||||
tabActions: Record<string, ReactNode>;
|
||||
|
||||
// Actions
|
||||
setTabActions: (tabId: string, actions: ReactNode) => void;
|
||||
clearTabActions: (tabId: string) => void;
|
||||
clearAllTabActions: () => void;
|
||||
};
|
||||
|
||||
export const useFinanceTabStore = create<FinanceTabActionsSlice>()(
|
||||
devtools(
|
||||
(set) => ({
|
||||
tabActions: {},
|
||||
|
||||
setTabActions: (tabId, actions) =>
|
||||
set(
|
||||
(state) => ({
|
||||
tabActions: {
|
||||
...state.tabActions,
|
||||
[tabId]: actions,
|
||||
},
|
||||
}),
|
||||
false,
|
||||
'setTabActions'
|
||||
),
|
||||
|
||||
clearTabActions: (tabId) =>
|
||||
set(
|
||||
(state) => {
|
||||
const { [tabId]: _, ...rest } = state.tabActions;
|
||||
return { tabActions: rest };
|
||||
},
|
||||
false,
|
||||
'clearTabActions'
|
||||
),
|
||||
|
||||
clearAllTabActions: () =>
|
||||
set({ tabActions: {} }, false, 'clearAllTabActions'),
|
||||
}),
|
||||
{
|
||||
name: 'FinanceTabStore',
|
||||
}
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user