gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 21:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'development' into fix/project-flock

Browse Source
This commit is contained in:
ValdiANS
2026-02-02 08:50:53 +07:00
parent 4e801bf744 66c8f67245
commit 448fb51c81
44 changed files with 1721 additions and 1078 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/production/transfer-to-laying/page.tsx
+12 -2
View File
@@ -1,15 +1,25 @@
import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
import RequirePermission from '@/components/helper/RequirePermission';
const TransferToLaying = () => {
return (
<section className='w-full'>
<TransferToLayingsTable />
<TransferToLayingFormModal />
<RequirePermission
permissions={[
'lti.production.transfer_to_laying.create',
'lti.production.transfer_to_laying.update',
]}
>
<TransferToLayingFormModal />
</RequirePermission>
<TransferToLayingDetailModal />
<RequirePermission permissions='lti.production.transfer_to_laying.detail'>
<TransferToLayingDetailModal />
</RequirePermission>
</section>
);
};
src/components/Card.tsx
+5
View File
@@ -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>
src/components/Drawer.tsx
+5 -3
View File
@@ -16,7 +16,6 @@ interface DrawerProps {
onBackdropClick?: () => void;
closeOnBackdropClick?: boolean;
expandedContent?: ReactNode;
expandedWidth?: string;
}
type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
drawerSide?: string;
drawerOverlay?: string;
drawerSidebarContent?: string;
drawerExpandedContent?: string;
};
const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
onBackdropClick,
closeOnBackdropClick = true,
expandedContent,
expandedWidth = 'w-[400px]',
}: DrawerProps) => {
const getDrawerClassNames = (): DrawerClassName => {
const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
: 'w-full max-w-[300px] lg:w-[300px]';
}
if (className?.drawerSidebarContent) {
return '';
}
return 'w-full sm:min-w-120 sm:w-fit';
};
@@ -174,7 +176,7 @@ const Drawer = ({
<div
className={cn(
'border-l border-gray-200 bg-white flex flex-col h-full',
expandedWidth
className?.drawerExpandedContent
)}
>
<div className='overflow-y-auto flex-1 h-full'>
src/components/Table.tsx
+12 -2
View File
@@ -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>
src/components/Tabs.tsx
+23 -12
View File
@@ -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 && (
src/components/helper/ButtonFilter.tsx
+4 -4
View File
@@ -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>
)}
src/components/helper/PermissionNotFound.tsx
+9 -2
View File
@@ -1,10 +1,17 @@
import Button from '@/components/Button';
const PermissionNotFound = () => {
return (
<div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
<h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
<h2 className='text-2xl font-bold text-error'>
Hak Akses Tidak Ditemukan
</h2>
<p className='text-gray-600 text-center'>
You do not have permission to access this page.
Anda tidak memiliki hak akses untuk mengakses halaman ini.
</p>
<Button href='/dashboard' className='text-base-100'>
Kembali ke Dashboard
</Button>
</div>
);
};
src/components/helper/StatusBadge.tsx
+2
View File
@@ -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' />
src/components/helper/drawer/DrawerHeader.tsx
+9 -3
View File
@@ -58,6 +58,7 @@ const DrawerHeader = ({
if (leftIconOnClick) {
return (
<button
type='button'
onClick={leftIconOnClick}
className='hover:text-gray-400 bg-transparent border-none p-0'
>
@@ -72,12 +73,12 @@ const DrawerHeader = ({
return (
<div
className={cn(
'flex flex-row justify-between items-center px-4 pt-4',
'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
className
)}
>
{/* Left Side */}
<div className='flex flex-row h-full gap-2 items-center'>
<div className='flex flex-row h-full gap-3 items-center'>
{renderLeftIcon()}
{showDivider && subtitle && (
@@ -85,7 +86,12 @@ const DrawerHeader = ({
)}
{subtitle && (
<div className={cn('text-sm text-neutral', subtitleClassName)}>
<div
className={cn(
'text-sm font-medium text-base-content/50',
subtitleClassName
)}
>
{subtitle}
</div>
)}
src/components/helper/skeleton/DataStateSkeleton.tsx
+32
View File
@@ -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;
src/components/helper/skeleton/IconSkeleton.tsx
+33
View File
@@ -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;
src/components/input/DateInput.tsx
+20 -7
View File
@@ -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>
)}
src/components/pages/dashboard/DashboardProduction.tsx
+1 -1
View File
@@ -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'
)}
>
src/components/pages/dashboard/chart/DashboardLineChart.tsx
+7 -12
View File
@@ -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>
);
}
src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx
+19 -33
View File
@@ -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>
src/components/pages/inventory/movement/form/MovementForm.tsx
+32 -4
View File
@@ -86,6 +86,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
}
// ===== USE SELECT HOOKS =====
const {
setInputValue: setSourceWarehouseSelectInputValue,
isLoadingOptions: isLoadingSourceWarehouses,
loadMore: loadMoreSourceWarehouses,
rawData: sourceWarehouses,
} = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name', 'search', {
transfer_context: 'inventory_transfer',
});
const {
setInputValue: setWarehouseSelectInputValue,
isLoadingOptions: isLoadingWarehouses,
@@ -136,6 +145,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
return stockMap;
}, [allProductWarehouses]);
const sourceWarehouseOptions = useMemo(() => {
if (!isResponseSuccess(sourceWarehouses)) return [];
return (
sourceWarehouses?.data.map((w) => {
warehouseStockMap.get(w.id);
return {
value: w.id,
label: w.name,
area: w.area?.name,
location:
'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
? w.location?.name
: undefined,
};
}) || []
);
}, [sourceWarehouses, warehouseStockMap]);
const warehouseOptions = useMemo(() => {
if (!isResponseSuccess(warehouses)) return [];
@@ -1354,10 +1382,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
placeholder='Pilih gudang asal...'
value={formik.values.source_warehouse}
onChange={handleSourceWarehouseChange}
options={warehouseOptions}
onInputChange={setWarehouseSelectInputValue}
onMenuScrollToBottom={loadMoreWarehouses}
isLoading={isLoadingWarehouses}
options={sourceWarehouseOptions}
onInputChange={setSourceWarehouseSelectInputValue}
onMenuScrollToBottom={loadMoreSourceWarehouses}
isLoading={isLoadingSourceWarehouses}
isError={
formik.touched.source_warehouse_id &&
Boolean(formik.errors.source_warehouse_id)
src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+1
View File
@@ -98,6 +98,7 @@ const TransferToLayingFormModal = () => {
'search',
{
category: 'GROWING',
transfer_context: 'transfer_to_laying',
}
);
src/components/pages/production/uniformity/UniformityChart.tsx
+42 -25
View File
@@ -5,6 +5,7 @@ import UniformityGaugeChart from '@/components/pages/production/uniformity/chart
import UniformityBarChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton';
import UniformityGaugeChartSkeleton from '@/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton';
import { Uniformity, type ChartData } from '@/types/api/production/uniformity';
import { Icon } from '@iconify/react';
interface UniformityChartProps {
uniformityData?: Uniformity | null;
@@ -101,15 +102,26 @@ const UniformityChart = ({
const shouldShowEmptyState = !isFiltered;
return (
<section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
<section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-[1fr_350px] gap-3'>
<Card
title='Performance Overview ⓘ'
variant='bordered'
className={{
wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
body: 'h-96',
wrapper:
'2xl:col-span-1 w-full rounded-xl border border-base-content/10',
body: 'h-96 p-4',
}}
>
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
<div className='text-base font-semibold leading-7 flex gap-3 items-center'>
Performance Overview{' '}
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
className='inline text-neutral-500'
/>
</div>
</div>
<div className='w-full h-full flex items-center justify-center'>
{shouldShowEmptyState ||
!uniformityData ||
@@ -120,26 +132,31 @@ const UniformityChart = ({
)}
</div>
</Card>
{shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
<Card
variant='bordered'
title='Weekly Performance ⓘ'
className={{
wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
body: 'h-110',
}}
>
<Card
variant='bordered'
className={{
wrapper:
'2xl:col-span-1 w-full rounded-xl border border-base-content/10',
body:
shouldShowEmptyState || !uniformityData || !gaugeChartData
? 'h-110 p-4'
: 'p-4',
}}
>
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-3'>
<div className='text-base font-semibold leading-7 flex gap-3 items-center'>
Weekly Performance{' '}
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
className='inline text-neutral-500'
/>
</div>
</div>
{shouldShowEmptyState || !uniformityData || !gaugeChartData ? (
<UniformityGaugeChartSkeleton />
</Card>
) : (
<Card
variant='bordered'
title='Weekly Performance ⓘ'
className={{
wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
body: 'p-4',
}}
>
) : (
<UniformityGaugeChart
value={gaugeChartData.value}
label={gaugeChartData.label}
@@ -150,8 +167,8 @@ const UniformityChart = ({
hasPrevWeek={gaugeChartData.hasPrevWeek}
hasNextWeek={gaugeChartData.hasNextWeek}
/>
</Card>
)}
)}
</Card>
</section>
);
};
src/components/pages/production/uniformity/UniformityPageWrapper.tsx
+7 -4
View File
@@ -3,7 +3,7 @@
import { usePathname, useRouter } from 'next/navigation';
import Drawer from '@/components/Drawer';
import React, { ReactNode } from 'react';
import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
import Uniformity from '@/app/production/uniformity/page';
import { useUiStore } from '@/stores/ui/ui.store';
export default function UniformityPageWrapper({
@@ -40,8 +40,8 @@ export default function UniformityPageWrapper({
return (
<>
<div className='w-full p-4'>
<UniformityTable />
<div className='w-full'>
<Uniformity />
</div>
<Drawer
@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
zIndex='99999'
sidebarContent={isOpen ? <div className=''>{children}</div> : null}
expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
expandedWidth='w-[500px]'
className={{
drawerSidebarContent: 'w-[446px]',
drawerExpandedContent: 'w-[446px]',
}}
/>
</>
);
src/components/pages/production/uniformity/UniformityTable.tsx
+464 -396
View File
File diff suppressed because it is too large Load Diff
src/components/pages/production/uniformity/chart/UniformityBarChart.tsx
+2 -2
View File
@@ -164,7 +164,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
const margin = {
top: 20,
right: 30,
left: 20,
left: 0,
bottom: 5,
};
@@ -172,7 +172,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
<ResponsiveContainer
width='100%'
height='100%'
className='min-h-[300px] xl:min-h-[350px]'
className='min-h-[270px] xl:min-h-72'
>
<BarChart data={data} margin={margin} barGap={20}>
<defs>
src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+15 -12
View File
@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
</Pie>
</PieChart>
</ResponsiveContainer>
<div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
<span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
<div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
<span className='text-2xl font-medium text-base-content mb-4 leading-8'>
{value}%
</span>
<div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
<span className='text-sm font-medium text-gray-700 mb-32'>
<div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
<span className='text-lg font-medium text-base-content leading-6'>
{label}
</span>
</div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('prev')}
disabled={!hasPrevWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Previous week'
>
<Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<Card
variant='bordered'
className={{
wrapper: 'max-w-xs',
wrapper: 'max-w-40 rounded-lg',
body: 'p-3',
}}
>
<section className='flex items-center justify-center gap-4'>
<div className='grid grid-cols-1 min-w-0 text-center'>
<div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
<span className='text-[#0069E0] font-semibold truncate'>
<div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
<span className='text-primary font-semibold truncate'>
{week}
</span>
</div>
<div className='text-xl font-bold text-[#18181B80]'>
<span className='text-[#0069E0] break-all'>
<div className='text-xl font-bold text-base-content/50'>
<span className='text-primary break-all'>
{formatNumber(currentValue ?? 0)}
</span>
<span className='mx-1 text-gray-400 text-base'>From</span>
<span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
From
</span>
<span className='break-all'>
{formatNumber(totalValue ?? 0)}
</span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('next')}
disabled={!hasNextWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Next week'
>
<Icon icon='heroicons:chevron-right' width={20} height={20} />
src/components/pages/production/uniformity/detail/UniformityDetail.tsx
+42 -26
View File
@@ -7,7 +7,7 @@ import { ColumnDef } from '@tanstack/react-table';
import Button from '@/components/Button';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import Table from '@/components/Table';
import Badge from '@/components/Badge';
import StatusBadge from '@/components/helper/StatusBadge';
import Tooltip from '@/components/Tooltip';
import RequirePermission from '@/components/helper/RequirePermission';
import { UniformityDetail as UniformityDetailType } from '@/types/api/production/uniformity';
@@ -18,8 +18,7 @@ import { UniformityApi } from '@/services/api/uniformity';
import useSWR from 'swr';
import { isResponseSuccess } from '@/lib/api-helper';
import {
getStatusColor,
getStatusIndicatorColor,
getStatusBadgeColor,
getStatusText,
} from '@/components/pages/production/uniformity/uniformity-utils';
import { DetailOptionType } from '@/types/api/production/uniformity';
@@ -150,12 +149,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => {
const id = props.row.original.id;
const { info_umum, latest_approval } = initialValues!;
@@ -178,16 +183,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
if (status) {
return (
<div className='w-full'>
<Badge
statusIndicator={true}
variant='soft'
className={{
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
status: getStatusIndicatorColor(status),
}}
>
{getStatusText(status)}
</Badge>
<StatusBadge
color={getStatusBadgeColor(status)}
text={getStatusText(status)}
/>
</div>
);
}
@@ -258,12 +257,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
},
],
@@ -301,12 +306,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
() => [
{
accessorKey: 'label',
header: 'Label',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
},
{
accessorKey: 'value',
header: 'Value',
enableSorting: false,
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
},
],
@@ -319,18 +330,19 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
<DrawerHeader
leftIconHref='/production/uniformity'
subtitle={`Details`}
subtitleClassName='text-sm text-neutral'
subtitleClassName='text-sm font-medium text-base-content/50'
showDivider
/>
{/* Form Section */}
<div className='divider mt-3.5'></div>
<section className='w-full px-6 mb-6'>
<section className='w-full p-4'>
{initialValues ? (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-3'>
{/* Info Umum */}
<div className=''>
<p className='text-sm font-medium mb-5'>Informasi Umum</p>
<h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Informasi Umum
</h2>
<Table<DetailOptionType>
data={infoUmumTableData}
columns={columnsInfoUmum}
@@ -345,7 +357,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
{/* Sampling and Range */}
{initialValues.sampling && (
<div className=''>
<p className='text-sm font-medium mb-5'>Sampling and Range</p>
<h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range
</h2>
<Table<DetailOptionType>
data={samplingTableData}
columns={columnsSampling}
@@ -361,7 +375,9 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
{/* Result */}
{initialValues.result && (
<div className=''>
<p className='text-sm font-medium mb-5'>Result</p>
<h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Result
</h2>
<Table<DetailOptionType>
data={resultTableData}
columns={resultColumns}
src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx
+12 -32
View File
@@ -10,11 +10,10 @@ import {
UniformityInfoUmum,
} from '@/types/api/production/uniformity';
import Table from '@/components/Table';
import Badge from '@/components/Badge';
import StatusBadge from '@/components/helper/StatusBadge';
import {
getWeightStatusColor,
getWeightStatusIndicatorColor,
getWeightStatusText,
getWeightStatusBadgeColor,
} from '@/components/pages/production/uniformity/uniformity-utils';
import { BodyWeightData } from '@/types/api/production/uniformity';
@@ -51,7 +50,7 @@ const UniformityDetailsPreview = ({
() => [
{
accessorKey: 'number',
header: 'No',
header: 'Number',
cell: (props) => props.row.original.number,
},
{
@@ -65,30 +64,12 @@ const UniformityDetailsPreview = ({
cell: (props) => {
const status = props.row.original.status;
return status ? (
<div className='w-full'>
<Badge
statusIndicator={true}
variant='soft'
className={{
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
status: getWeightStatusIndicatorColor(status),
}}
>
{getWeightStatusText(status)}
</Badge>
</div>
<StatusBadge
color={getWeightStatusBadgeColor(status)}
text={getWeightStatusText(status)}
/>
) : (
<Badge
statusIndicator={true}
variant='soft'
className={{
badge:
'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
status: 'bg-info',
}}
>
Unknown
</Badge>
<StatusBadge color='info' text='Unknown' />
);
},
},
@@ -102,7 +83,7 @@ const UniformityDetailsPreview = ({
<DrawerHeader
leftIcon=''
subtitle={info_umum?.file_name ?? 'Uniformity Details'}
subtitleClassName='text-sm text-neutral line-clamp-1'
subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
showDivider={false}
>
<button
@@ -114,13 +95,12 @@ const UniformityDetailsPreview = ({
</DrawerHeader>
{/* Form Section */}
<div className='divider mt-3.5'></div>
<section className='w-full px-6'>
<section className='w-full p-4'>
{info_umum ? (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-3'>
{/* Body Weight Details */}
{uniformity_details && uniformity_details.length > 0 ? (
<div className='mt-4'>
<div className=''>
<Table<BodyWeightData>
data={tableData}
columns={columnsUniformity}
src/components/pages/production/uniformity/form/UniformityForm.tsx
+32 -28
View File
@@ -493,24 +493,25 @@ const UniformityForm = ({
<>
<section className='w-full'>
<DrawerHeader
leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
leftIconSize={24}
leftIcon={formType == 'add' ? 'heroicons:x-mark' : 'mdi:arrow-left'}
leftIconSize={20}
leftIconHref={
formType == 'add'
? '/production/uniformity'
: `/production/uniformity/detail`
}
leftIconClassName='hover:text-gray-400'
leftIconClassName='hover:text-base-content'
subtitle={formType == 'add' ? 'Add Uniformity' : 'Update Uniformity'}
subtitleClassName='text-sm text-neutral'
subtitleClassName='text-sm font-medium text-base-content/50'
showDivider
/>
<div className='divider mt-3'></div>
<section className='w-full px-6 mb-6'>
<h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
<section className='w-full p-4'>
<h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
Informasi Umum
</h2>
<form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
<form onSubmit={handleFormSubmit} className='flex flex-col'>
<DateInput
required
label='Tanggal'
@@ -581,7 +582,7 @@ const UniformityForm = ({
<label
htmlFor='file-upload-input'
className={cn(
"w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
"w-full text-xs font-semibold leading-5 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
formik.touched.document &&
formik.errors.document &&
'text-red-500'
@@ -597,8 +598,8 @@ const UniformityForm = ({
>
<Icon
icon='heroicons-solid:trash'
width={20}
height={20}
width={15}
height={15}
className='text-gray-400 hover:text-gray-600'
/>
</button>
@@ -610,8 +611,8 @@ const UniformityForm = ({
>
<Icon
icon='heroicons:information-circle'
width={20}
height={20}
width={15}
height={15}
className='text-gray-400 hover:text-gray-600'
/>
</Tooltip>
@@ -621,7 +622,7 @@ const UniformityForm = ({
<section
className={cn(
'h-full w-full border rounded-2xl border-dashed cursor-pointer mt-2',
'h-full w-full border rounded-2xl border-dashed cursor-pointer',
formik.touched.document && formik.errors.document
? 'border-red-500'
: 'border-gray-300'
@@ -756,20 +757,23 @@ const UniformityForm = ({
</div>
{!isNextStep && (
<RequirePermission permissions='lti.production.uniformity.create'>
<Button
type='submit'
color='primary'
className='w-full'
disabled={formik.isSubmitting}
>
{formik.isSubmitting ? (
<span className='loading loading-spinner'></span>
) : (
'Next'
)}
</Button>
</RequirePermission>
<>
<div className='border-t border-base-content/10 -mx-4 mt-4' />
<RequirePermission permissions='lti.production.uniformity.create'>
<Button
type='submit'
color='primary'
className='w-full mt-4 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
disabled={formik.isSubmitting}
>
{formik.isSubmitting ? (
<span className='loading loading-spinner'></span>
) : (
'Next'
)}
</Button>
</RequirePermission>
</>
)}
</form>
</section>
src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx
+14 -7
View File
@@ -50,12 +50,16 @@ const UniformityPreviewForm = () => {
() => [
{
accessorKey: 'number',
header: 'No',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Number</span>
),
cell: (props) => props.row.original.number,
},
{
accessorKey: 'weight',
header: 'Weight (g)',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
),
cell: (props) => <span>{props.row.original.weight}</span>,
},
],
@@ -68,19 +72,18 @@ const UniformityPreviewForm = () => {
<DrawerHeader
leftIcon=''
subtitle={uniformityFormData?.file_name || 'Add Body Weight'}
subtitleClassName='text-sm text-neutral line-clamp-1'
subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
showDivider={false}
>
<Button variant='link' className='p-0 text-error' onClick={handleClose}>
<Tooltip content='Hapus' position='left'>
<Icon icon='mdi:trash-can-outline' width={20} height={20} />
<Icon icon='heroicons-outline:trash' width={18} height={18} />
</Tooltip>
</Button>
</DrawerHeader>
{/* Form Section */}
<div className='divider mt-3.5'></div>
<section className='w-full px-6'>
<section className='w-full p-4'>
{verifyUniformityResult ? (
<div className='flex flex-col gap-4'>
<Table<BodyWeightData>
@@ -90,7 +93,11 @@ const UniformityPreviewForm = () => {
className={{ containerClassName: 'mb-5' }}
/>
<RequirePermission permissions='lti.production.uniformity.create'>
<Button color='primary' onClick={handleNext} className='mb-10'>
<Button
color='primary'
onClick={handleNext}
className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
>
Next
</Button>
</RequirePermission>
src/components/pages/production/uniformity/form/UniformityResultForm.tsx
+36 -40
View File
@@ -14,12 +14,11 @@ import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import { UniformityApi } from '@/services/api/uniformity';
import { isResponseError } from '@/lib/api-helper';
import Badge from '@/components/Badge';
import StatusBadge from '@/components/helper/StatusBadge';
import { formatNumber } from '@/lib/helper';
import {
getWeightStatusColor,
getWeightStatusIndicatorColor,
getWeightStatusText,
getWeightStatusBadgeColor,
} from '@/components/pages/production/uniformity/uniformity-utils';
import { DetailOptionType } from '@/types/api/production/uniformity';
import {
@@ -121,13 +120,19 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'label',
header: 'Label',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
enableSorting: false,
},
{
accessorKey: 'value',
header: 'Value',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
},
],
[]
@@ -161,13 +166,19 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'label',
header: 'Label',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Label</span>
),
cell: (props) => props.row.original.label,
enableSorting: false,
},
{
accessorKey: 'value',
header: 'Value',
header: () => (
<span className='font-medium text-sm leading-[150%]'>Value</span>
),
cell: (props) => <span>{props.row.original.value}</span>,
enableSorting: false,
},
],
[]
@@ -190,7 +201,7 @@ const UniformityResultForm = () => {
() => [
{
accessorKey: 'number',
header: 'No',
header: 'Number',
cell: (props) => props.row.original.number,
},
{
@@ -204,30 +215,12 @@ const UniformityResultForm = () => {
cell: (props) => {
const status = props.row.original.status;
return status ? (
<div className='w-full'>
<Badge
statusIndicator={true}
variant='soft'
className={{
badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getWeightStatusColor(status)}`,
status: getWeightStatusIndicatorColor(status),
}}
>
{getWeightStatusText(status)}
</Badge>
</div>
<StatusBadge
color={getWeightStatusBadgeColor(status)}
text={getWeightStatusText(status)}
/>
) : (
<Badge
statusIndicator={true}
variant='soft'
className={{
badge:
'rounded-xl w-full justify-start border border-gray-200 text-black bg-info/10',
status: 'bg-info',
}}
>
Unknown
</Badge>
<StatusBadge color='info' text='Unknown' />
);
},
},
@@ -241,23 +234,24 @@ const UniformityResultForm = () => {
<DrawerHeader
leftIcon=''
subtitle={uniformityFormData?.document_name || 'Uniformity Result'}
subtitleClassName='text-sm text-neutral line-clamp-1'
subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
showDivider={false}
>
<Button variant='link' className='p-0 text-error' onClick={handleClose}>
<Tooltip content='Hapus' position='left'>
<Icon icon='mdi:trash-can-outline' width={20} height={20} />
<Icon icon='heroicons-outline:trash' width={18} height={18} />
</Tooltip>
</Button>
</DrawerHeader>
{/* Form Section */}
<div className='divider mt-3.5'></div>
<section className='w-full px-6'>
<section className='w-full p-4'>
{verifyUniformityResult ? (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-3'>
<div className=''>
<p className='text-sm font-medium mb-5'>Sampling and Range</p>
<h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Sampling and Range
</h2>
<Table<DetailOptionType>
data={samplingTableData}
columns={columnsSampling}
@@ -270,7 +264,9 @@ const UniformityResultForm = () => {
</div>
<div className=''>
<p className='text-sm font-medium mb-5'>Result</p>
<h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
Result
</h2>
<Table<DetailOptionType>
data={resultTableData}
columns={resultColumns}
@@ -281,7 +277,7 @@ const UniformityResultForm = () => {
}}
/>
</div>
<div className='mt-4'>
<div className=''>
<Table<BodyWeightData>
data={tableData}
columns={columnsUniformity}
@@ -296,7 +292,7 @@ const UniformityResultForm = () => {
onClick={handleSubmit}
isLoading={isSubmitting}
disabled={!uniformityFormData}
className='mb-10'
className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
>
Submit
</Button>
src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+24 -15
View File
@@ -1,4 +1,3 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
const LeftLegend = () => {
@@ -45,11 +44,11 @@ const ChartArea = () => {
))}
</div>
<div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
<div className='flex justify-between gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6 px-1 xs:px-2 sm:px-3 md:px-4 py-2'>
{ranges.map((range) => (
<div
key={range}
className='skeleton h-3 w-8 sm:w-12 md:w-16 shrink-0'
className='skeleton h-3 w-6 xs:w-8 sm:w-10 md:w-12 flex-1 max-w-12 xs:max-w-14 sm:max-w-16'
/>
))}
</div>
@@ -65,28 +64,38 @@ const ChartArea = () => {
const EmptyState = () => {
return (
<>
<div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'>
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white'>
<Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' />
</Button>
<div className='absolute inset-0 flex items-center justify-center z-10'>
<div className='flex flex-col items-center justify-center'>
{/* Filter icon */}
<div className='mb-2'>
<div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] 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>
<span className='text-xl font-semibold text-[#18181B80] leading-5'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</span>
<span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
</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.
</span>
</p>
</div>
</>
</div>
);
};
const UniformityBarChartSkeleton = () => {
return (
<div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
<div className='relative w-full h-full min-h-[270px] xl:min-h-[330px]'>
<div className='sm:flex hidden h-full gap-4'>
<LeftLegend />
<ChartArea />
src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+19 -13
View File
@@ -1,4 +1,3 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
import React from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
@@ -55,22 +54,29 @@ const UniformityGaugeChartSkeleton: React.FC<
</Pie>
</PieChart>
</ResponsiveContainer>
<div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center mt-5'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white'>
<Icon
icon={'heroicons:funnel'}
className='text-4xl text-whitd'
/>
</Button>
<div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
{/* Filter icon */}
<div className='mb-2 mt-5'>
<div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] 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>
<span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Filters Selected
</span>
<span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
</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.
</span>
</p>
</div>
</div>
</div>
src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+19 -13
View File
@@ -1,24 +1,30 @@
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
const UniformityTableSkeleton = () => {
return (
<div className='flex flex-col items-center justify-center gap-2 my-20'>
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
<Button className='rounded-2xl border border-sky-500 bg-primary text-white'>
<Icon
icon={'heroicons-outline:chart-bar'}
className='text-4xl text-whitd'
/>
</Button>
<div className='flex flex-col items-center justify-center my-20'>
{/* Document icon */}
<div className='mb-2'>
<div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] 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:document-text'
className='text-white'
width={20}
height={20}
/>
</div>
</div>
</div>
<span className='text-xl font-semibold text-[#18181B80] leading-5'>
{/* Empty state text */}
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
No Data Available
</span>
<span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
</h3>
<p className='text-base-content/50 text-xs text-center max-w-xs'>
There is no uniformity data displayed. Enter uniformity check data to
get started.
</span>
</p>
</div>
);
};
src/components/pages/production/uniformity/uniformity-utils.ts
+36 -40
View File
@@ -1,46 +1,24 @@
export const weightStatusColorMap: Record<string, string> = {
ideal: 'bg-[#00D39033]',
outside: 'bg-error/10',
};
export const weightStatusIndicatorColorMap: Record<string, string> = {
ideal: 'bg-[#008000]',
outside: 'bg-error',
};
export const weightStatusTextMap: Record<string, string> = {
ideal: 'Ideal',
outside: 'Outside',
};
export const getWeightStatusColor = (status: string): string => {
return weightStatusColorMap[status] || 'bg-info';
};
export const getWeightStatusIndicatorColor = (status: string): string => {
return weightStatusIndicatorColorMap[status] || 'bg-info';
};
export const getWeightStatusText = (status: string): string => {
return weightStatusTextMap[status] || status;
};
export const statusColorMap: Record<string, string> = {
APPROVED: 'bg-[#00D39033]',
Disetujui: 'bg-[#00D39033]',
REJECTED: 'bg-error/10',
Ditolak: 'bg-error/10',
CREATED: 'bg-[#f3f3f4]',
Pengajuan: 'bg-[#f3f3f4]',
export const weightStatusBadgeColorMap: Record<
string,
'success' | 'error' | 'neutral' | 'info'
> = {
ideal: 'success',
outside: 'error',
};
export const statusIndicatorColorMap: Record<string, string> = {
APPROVED: 'bg-[#008000]',
Disetujui: 'bg-[#008000]',
REJECTED: 'bg-error',
Ditolak: 'bg-error',
CREATED: 'bg-[#D9D9D9]',
Pengajuan: 'bg-[#D9D9D9]',
export const getWeightStatusBadgeColor = (
status: string
): 'success' | 'error' | 'neutral' | 'info' => {
return weightStatusBadgeColorMap[status] || 'neutral';
};
export const statusTextMap: Record<string, string> = {
@@ -52,14 +30,32 @@ export const statusTextMap: Record<string, string> = {
Pengajuan: 'Pengajuan',
};
export const getStatusColor = (status: string): string => {
return statusColorMap[status] || 'bg-info';
};
export const getStatusIndicatorColor = (status: string): string => {
return statusIndicatorColorMap[status] || 'bg-info';
};
export const getStatusText = (status: string): string => {
return statusTextMap[status] || status;
};
export const statusBadgeColorMap: Record<
string,
'success' | 'error' | 'neutral' | 'info'
> = {
APPROVED: 'success',
Disetujui: 'success',
approved: 'success',
disetujui: 'success',
REJECTED: 'error',
Ditolak: 'error',
rejected: 'error',
ditolak: 'error',
CREATED: 'neutral',
Pengajuan: 'neutral',
created: 'neutral',
pengajuan: 'neutral',
PENDING: 'neutral',
pending: 'neutral',
};
export const getStatusBadgeColor = (
status: string
): 'success' | 'error' | 'neutral' | 'info' => {
return statusBadgeColorMap[status] || 'neutral';
};
src/components/pages/report/DailyMarketingsTable.tsx
+10 -2
View File
@@ -10,7 +10,13 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Card from '@/components/Card';
import Collapse from '@/components/Collapse';
import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
import {
cn,
formatCurrency,
formatDate,
formatNumber,
formatVechicleNumber,
} from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { DailyMarketingRow } from '@/types/api/report/marketing';
import { MarketingReportApi } from '@/services/api/report/marketing-report';
@@ -94,7 +100,9 @@ const DailyMarketingsTable = ({
accessorKey: 'vehicle_number',
header: 'No. Polisi',
cell: (props) => (
<span className='text-nowrap'>{props.row.original.vehicle_number}</span>
<span className='text-nowrap'>
{formatVechicleNumber(props.row.original.vehicle_number)}
</span>
),
},
{
src/components/pages/report/finance/FinanceTabs.tsx
+21 -6
View File
@@ -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>
);
};
src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
+37 -22
View File
@@ -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>
src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx
+37
View File
@@ -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;
src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx
+38
View File
@@ -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;
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+253 -190
View File
@@ -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>
</>
);
};
src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+155 -97
View File
@@ -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>
src/config/constant.ts
+28
View File
@@ -5,6 +5,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
text: 'Dashboard',
link: '/dashboard',
icon: 'heroicons-outline:chart-bar-square',
permission: ['lti.dashboard.list'],
},
{
text: 'Daily Checklist',
@@ -81,6 +82,8 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
permission: [
'lti.production.project_flocks.list',
'lti.production.recording.list',
'lti.production.transfer_to_laying.list',
'lti.production.uniformity.list',
],
submenu: [
{
@@ -96,6 +99,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
{
text: 'Transfer ke Laying',
link: '/production/transfer-to-laying',
permission: ['lti.production.transfer_to_laying.list'],
},
{
text: 'Uniformity',
@@ -114,11 +118,13 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
text: 'Penjualan',
link: '/marketing',
icon: 'heroicons-outline:currency-dollar',
permission: ['lti.marketing.delivery_order.list'],
},
{
text: 'Keuangan',
link: '/finance',
icon: 'heroicons-outline:banknotes',
permission: ['lti.finance.transactions.list'],
},
{
text: 'Biaya',
@@ -136,26 +142,46 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
text: 'Laporan',
link: '/report',
icon: 'mdi:chart-box-outline',
permission: [
'lti.repport.debtsupplier.list',
'lti.repport.customerpayment.list',
'lti.repport.purchasesupplier.list',
'lti.repport.expense.list',
'lti.repport.delivery.list',
'lti.repport.gethppperkandang.list',
'lti.repport.production_result.list',
],
submenu: [
{
text: 'Keuangan',
link: '/report/finance',
permission: [
'lti.repport.debtsupplier.list',
'lti.repport.customerpayment.list',
],
},
{
text: 'Logistik & Persediaan',
link: '/report/logistic-stock',
permission: ['lti.repport.purchasesupplier.list'],
},
{
text: 'Biaya Operasional',
link: '/report/expense',
permission: ['lti.repport.expense.list'],
},
{
text: 'Penjualan',
link: '/report/marketing',
permission: [
'lti.repport.delivery.list',
'lti.repport.gethppperkandang.list',
],
},
{
text: 'Hasil Produksi',
link: '/report/production-result',
permission: ['lti.repport.production_result.list'],
},
],
},
@@ -204,6 +230,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
'lti.master.suppliers.list',
'lti.master.uoms.list',
'lti.master.warehouses.list',
'lti.master.production_standards.list',
],
submenu: [
{
@@ -274,6 +301,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
{
text: 'Standar Produksi',
link: '/master-data/production-standard',
permission: ['lti.master.production_standards.list'],
},
],
},
src/config/route-permission.ts
+4 -1
View File
@@ -116,7 +116,10 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
// Report
'/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
'/report/expense/': ['lti.repport.expense.list'],
'/report/marketing/': ['lti.repport.delivery.list'],
'/report/marketing/': [
'lti.repport.delivery.list',
'lti.repport.gethppperkandang.list',
],
'/report/production-result/': ['lti.repport.production_result.list'],
'/report/finance/': [
'lti.repport.finance.list',
src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+52 -17
View File
@@ -127,6 +127,10 @@ export function DailyChecklistContent() {
{ id: number; name: string }[]
>([]);
const sortedSelectedEmployees = selectedEmployees.toSorted((a, b) =>
a.name.localeCompare(b.name)
);
const [dailyChecklistId, setDailyChecklistId] = useState<string | null>(null);
const [checklistStatus, setChecklistStatus] = useState<string>('DRAFT');
// const [isEditMode, setIsEditMode] = useState(false);
@@ -486,6 +490,11 @@ export function DailyChecklistContent() {
return;
}
if (!tempSelectedPhaseIds.length) {
toast.error('Pilih minimal satu fase');
return;
}
try {
// Insert new phase links
const setDailyChecklistPhaseRes =
@@ -535,14 +544,6 @@ export function DailyChecklistContent() {
}
};
const toggleSelectAllAbk = () => {
if (tempSelectedEmployees.length === employees.length) {
setTempSelectedEmployees([]);
} else {
setTempSelectedEmployees([...employees]);
}
};
const applyAbkSelection = async () => {
if (!dailyChecklistId) {
toast.error('Checklist belum tersedia');
@@ -853,10 +854,34 @@ export function DailyChecklistContent() {
);
const isAllAbkSelected =
tempSelectedEmployees.length === employees.length && employees.length > 0;
tempSelectedEmployees.length === filteredEmployees.length &&
filteredEmployees.length > 0 &&
tempSelectedEmployees.every((tempSelectedEmployee) => {
return (
filteredEmployees.findIndex(
(filteredEmployee) => filteredEmployee.id === tempSelectedEmployee.id
) >= 0
);
});
const isAllPhasesSelected =
tempSelectedPhaseIds.length === availablePhases.length &&
availablePhases.length > 0;
tempSelectedPhaseIds.length === filteredPhases.length &&
filteredPhases.length > 0 &&
tempSelectedPhaseIds.every((tempSelectedPhaseId) => {
return (
filteredPhases.findIndex(
(filteredPhase) =>
String(filteredPhase.id) === String(tempSelectedPhaseId)
) >= 0
);
});
const toggleSelectAllAbk = () => {
if (isAllAbkSelected) {
setTempSelectedEmployees([]);
} else {
setTempSelectedEmployees([...filteredEmployees]);
}
};
// Group activities by PHASE → TIME_TYPE → ACTIVITIES
const groupActivitiesByPhase = () => {
@@ -1130,7 +1155,7 @@ export function DailyChecklistContent() {
<th className='text-left py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[200px]'>
Aktivitas
</th>
{selectedEmployees.map((emp) => (
{sortedSelectedEmployees.map((emp) => (
<th
key={emp.id}
className='text-center py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[100px]'
@@ -1216,6 +1241,14 @@ export function DailyChecklistContent() {
}
// ACTIVITY rows (Child rows with checkboxes)
activities.sort((a, b) =>
a.name.localeCompare(b.name, undefined, {
sensitivity: 'base',
})
);
console.log(activities);
activities.forEach((activity, index) => {
const taskId =
taskIdsByPhaseActivityId[activity.id];
@@ -1244,7 +1277,7 @@ export function DailyChecklistContent() {
</p>
)}
</td>
{selectedEmployees.map((emp) => (
{sortedSelectedEmployees.map((emp) => (
<td
key={emp.id}
className='text-center py-3 px-4 border-r border-gray-200'
@@ -1445,6 +1478,8 @@ export function DailyChecklistContent() {
inputWrapper: 'flex items-center',
label: 'font-semibold text-gray-900',
}}
maxSize={5242880} // 5 MB
bottomLabel='Ukuran file maksimal 5MB'
/>
)}
</>
@@ -1519,14 +1554,14 @@ export function DailyChecklistContent() {
setTempSelectedPhaseIds([]);
} else {
setTempSelectedPhaseIds(
availablePhases.map((p) => String(p.id))
filteredPhases.map((p) => String(p.id))
);
}
}}
className='checkbox-clean'
/>
<span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
Pilih Semua ({availablePhases.length} Fase)
Pilih Semua ({filteredPhases.length} Fase)
</span>
</label>
</div>
@@ -1621,7 +1656,7 @@ export function DailyChecklistContent() {
/>
</div>
{employees.length > 0 && (
{filteredEmployees.length > 0 && (
<div className='flex items-center gap-3 px-1 py-2'>
<label className='flex items-center gap-2 cursor-pointer group'>
<input
@@ -1631,7 +1666,7 @@ export function DailyChecklistContent() {
className='checkbox-clean'
/>
<span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
Pilih Semua ({employees.length} ABK)
Pilih Semua ({filteredEmployees.length} ABK)
</span>
</label>
</div>
src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx
+28 -3
View File
@@ -275,6 +275,13 @@ export function DetailDailyChecklistContent() {
])
).values()
);
uniqueEmployees.sort((a, b) =>
a.name.localeCompare(b.name, undefined, {
sensitivity: 'base',
})
);
setEmployees(uniqueEmployees);
// Group data by Phase → Time Type → Activity
@@ -779,11 +786,23 @@ export function DetailDailyChecklistContent() {
}
// ACTIVITY rows
timeGroup.activities.forEach((activity, index) => {
const activities = timeGroup.activities;
activities.sort((a, b) =>
a.name.localeCompare(b.name, undefined, {
sensitivity: 'base',
})
);
activities.forEach((activity, index) => {
const indentClass = hasMultipleTimeTypes
? 'pl-12'
: 'pl-8';
console.log({
activity,
});
rows.push(
<tr
key={`activity-${activity.id}-${index}`}
@@ -823,9 +842,15 @@ export function DetailDailyChecklistContent() {
})}
<td className='py-3 px-4'>
{activity.employees.length > 0 &&
activity.employees[0].note ? (
activity.employees[
activity.employees.length - 1
].note ? (
<p className='text-sm text-gray-600'>
{activity.employees[0].note}
{
activity.employees[
activity.employees.length - 1
].note
}
</p>
) : (
<p className='text-xs text-gray-400 italic'>
src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx
+17 -2
View File
@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Plus, MoreVertical, Pencil, Trash2 } from 'lucide-react';
import { Card, CardContent } from '@/figma-make/components/base/card';
import { Button } from '@/figma-make/components/base/button';
@@ -404,7 +404,22 @@ export function MasterConfigurationContent() {
</div>
{/* Add/Edit Modal */}
<Dialog open={showModal} onOpenChange={setShowModal}>
<Dialog
open={showModal}
onOpenChange={(open) => {
if (!open) {
setIsFormInvalid(false);
setConfigurationForm({
id: 0,
date: '',
percentage_threshold_bad: '',
percentage_threshold_enough: '',
});
}
setShowModal(open);
}}
>
<DialogContent className='sm:max-w-md bg-white rounded-xl shadow-lg'>
<DialogHeader>
<DialogTitle>
src/stores/finance-tab/finance-tab.store.ts
+51
View File
@@ -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',
}
)
);