mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'fix/dashboard' into 'development'
[FIX/FE] Fixing UI Dashboard See merge request mbugroup/lti-web-client!277
This commit is contained in:
Rivaldi A N S
@@ -22,6 +22,7 @@ export interface CardProps
|
||||
onCollapsedChange?: (collapsed: boolean) => void;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
wrapperContent?: string;
|
||||
image?: string;
|
||||
body?: string;
|
||||
title?: string;
|
||||
@@ -144,6 +145,10 @@ const Card = ({
|
||||
return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
|
||||
};
|
||||
|
||||
const getWrapperContentClasses = () => {
|
||||
return cn('space-y-4', className?.wrapperContent);
|
||||
};
|
||||
|
||||
const renderCardContent = () => {
|
||||
const hasContent = children || actions || footer;
|
||||
|
||||
@@ -177,7 +182,7 @@ const Card = ({
|
||||
);
|
||||
|
||||
const cardContent = (
|
||||
<div className='space-y-4'>
|
||||
<div className={getWrapperContentClasses()}>
|
||||
{children}
|
||||
{actions && <div className={getActionsClasses()}>{actions}</div>}
|
||||
{footer && <div className={getFooterClasses()}>{footer}</div>}
|
||||
|
||||
@@ -12,6 +12,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { AuthApi } from '@/services/api/auth';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
|
||||
interface NavbarProps {
|
||||
toggleSidebar?: () => void;
|
||||
@@ -21,6 +22,7 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
|
||||
const { setUser } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const navbarActions = useUiStore((state) => state.navbarActions);
|
||||
|
||||
const logoutClickHandler = async () => {
|
||||
const logoutRes = await AuthApi.logout();
|
||||
@@ -53,7 +55,9 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
{/* Page-specific actions */}
|
||||
{navbarActions && <div className='mr-2'>{navbarActions}</div>}
|
||||
<PopoverButton
|
||||
tabIndex={0}
|
||||
variant='ghost'
|
||||
|
||||
@@ -9,15 +9,21 @@ export type ButtonFilterProps = ButtonProps & {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
|
||||
|
||||
const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
onClick={onClick}
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
|
||||
getFilledFormikValuesCount(values) > 0
|
||||
? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
|
||||
: '',
|
||||
? 'border-primary-gradient !rounded-[8px]'
|
||||
: '!rounded-[8px]',
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
@@ -31,7 +37,7 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
|
||||
/>
|
||||
Filter
|
||||
{getFilledFormikValuesCount(values) > 0 && (
|
||||
<span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
|
||||
<span className='w-[20px] h-[20px] text-white bg-[#FF3535] rounded-[8px] border-[1px] border-base-300 flex items-center justify-center text-xs'>
|
||||
{getFilledFormikValuesCount(values)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -4,10 +4,7 @@ import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import { OptionType, useSelect } from '@/components/input/SelectInput';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { DashboardApi } from '@/services/api/dashboard';
|
||||
@@ -21,9 +18,9 @@ import {
|
||||
} from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
|
||||
import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
|
||||
import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
|
||||
import DashboardAllCharts, {
|
||||
DashboardAllChartsRef,
|
||||
} from '@/components/pages/dashboard/chart/DashboardAllCharts';
|
||||
import DashboardExportCharts, {
|
||||
DashboardExportChartsRef,
|
||||
} from '@/components/pages/dashboard/export/DashboardExportCharts';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
|
||||
import {
|
||||
DashboardFilter,
|
||||
@@ -40,6 +37,11 @@ import MenuItem from '@/components/menu/MenuItem';
|
||||
import { useDashboardStore } from '@/stores/dashboard';
|
||||
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
import { cn } from '@/lib/helper';
|
||||
import DashboardExportStats, {
|
||||
DashboardExportStatsRef,
|
||||
} from '@/components/pages/dashboard/export/DashboardExportStats';
|
||||
|
||||
// Helper function to normalize values to array
|
||||
const normalizeToArray = (
|
||||
@@ -59,6 +61,10 @@ const DashboardProduction = () => {
|
||||
const { filterValues, setFilterValues, resetFilterValues } =
|
||||
useDashboardStore();
|
||||
|
||||
// ===== UI STORE (for navbar actions) =====
|
||||
const setNavbarActions = useUiStore((state) => state.setNavbarActions);
|
||||
const clearNavbarActions = useUiStore((state) => state.clearNavbarActions);
|
||||
|
||||
const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
|
||||
(filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
|
||||
);
|
||||
@@ -67,9 +73,8 @@ const DashboardProduction = () => {
|
||||
normalizeToArray(filterValues.location)
|
||||
);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const statsRef = useRef<HTMLDivElement>(null);
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const allChartsRef = useRef<DashboardAllChartsRef>(null);
|
||||
const allChartsRef = useRef<DashboardExportChartsRef>(null);
|
||||
const allStatsRef = useRef<DashboardExportStatsRef>(null);
|
||||
|
||||
// ===== FETCH DATA =====
|
||||
const {
|
||||
@@ -194,12 +199,69 @@ const DashboardProduction = () => {
|
||||
const handleExportPDF = async () => {
|
||||
await generateDashboardPDF({
|
||||
filterValues: formik.values,
|
||||
statsRef,
|
||||
allStatsRef,
|
||||
allChartsRef,
|
||||
setExporting,
|
||||
});
|
||||
};
|
||||
|
||||
// ===== Register Navbar Actions =====
|
||||
const openFilterModalRef = useRef(filterModal.openModal);
|
||||
openFilterModalRef.current = filterModal.openModal;
|
||||
|
||||
useEffect(() => {
|
||||
setNavbarActions(
|
||||
<div className='hidden sm:flex flex-row justify-end gap-3 '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
analysisMode: undefined,
|
||||
}}
|
||||
variant='outline'
|
||||
onClick={() => openFilterModalRef.current()}
|
||||
/>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'p-2 rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
<Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
|
||||
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>
|
||||
}
|
||||
className={{
|
||||
content: 'w-full mt-1 p-0',
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
|
||||
>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPDF}
|
||||
/>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}, [formik.values, exporting, setNavbarActions]);
|
||||
|
||||
// Cleanup only on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearNavbarActions();
|
||||
};
|
||||
}, [clearNavbarActions]);
|
||||
|
||||
if (isLoadingDashboardProductionData) {
|
||||
return (
|
||||
<div className='w-full min-h-screen flex items-center justify-center'>
|
||||
@@ -210,48 +272,62 @@ const DashboardProduction = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full p-4 space-y-6'>
|
||||
<div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
|
||||
<div></div>
|
||||
|
||||
<div className='flex flex-row justify-end gap-2'>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
analysisMode: undefined,
|
||||
}}
|
||||
variant='outline'
|
||||
className='min-w-28 rounded-lg'
|
||||
onClick={() => filterModal.openModal()}
|
||||
/>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button variant='outline' className='min-w-28 rounded-lg z-50'>
|
||||
<Icon icon='heroicons:arrow-down-tray' />
|
||||
Export
|
||||
<Icon icon='heroicons:chevron-down' />
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: 'w-full',
|
||||
}}
|
||||
<section className='w-full p-3 space-y-3'>
|
||||
<div className='flex sm:hidden flex-row justify-end gap-3 '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
analysisMode: undefined,
|
||||
}}
|
||||
variant='outline'
|
||||
onClick={() => openFilterModalRef.current()}
|
||||
/>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={cn(
|
||||
'p-2 rounded-lg font-semibold text-sm gap-1.5',
|
||||
'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
width={20}
|
||||
height={20}
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
/>
|
||||
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>
|
||||
}
|
||||
className={{
|
||||
content:
|
||||
'w-full mt-1 p-0 shadow-button-soft border border-base-content/10 rounded-lg',
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
className={`p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg ${exporting ? 'hidden' : ''}`}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<MenuItem title='PDF' onClick={handleExportPDF} />
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<MenuItem
|
||||
className='text-sm p-3'
|
||||
title='PDF'
|
||||
onClick={handleExportPDF}
|
||||
/>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
{/* Dashboard Stats */}
|
||||
<div ref={statsRef}>
|
||||
<div>
|
||||
<DashboardStats
|
||||
data={dashboardProductionData?.statistics_data ?? []}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Use DashboardLineChart component or skeleton */}
|
||||
<div ref={chartRef}>
|
||||
<div>
|
||||
{isLoadingDashboardProductionData ? (
|
||||
<DashboardLineChartSkeleton />
|
||||
) : dashboardProductionData &&
|
||||
@@ -287,28 +363,46 @@ const DashboardProduction = () => {
|
||||
|
||||
{/* Hidden container for all charts (used for PDF export in OVERVIEW mode) */}
|
||||
{dashboardProductionData && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '-9999px',
|
||||
top: 0,
|
||||
width: '1200px', // Fixed width for consistent PDF rendering
|
||||
}}
|
||||
>
|
||||
<DashboardAllCharts
|
||||
ref={allChartsRef}
|
||||
data={dashboardProductionData}
|
||||
analysisMode={
|
||||
isResponseSuccess(dashboardProductionResponse)
|
||||
? dashboardProductionResponse.meta
|
||||
? (
|
||||
dashboardProductionResponse.meta as unknown as DashboardMeta
|
||||
).filters?.analysis_mode
|
||||
<>
|
||||
{/* Export Stats Charts */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '-9999px',
|
||||
top: 0,
|
||||
width: '1200px', // Fixed width for consistent PDF rendering
|
||||
}}
|
||||
>
|
||||
<DashboardExportStats
|
||||
ref={allStatsRef}
|
||||
data={dashboardProductionData?.statistics_data ?? []}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Export ALL Charts */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '-9999px',
|
||||
top: 0,
|
||||
width: '1200px', // Fixed width for consistent PDF rendering
|
||||
}}
|
||||
>
|
||||
<DashboardExportCharts
|
||||
ref={allChartsRef}
|
||||
data={dashboardProductionData}
|
||||
analysisMode={
|
||||
isResponseSuccess(dashboardProductionResponse)
|
||||
? dashboardProductionResponse.meta
|
||||
? (
|
||||
dashboardProductionResponse.meta as unknown as DashboardMeta
|
||||
).filters?.analysis_mode
|
||||
: analysisMode
|
||||
: analysisMode
|
||||
: analysisMode
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -316,102 +410,106 @@ const DashboardProduction = () => {
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-xl',
|
||||
modalBox: 'p-0 rounded-[0.875rem]',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
<div className='flex flex-col'>
|
||||
{/* Modal Header */}
|
||||
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300'>
|
||||
<div className='flex items-center gap-2 ms-4'>
|
||||
<div className='flex items-center justify-between p-4 border-b border-base-content/10'>
|
||||
<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'
|
||||
onClick={() => filterModal.closeModal()}
|
||||
className='text-gray-500 hover:text-gray-700 me-4 '
|
||||
className='text-gray-500 hover:text-gray-700'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className='space-y-4'
|
||||
className='flex flex-col'
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetFilter}
|
||||
>
|
||||
{/* Rentang Waktu */}
|
||||
<div className='px-4'>
|
||||
<label className='flex items-center gap-2 mb-3'>Tanggal</label>
|
||||
<div className='flex items-start gap-2'>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
placeholder='Tanggal Mulai'
|
||||
value={formik.values.startDate}
|
||||
errorMessage={formik.errors.startDate}
|
||||
onChange={formik.handleChange}
|
||||
className={{
|
||||
inputWrapper: 'rounded-lg',
|
||||
}}
|
||||
isError={
|
||||
Boolean(formik.errors.startDate) &&
|
||||
Boolean(formik.touched.startDate)
|
||||
}
|
||||
/>
|
||||
<div className='hidden md:block mt-3 text-center'>—</div>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
placeholder='Tanggal Akhir'
|
||||
value={formik.values.endDate}
|
||||
errorMessage={formik.errors.endDate}
|
||||
onChange={formik.handleChange}
|
||||
className={{
|
||||
inputWrapper: 'rounded-lg',
|
||||
}}
|
||||
isError={
|
||||
Boolean(formik.errors.endDate) &&
|
||||
Boolean(formik.touched.endDate)
|
||||
}
|
||||
/>
|
||||
<div className='flex flex-col p-4 gap-1.5'>
|
||||
{/* Rentang Waktu */}
|
||||
<div>
|
||||
<label className='flex text-xs items-center gap-2 py-2 font-semibold'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex items-center gap-2'>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
placeholder='Tanggal Mulai'
|
||||
value={formik.values.startDate}
|
||||
errorMessage={formik.errors.startDate}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
Boolean(formik.errors.startDate) &&
|
||||
Boolean(formik.touched.startDate)
|
||||
}
|
||||
/>
|
||||
<hr className='w-full max-w-3 h-px border-base-content/10'></hr>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
placeholder='Tanggal Akhir'
|
||||
value={formik.values.endDate}
|
||||
errorMessage={formik.errors.endDate}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
Boolean(formik.errors.endDate) &&
|
||||
Boolean(formik.touched.endDate)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analysis Mode */}
|
||||
<div className='px-4'>
|
||||
<label className='block mb-3'>Analysis Mode</label>
|
||||
<RadioGroup
|
||||
name='analysisMode'
|
||||
value={formik.values.analysisMode}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setAnalysisMode(e.target.value as 'OVERVIEW' | 'COMPARISON');
|
||||
// Reset all dependent fields when analysis mode changes
|
||||
formik.setFieldValue('location', []);
|
||||
formik.setFieldValue('flock', []);
|
||||
formik.setFieldValue('kandang', []);
|
||||
formik.setFieldValue('comparisonType', '');
|
||||
setSelectedLocationIds([]);
|
||||
}}
|
||||
color='primary'
|
||||
className={{
|
||||
wrapper: 'w-full my-6 font-semibold text-neutral-500',
|
||||
}}
|
||||
>
|
||||
<RadioGroupItem
|
||||
{/* Analysis Mode */}
|
||||
<div>
|
||||
<label className='block py-2 text-xs font-semibold'>
|
||||
Analysis Mode
|
||||
</label>
|
||||
<RadioGroup
|
||||
name='analysisMode'
|
||||
value={formik.values.analysisMode}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setAnalysisMode(
|
||||
e.target.value as 'OVERVIEW' | 'COMPARISON'
|
||||
);
|
||||
// Reset all dependent fields when analysis mode changes
|
||||
formik.setFieldValue('location', []);
|
||||
formik.setFieldValue('flock', []);
|
||||
formik.setFieldValue('kandang', []);
|
||||
formik.setFieldValue('comparisonType', '');
|
||||
setSelectedLocationIds([]);
|
||||
}}
|
||||
color='primary'
|
||||
value='OVERVIEW'
|
||||
label='Performance Overview'
|
||||
/>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='COMPARISON'
|
||||
label='Performance Comparison'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
className={{
|
||||
wrapper:
|
||||
'w-full flex flex-row items-center font-medium text-base-content/50',
|
||||
radioWrapper: 'w-full grid grid-cols-2 gap-0 p-0',
|
||||
}}
|
||||
>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='OVERVIEW'
|
||||
label='Performance Overview'
|
||||
className='w-full p-3'
|
||||
/>
|
||||
<RadioGroupItem
|
||||
color='primary'
|
||||
value='COMPARISON'
|
||||
label='Performance Comparison'
|
||||
className='w-full p-3'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{formik.values.analysisMode === 'COMPARISON' && (
|
||||
<div className='px-4'>
|
||||
{formik.values.analysisMode === 'COMPARISON' && (
|
||||
<SelectInputRadio
|
||||
label='Compared By'
|
||||
value={comparisonTypeOptions.find(
|
||||
@@ -430,12 +528,13 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.comparisonType) &&
|
||||
Boolean(formik.touched.comparisonType)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Location */}
|
||||
<div className='px-4'>
|
||||
{/* Location */}
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FARM' ? (
|
||||
@@ -465,6 +564,9 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.location) &&
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
@@ -493,144 +595,167 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.location) &&
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Flock */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(
|
||||
formik.values.comparisonType === 'FLOCK' ||
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Kandang */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
select: 'rounded-lg text-sm border-base-content/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full'>
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Flock */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(
|
||||
formik.values.comparisonType === 'FLOCK' ||
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Flock'
|
||||
value={
|
||||
formik.values.flock as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('flock', selected)
|
||||
}
|
||||
errorMessage={formik.errors.flock as string}
|
||||
onInputChange={setInputValueFlock}
|
||||
onMenuScrollToBottom={loadMoreFlock}
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kandang */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG' ? (
|
||||
<SelectInputCheckbox
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
label='Kandang'
|
||||
value={
|
||||
formik.values.kandang as
|
||||
| { value: number; label: string }
|
||||
| { value: number; label: string }[]
|
||||
| null
|
||||
| undefined
|
||||
}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue('kandang', selected)
|
||||
}
|
||||
errorMessage={formik.errors.kandang as string}
|
||||
onInputChange={setInputValueKandang}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='w-full p-4'>
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
</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 gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
|
||||
<Button
|
||||
type='reset'
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button type='submit' className='me-4 min-w-36 rounded-lg'>
|
||||
Terapkan Filter
|
||||
<Button
|
||||
type='submit'
|
||||
className='min-w-40 text-sm p-3 text-white rounded-lg'
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -147,11 +147,12 @@ const DashboardLineChart = ({
|
||||
return (
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper: 'w-full rounded-lg p-0',
|
||||
body: 'p-4',
|
||||
}}
|
||||
variant='bordered'
|
||||
>
|
||||
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
|
||||
<div className='flex flex-col sm:flex-row justify-between items-start gap-4 mb-3'>
|
||||
<div className='text-lg font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
@@ -165,26 +166,28 @@ const DashboardLineChart = ({
|
||||
<Dropdown
|
||||
align='end'
|
||||
direction='bottom'
|
||||
className={{
|
||||
content: 'mt-1 min-w-full',
|
||||
}}
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
|
||||
className='py-2.5 pl-3 pr-2 text-base-content/50 rounded-lg text-sm border-base-content/10 shadow-button-soft'
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{chartTypeLabels[chartData]}{' '}
|
||||
<div className='divider divider-horizontal p-0 m-0 before:bg-neutral-300 after:bg-neutral-300'></div>
|
||||
<Icon icon='heroicons:chevron-down' width={20} height={20} />
|
||||
<div className='w-6 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon icon='heroicons:chevron-down' width={14} height={14} />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: 'w-52 mt-3',
|
||||
}}
|
||||
controlled={open}
|
||||
>
|
||||
<Menu>
|
||||
<Menu className='p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg'>
|
||||
<MenuItem
|
||||
title='Body weight'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('body_weight');
|
||||
setOpen(!open);
|
||||
@@ -192,6 +195,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Performance'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('performance');
|
||||
setOpen(!open);
|
||||
@@ -199,6 +203,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='FCR'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('fcr');
|
||||
setOpen(!open);
|
||||
@@ -206,6 +211,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Quality Control'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('quality_control');
|
||||
setOpen(!open);
|
||||
@@ -213,6 +219,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Deplesi'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('deplesi');
|
||||
setOpen(!open);
|
||||
@@ -248,8 +255,8 @@ const DashboardLineChart = ({
|
||||
.includes('std');
|
||||
|
||||
return (
|
||||
<button
|
||||
key={series.id}
|
||||
<Button
|
||||
key={`${series.id}-${index}`}
|
||||
onClick={() => {
|
||||
const newVisible = new Set(visibleSeries);
|
||||
if (isVisible) {
|
||||
@@ -259,14 +266,16 @@ const DashboardLineChart = ({
|
||||
}
|
||||
setVisibleSeries(newVisible);
|
||||
}}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors ${
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${
|
||||
isVisible
|
||||
? 'border-neutral-400 bg-neutral-50'
|
||||
: 'border-neutral-300 hover:bg-neutral-50'
|
||||
? 'border-base-content/10 hover:bg-base-content/4'
|
||||
: 'border-base-content/10 bg-base-content/4'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-6 h-0.5 ${
|
||||
className={`w-5 h-0.5 ${
|
||||
isStandard ? 'border-t-2 border-dashed' : ''
|
||||
} ${!isVisible ? 'opacity-30' : ''}`}
|
||||
style={{
|
||||
@@ -279,17 +288,17 @@ const DashboardLineChart = ({
|
||||
}}
|
||||
></div>
|
||||
<span
|
||||
className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
|
||||
className={`font-semibold text-sm ${isVisible ? 'text-base-content/50' : 'text-base-content/50'}`}
|
||||
>
|
||||
{series.label}
|
||||
</span>
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
icon='heroicons:eye'
|
||||
width={16}
|
||||
height={16}
|
||||
className='text-neutral-400'
|
||||
className='text-base-content/40'
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
@@ -335,20 +344,68 @@ const DashboardLineChart = ({
|
||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
||||
<XAxis
|
||||
dataKey='week'
|
||||
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||
tick={{
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.5,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: '#e5e7eb' }}
|
||||
axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
|
||||
label={{
|
||||
value: 'Weeks',
|
||||
position: 'insideBottom',
|
||||
offset: -5,
|
||||
style: { fontSize: 12, fill: '#9ca3af' },
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.2,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||
tick={{
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.5,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
label={
|
||||
(chartData === 'body_weight' || chartData === 'performance') &&
|
||||
analysisMode === 'OVERVIEW'
|
||||
? {
|
||||
value:
|
||||
chartData === 'body_weight'
|
||||
? 'Body Weight'
|
||||
: 'Percentage',
|
||||
position: 'insideLeft',
|
||||
angle: -90,
|
||||
offset: 5,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.2,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
: analysisMode === 'COMPARISON'
|
||||
? {
|
||||
value: 'Percentage',
|
||||
position: 'insideLeft',
|
||||
angle: -90,
|
||||
offset: 5,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.2,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: '#e5e7eb' }}
|
||||
axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
|
||||
domain={(() => {
|
||||
// Calculate dynamic domain based on visible data
|
||||
let seriesData: DashboardChartsSeries[] = [];
|
||||
@@ -399,14 +456,12 @@ const DashboardLineChart = ({
|
||||
})()}
|
||||
ticks={(() => {
|
||||
// Calculate dynamic ticks based on domain
|
||||
let seriesData: DashboardChartsSeries[] = [];
|
||||
let dataset: DashboardChartsDataset[] = [];
|
||||
|
||||
if (
|
||||
analysisMode === 'OVERVIEW' &&
|
||||
isOverviewCharts(data.charts)
|
||||
) {
|
||||
seriesData = data.charts[chartData]?.series || [];
|
||||
dataset = data.charts[chartData]?.dataset || [];
|
||||
} else if (
|
||||
analysisMode === 'COMPARISON' &&
|
||||
@@ -416,7 +471,6 @@ const DashboardLineChart = ({
|
||||
data.charts.farm ||
|
||||
data.charts.flock ||
|
||||
data.charts.kandang;
|
||||
seriesData = comparisonChart?.series || [];
|
||||
dataset = comparisonChart?.dataset || [];
|
||||
}
|
||||
|
||||
@@ -436,6 +490,20 @@ const DashboardLineChart = ({
|
||||
|
||||
const minValue = Math.min(...allValues);
|
||||
const maxValue = Math.max(...allValues);
|
||||
|
||||
// Handle edge case where min equals max
|
||||
if (minValue === maxValue) {
|
||||
const value = Math.round(minValue);
|
||||
const padding = Math.max(10, Math.abs(value) * 0.2);
|
||||
return [
|
||||
Math.floor(value - padding),
|
||||
Math.floor(value - padding / 2),
|
||||
value,
|
||||
Math.ceil(value + padding / 2),
|
||||
Math.ceil(value + padding),
|
||||
];
|
||||
}
|
||||
|
||||
const padding = (maxValue - minValue) * 0.1;
|
||||
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
||||
const domainMax = Math.ceil(maxValue + padding);
|
||||
@@ -444,21 +512,25 @@ const DashboardLineChart = ({
|
||||
const range = domainMax - domainMin;
|
||||
const step = range / 4;
|
||||
|
||||
return [
|
||||
// Use Set to ensure unique values
|
||||
const tickSet = new Set([
|
||||
domainMin,
|
||||
Math.round(domainMin + step),
|
||||
Math.round(domainMin + step * 2),
|
||||
Math.round(domainMin + step * 3),
|
||||
domainMax,
|
||||
];
|
||||
]);
|
||||
|
||||
return Array.from(tickSet).sort((a, b) => a - b);
|
||||
})()}
|
||||
tickFormatter={(value) => formatNumber(Number(value))}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#1f2937',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
padding: '8px 12px',
|
||||
padding: '12px 12px',
|
||||
color: 'white',
|
||||
}}
|
||||
labelStyle={{ color: 'white', marginBottom: '4px' }}
|
||||
@@ -466,8 +538,8 @@ const DashboardLineChart = ({
|
||||
labelFormatter={(value) => `Week ${value}`}
|
||||
content={(props) => {
|
||||
return (
|
||||
<div className='flex flex-col gap-2 rounded-lg bg-neutral-950 p-4 text-white'>
|
||||
<p className='text-neutral-300 text-xs font-semibold text-start'>
|
||||
<div className='flex flex-col gap-1.5 rounded-lg bg-neutral-950 p-4 text-white'>
|
||||
<p className='text-white/50 text-xs font-semibold text-start'>
|
||||
{analysisMode === 'OVERVIEW'
|
||||
? selectedKandang
|
||||
? selectedKandang.label || 'Overview Performance'
|
||||
@@ -506,12 +578,12 @@ const DashboardLineChart = ({
|
||||
|
||||
return (
|
||||
<li
|
||||
key={item.name}
|
||||
className='flex w-full justify-between items-center flex-row gap-6 p-0'
|
||||
key={`${item.name}-${index}`}
|
||||
className='flex w-full justify-between items-center flex-row gap-y-1.5 gap-x-3 p-0'
|
||||
>
|
||||
<span className='flex flex-row gap-1 items-center'>
|
||||
<span className='flex flex-row gap-1.5 items-center'>
|
||||
<div
|
||||
className='h-4 w-4 m-0 rounded-md'
|
||||
className='h-5 w-5 m-0 rounded'
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
@@ -526,7 +598,7 @@ const DashboardLineChart = ({
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<p className='text-neutral-300 text-xs text-start'>
|
||||
<p className='text-white/50 text-xs text-start'>
|
||||
Week {props.label}
|
||||
</p>
|
||||
</div>
|
||||
@@ -598,7 +670,7 @@ const DashboardLineChart = ({
|
||||
|
||||
return (
|
||||
<Line
|
||||
key={series.id}
|
||||
key={`${series.id}--${index}`}
|
||||
type='monotone'
|
||||
dataKey={dataKey}
|
||||
name={series.label}
|
||||
@@ -649,20 +721,22 @@ 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 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<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]'>
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ const CARD_CONFIG = [
|
||||
key: 'Avg. Selling Price',
|
||||
icon: 'heroicons:document-currency-dollar',
|
||||
alertColor: 'success' as const,
|
||||
suffix: ' /Kg',
|
||||
suffix: ' /Kg Telur',
|
||||
prefix: '',
|
||||
},
|
||||
{
|
||||
@@ -48,7 +48,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
icon: isPositive
|
||||
? 'heroicons:arrow-trending-up'
|
||||
: 'heroicons:arrow-trending-down',
|
||||
color: isPositive ? 'text-success' : 'text-error',
|
||||
color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
|
||||
value: Math.abs(percent),
|
||||
};
|
||||
};
|
||||
@@ -60,14 +60,16 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
{prefix}
|
||||
{formatNumber(value)}
|
||||
{suffix && (
|
||||
<span className='text-sm font-normal text-neutral-500'>{suffix}</span>
|
||||
<span className='text-sm font-normal text-base-content/50'>
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
|
||||
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-3'>
|
||||
{CARD_CONFIG.map((config) => {
|
||||
// Find matching data from API
|
||||
const cardData = data.find((item) => item.label === config.key);
|
||||
@@ -78,35 +80,41 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper: 'w-full rounded-xl border border-base-content/10',
|
||||
body: 'p-0',
|
||||
wrapperContent:
|
||||
'h-full flex flex-col items-between justify-between',
|
||||
footer: 'mt-0!',
|
||||
}}
|
||||
variant='bordered'
|
||||
footer={
|
||||
<div className='flex flex-row justify-between px-4 pb-4'>
|
||||
<div className='text-neutral-400 font-semibold text-sm'>
|
||||
<div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
From last month
|
||||
</div>
|
||||
<div className='text-neutral-400 font-semibold text-sm'>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
Filter Required
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
|
||||
<Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
|
||||
<div className='flex flex-row items-center gap-3 px-4 py-4'>
|
||||
<Alert
|
||||
variant='soft'
|
||||
className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon
|
||||
icon={config.icon}
|
||||
width={32}
|
||||
height={32}
|
||||
className='text-neutral-400'
|
||||
width={24}
|
||||
height={24}
|
||||
className='text-base-content/50'
|
||||
/>
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-neutral-400 font-semibold text-sm'>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm'>
|
||||
{config.key}
|
||||
</h3>
|
||||
<p className='text-2xl font-semibold text-neutral-400'>
|
||||
<p className='text-xl font-semibold text-base-content/50'>
|
||||
********
|
||||
</p>
|
||||
</div>
|
||||
@@ -121,17 +129,20 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper: 'w-full rounded-xl border border-base-content/10',
|
||||
body: 'p-0',
|
||||
wrapperContent:
|
||||
'h-full flex flex-col items-between justify-between',
|
||||
footer: 'mt-0!',
|
||||
}}
|
||||
variant='bordered'
|
||||
footer={
|
||||
<div className='flex flex-row justify-between px-4 pb-4'>
|
||||
<div className='text-neutral-500 font-semibold text-sm'>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
From last month
|
||||
</div>
|
||||
<div
|
||||
className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
|
||||
className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
|
||||
>
|
||||
<Icon icon={trend.icon} width={16} height={16} />
|
||||
{trend.value}%
|
||||
@@ -143,15 +154,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Alert
|
||||
variant='soft'
|
||||
color={config.alertColor}
|
||||
className='rounded-lg p-3'
|
||||
className={`rounded-lg p-3 bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon icon={config.icon} width={32} height={32} />
|
||||
<Icon icon={config.icon} width={24} height={24} />
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-neutral-500 font-semibold text-sm'>
|
||||
<div className='space-y-1'>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm'>
|
||||
{cardData.label}
|
||||
</h3>
|
||||
<p className='text-2xl font-semibold'>
|
||||
<p className='text-xl font-semibold'>
|
||||
{formatValue(cardData.value, config.prefix, config.suffix)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+9
-8
@@ -17,12 +17,12 @@ import {
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
|
||||
type DashboardAllChartsProps = {
|
||||
type DashboardExportChartsProps = {
|
||||
data: Dashboard;
|
||||
analysisMode: string;
|
||||
};
|
||||
|
||||
export type DashboardAllChartsRef = {
|
||||
export type DashboardExportChartsRef = {
|
||||
getChartRefs: () => {
|
||||
key: string;
|
||||
ref: HTMLDivElement | null;
|
||||
@@ -99,9 +99,9 @@ const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
|
||||
deplesi: 'Deplesi',
|
||||
};
|
||||
|
||||
const DashboardAllCharts = forwardRef<
|
||||
DashboardAllChartsRef,
|
||||
DashboardAllChartsProps
|
||||
const DashboardExportCharts = forwardRef<
|
||||
DashboardExportChartsRef,
|
||||
DashboardExportChartsProps
|
||||
>(({ data, analysisMode }, ref) => {
|
||||
// Create refs for charts - use string keys for flexibility
|
||||
const chartRefs = useRef<{
|
||||
@@ -189,7 +189,8 @@ const DashboardAllCharts = forwardRef<
|
||||
>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper: 'w-full rounded-lg p-0',
|
||||
body: 'p-4',
|
||||
}}
|
||||
variant='bordered'
|
||||
>
|
||||
@@ -338,6 +339,6 @@ const DashboardAllCharts = forwardRef<
|
||||
);
|
||||
});
|
||||
|
||||
DashboardAllCharts.displayName = 'DashboardAllCharts';
|
||||
DashboardExportCharts.displayName = 'DashboardExportCharts';
|
||||
|
||||
export default DashboardAllCharts;
|
||||
export default DashboardExportCharts;
|
||||
@@ -0,0 +1,197 @@
|
||||
import Alert from '@/components/Alert';
|
||||
import Card from '@/components/Card';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
interface DashboardStatsProps {
|
||||
data: DashboardStatisticsData[];
|
||||
}
|
||||
export type DashboardExportStatsRef = {
|
||||
getStatsRefs: () => {
|
||||
key: string;
|
||||
ref: HTMLDivElement | null;
|
||||
label: string;
|
||||
}[];
|
||||
getContainerRef: () => HTMLDivElement | null;
|
||||
};
|
||||
|
||||
// Konfigurasi untuk setiap kartu
|
||||
const CARD_CONFIG = [
|
||||
{
|
||||
key: 'HPP Global',
|
||||
icon: 'heroicons:banknotes',
|
||||
alertColor: 'warning' as const,
|
||||
suffix: ' /Kg',
|
||||
prefix: 'RP ',
|
||||
},
|
||||
{
|
||||
key: 'Avg. Selling Price',
|
||||
icon: 'heroicons:document-currency-dollar',
|
||||
alertColor: 'success' as const,
|
||||
suffix: ' /Kg',
|
||||
prefix: '',
|
||||
},
|
||||
{
|
||||
key: 'FCR',
|
||||
icon: 'heroicons:clipboard-document-list',
|
||||
alertColor: 'info' as const,
|
||||
suffix: '',
|
||||
prefix: '',
|
||||
},
|
||||
{
|
||||
key: 'Mortality',
|
||||
icon: 'heroicons:exclamation-triangle',
|
||||
alertColor: 'error' as const,
|
||||
suffix: ' %',
|
||||
prefix: '',
|
||||
},
|
||||
];
|
||||
|
||||
const DashboardExportStats = forwardRef<
|
||||
DashboardExportStatsRef,
|
||||
DashboardStatsProps
|
||||
>(({ data }, ref) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
// Helper to get trend icon and color
|
||||
const getTrendDisplay = (percent: number) => {
|
||||
const isPositive = percent >= 0;
|
||||
return {
|
||||
icon: isPositive
|
||||
? 'heroicons:arrow-trending-up'
|
||||
: 'heroicons:arrow-trending-down',
|
||||
color: isPositive ? 'text-[#008000]' : 'text-[#FF3A3A]',
|
||||
value: Math.abs(percent),
|
||||
};
|
||||
};
|
||||
|
||||
// Helper to format value
|
||||
const formatValue = (value: number, prefix: string, suffix: string) => {
|
||||
return (
|
||||
<>
|
||||
{prefix}
|
||||
{formatNumber(value)}
|
||||
{suffix && (
|
||||
<span className='text-sm font-normal text-base-content/50'>
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// Expose container ref through imperative handle
|
||||
useImperativeHandle(ref, () => ({
|
||||
getStatsRefs: () => [],
|
||||
getContainerRef: () => containerRef.current,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className='grid grid-cols-4 gap-3'>
|
||||
{CARD_CONFIG.map((config) => {
|
||||
// Find matching data from API
|
||||
const cardData = data.find((item) => item.label === config.key);
|
||||
|
||||
if (!cardData) {
|
||||
// Show placeholder card for missing data (FCR & Mortality)
|
||||
return (
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
body: 'p-0',
|
||||
wrapperContent:
|
||||
'h-full flex flex-col items-between justify-between',
|
||||
footer: 'mt-0!',
|
||||
}}
|
||||
variant='bordered'
|
||||
footer={
|
||||
<div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
From last month
|
||||
</div>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
Filter Required
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='flex flex-row items-center gap-3 px-4 pt-4'>
|
||||
<Alert
|
||||
variant='soft'
|
||||
className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon
|
||||
icon={config.icon}
|
||||
width={24}
|
||||
height={24}
|
||||
className='text-base-content/50'
|
||||
/>
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm'>
|
||||
{config.key}
|
||||
</h3>
|
||||
<p className='text-xl font-semibold text-base-content/50'>
|
||||
********
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const trend = getTrendDisplay(cardData.percent_last_month);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg border border-base-content/10',
|
||||
body: 'p-0',
|
||||
wrapperContent:
|
||||
'h-full flex flex-col items-between justify-between',
|
||||
footer: 'mt-0!',
|
||||
}}
|
||||
variant='bordered'
|
||||
footer={
|
||||
<div className='flex flex-row justify-between px-4 pb-4 max-h-12'>
|
||||
<div className='text-base-content/50 font-semibold text-xs'>
|
||||
From last month
|
||||
</div>
|
||||
<div
|
||||
className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
|
||||
>
|
||||
<Icon icon={trend.icon} width={16} height={16} />
|
||||
{trend.value}%
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
|
||||
<Alert
|
||||
variant='soft'
|
||||
color={config.alertColor}
|
||||
className={`rounded-lg p-0 w-12.5 h-12.5 bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon icon={config.icon} width={24} height={24} />
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm'>
|
||||
{cardData.label}
|
||||
</h3>
|
||||
<p className='text-xl font-semibold'>
|
||||
{formatValue(cardData.value, config.prefix, config.suffix)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
DashboardExportStats.displayName = 'DashboardExportStats';
|
||||
|
||||
export default DashboardExportStats;
|
||||
@@ -3,18 +3,19 @@ import { toPng } from 'html-to-image';
|
||||
import toast from 'react-hot-toast';
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
|
||||
import { DashboardAllChartsRef } from '@/components/pages/dashboard/chart/DashboardAllCharts';
|
||||
import { DashboardExportChartsRef } from '@/components/pages/dashboard/export/DashboardExportCharts';
|
||||
import { DashboardExportStatsRef } from '@/components/pages/dashboard/export/DashboardExportStats';
|
||||
|
||||
interface DashboardPDFExportParams {
|
||||
filterValues: DashboardFilterType;
|
||||
statsRef: React.RefObject<HTMLDivElement | null>;
|
||||
allChartsRef: React.RefObject<DashboardAllChartsRef | null>;
|
||||
allStatsRef: React.RefObject<DashboardExportStatsRef | null>;
|
||||
allChartsRef: React.RefObject<DashboardExportChartsRef | null>;
|
||||
setExporting: (value: boolean) => void;
|
||||
}
|
||||
|
||||
export const generateDashboardPDF = async ({
|
||||
filterValues,
|
||||
statsRef,
|
||||
allStatsRef,
|
||||
allChartsRef,
|
||||
setExporting,
|
||||
}: DashboardPDFExportParams): Promise<void> => {
|
||||
@@ -168,31 +169,34 @@ export const generateDashboardPDF = async ({
|
||||
yPosition += 10;
|
||||
|
||||
// Capture and add stats if available
|
||||
if (statsRef.current) {
|
||||
const statsImage = await toPng(statsRef.current, {
|
||||
quality: 1,
|
||||
pixelRatio: 2,
|
||||
});
|
||||
const statsImgProps = pdf.getImageProperties(statsImage);
|
||||
const statsWidth = pageWidth - 2 * margin;
|
||||
const statsHeight =
|
||||
(statsImgProps.height * statsWidth) / statsImgProps.width;
|
||||
if (allStatsRef.current) {
|
||||
const statsContainer = allStatsRef.current.getContainerRef();
|
||||
if (statsContainer) {
|
||||
const statsImage = await toPng(statsContainer, {
|
||||
quality: 1,
|
||||
pixelRatio: 2,
|
||||
});
|
||||
const statsImgProps = pdf.getImageProperties(statsImage);
|
||||
const statsWidth = pageWidth - 2 * margin;
|
||||
const statsHeight =
|
||||
(statsImgProps.height * statsWidth) / statsImgProps.width;
|
||||
|
||||
// Check if we need a new page
|
||||
if (yPosition + statsHeight > pageHeight - margin) {
|
||||
pdf.addPage();
|
||||
yPosition = margin;
|
||||
// Check if we need a new page
|
||||
if (yPosition + statsHeight > pageHeight - margin) {
|
||||
pdf.addPage();
|
||||
yPosition = margin;
|
||||
}
|
||||
|
||||
pdf.addImage(
|
||||
statsImage,
|
||||
'PNG',
|
||||
margin,
|
||||
yPosition,
|
||||
statsWidth,
|
||||
statsHeight
|
||||
);
|
||||
yPosition += statsHeight + 10;
|
||||
}
|
||||
|
||||
pdf.addImage(
|
||||
statsImage,
|
||||
'PNG',
|
||||
margin,
|
||||
yPosition,
|
||||
statsWidth,
|
||||
statsHeight
|
||||
);
|
||||
yPosition += statsHeight + 10;
|
||||
}
|
||||
|
||||
if (allChartsRef.current) {
|
||||
|
||||
@@ -3,94 +3,101 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard';
|
||||
|
||||
const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
|
||||
return (
|
||||
<div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
|
||||
<div className='w-full bg-white rounded-xl border border-base-content/10 p-4 relative'>
|
||||
{/* Header with title skeleton */}
|
||||
<div className='text-lg font-semibold'>
|
||||
<div className='text-base font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
width={20}
|
||||
height={20}
|
||||
className='inline text-neutral-500'
|
||||
className='inline text-base-content/50'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chart area with axes skeleton */}
|
||||
<div className='relative mt-6'>
|
||||
{/* Main chart container */}
|
||||
<div className='flex gap-4'>
|
||||
{/* Y-axis skeleton (left side) */}
|
||||
<div className='flex flex-col justify-between py-4 space-y-4'>
|
||||
{[1, 2, 3, 4, 5, 6].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-12 bg-gray-100 rounded animate-pulse'
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chart content area */}
|
||||
<div className='flex-1 relative'>
|
||||
{/* Empty state centered in chart area */}
|
||||
<div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
|
||||
{!meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||
<Icon
|
||||
icon='heroicons:funnel'
|
||||
className='text-white'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<div className='relative mt-6 '>
|
||||
{/* Chart content area */}
|
||||
<div className='flex-1 relative'>
|
||||
{/* Empty state centered in chart area */}
|
||||
<div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
|
||||
{!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-gray-900 font-semibold text-base mb-2'>
|
||||
No Filters Selected
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
Please choose filters to narrow down your results and make
|
||||
your search easier.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{meta?.filters && (
|
||||
<>
|
||||
{/* Filter icon */}
|
||||
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||
{/* 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>
|
||||
</>
|
||||
)}
|
||||
{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]'>
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={24}
|
||||
height={24}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{/* 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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row w-full items-center gap-4'>
|
||||
<div className='flex-1 h-full min-w-4'>
|
||||
<div className='h-28.5 w-4 bg-base-content/4 rounded'></div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for chart height */}
|
||||
<div className='h-64'></div>
|
||||
|
||||
{/* X-axis skeleton (bottom) */}
|
||||
<div className='flex justify-between pt-4 border-t border-gray-100'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-8 bg-gray-100 rounded animate-pulse'
|
||||
></div>
|
||||
<div className='w-full grid grid-cols-1 gap-y-13.25 mb-2'>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div key={item} className='flex items-center w-full h-4 gap-4'>
|
||||
<div className='h-4 w-6 bg-base-content/4 rounded'></div>
|
||||
<div className='h-0.25 w-full bg-base-content/4 rounded'></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* X-axis skeleton (bottom) */}
|
||||
<div className='grid grid-cols-10 gap-15 mt-4 ps-13 sm:ps-26 overflow-x-hidden'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-9.5 bg-base-content/4 rounded'
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex justify-center pt-4 ps-13 sm:ps-26'>
|
||||
<div className='h-4 w-28.5 bg-base-content/4 rounded'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { StateCreator } from 'zustand';
|
||||
import { UIStore } from '@/types/stores';
|
||||
|
||||
type NavbarActionsSlice = {
|
||||
navbarActions: ReactNode | null;
|
||||
setNavbarActions: (actions: ReactNode) => void;
|
||||
clearNavbarActions: () => void;
|
||||
};
|
||||
|
||||
export const createNavbarActionsSlice: StateCreator<
|
||||
UIStore,
|
||||
[],
|
||||
[],
|
||||
NavbarActionsSlice
|
||||
> = (set) => ({
|
||||
navbarActions: null,
|
||||
setNavbarActions: (actions) => set({ navbarActions: actions }),
|
||||
clearNavbarActions: () => set({ navbarActions: null }),
|
||||
});
|
||||
@@ -7,6 +7,7 @@ import { UIStore } from '@/types/stores';
|
||||
import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
|
||||
import { createDrawerUISlice } from '@/stores/ui/slices/drawer.slice';
|
||||
import { createTableUISlice } from '@/stores/ui/slices/table.slice';
|
||||
import { createNavbarActionsSlice } from '@/stores/ui/slices/navbar.slice';
|
||||
|
||||
export const useUiStore = create<UIStore>()(
|
||||
devtools(
|
||||
@@ -15,6 +16,7 @@ export const useUiStore = create<UIStore>()(
|
||||
...createMainUiSlice(...args),
|
||||
...createDrawerUISlice(...args),
|
||||
...createTableUISlice(...args),
|
||||
...createNavbarActionsSlice(...args),
|
||||
}),
|
||||
{
|
||||
name: 'ui-cache',
|
||||
|
||||
Vendored
+11
-1
@@ -32,7 +32,17 @@ type TableUISlice = {
|
||||
resetSearchValue: () => void;
|
||||
};
|
||||
|
||||
export type UIStore = MainUiSlice & DrawerUISlice & TableUISlice;
|
||||
// Navbar Actions Slice
|
||||
type NavbarActionsSlice = {
|
||||
navbarActions: ReactNode | null;
|
||||
setNavbarActions: (actions: ReactNode) => void;
|
||||
clearNavbarActions: () => void;
|
||||
};
|
||||
|
||||
export type UIStore = MainUiSlice &
|
||||
DrawerUISlice &
|
||||
TableUISlice &
|
||||
NavbarActionsSlice;
|
||||
|
||||
type ProductionStandardFormSlice = {
|
||||
formData: {
|
||||
|
||||
Reference in New Issue
Block a user