mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
fix(FE): refactor UI Dashboard pixel perfect figma
This commit is contained in:
randy-ar
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -21,9 +21,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 +40,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 +64,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 +76,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 +202,67 @@ 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-[12px] '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
analysisMode: undefined,
|
||||
}}
|
||||
variant='outline'
|
||||
onClick={() => openFilterModalRef.current()}
|
||||
/>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
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'
|
||||
)}
|
||||
>
|
||||
<Icon width={20} height={20} icon='heroicons:cloud-arrow-down' />
|
||||
Export
|
||||
<div className='w-[26px] h-[20px] 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',
|
||||
}}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<MenuItem
|
||||
className='text-sm padding-[12px]'
|
||||
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 +273,59 @@ 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',
|
||||
}}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<MenuItem title='PDF' onClick={handleExportPDF} />
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<section className='w-full p-[12px] space-y-[12px]'>
|
||||
<div className='flex sm:hidden flex-row justify-end gap-[12px] '>
|
||||
<ButtonFilter
|
||||
values={{
|
||||
...formik.values,
|
||||
analysisMode: undefined,
|
||||
}}
|
||||
variant='outline'
|
||||
onClick={() => openFilterModalRef.current()}
|
||||
/>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<Button
|
||||
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'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
width={20}
|
||||
height={20}
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
/>
|
||||
Export
|
||||
<div className='w-[26px] h-[20px] 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',
|
||||
}}
|
||||
>
|
||||
<Menu className={exporting ? 'hidden' : ''}>
|
||||
<MenuItem
|
||||
className='text-sm padding-[12px]'
|
||||
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 +361,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>
|
||||
|
||||
@@ -319,30 +411,32 @@ const DashboardProduction = () => {
|
||||
modalBox: 'p-0 rounded-xl',
|
||||
}}
|
||||
>
|
||||
<div className='space-y-6'>
|
||||
<div className='space-y-[16px]'>
|
||||
{/* 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 gap-[8px] py-[16px] border-b border-[#E5E7EB]'>
|
||||
<div className='flex items-center gap-[8px] ms-[16px] text-[#0069E0]'>
|
||||
<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 me-4 '
|
||||
className='text-gray-500 hover:text-gray-700 me-[16px]'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className='space-y-4'
|
||||
className='space-y-[8px]'
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetFilter}
|
||||
>
|
||||
{/* Rentang Waktu */}
|
||||
<div className='px-4'>
|
||||
<label className='flex items-center gap-2 mb-3'>Tanggal</label>
|
||||
<div className='px-[16px]'>
|
||||
<label className='flex text-xs items-center gap-2 mb-[8px] font-semibold'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex items-start gap-2'>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
@@ -351,14 +445,17 @@ const DashboardProduction = () => {
|
||||
errorMessage={formik.errors.startDate}
|
||||
onChange={formik.handleChange}
|
||||
className={{
|
||||
inputWrapper: 'rounded-lg',
|
||||
inputWrapper:
|
||||
'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
isError={
|
||||
Boolean(formik.errors.startDate) &&
|
||||
Boolean(formik.touched.startDate)
|
||||
}
|
||||
/>
|
||||
<div className='hidden md:block mt-3 text-center'>—</div>
|
||||
<div className='hidden md:block mt-3 text-center text-[#18181B]/10 '>
|
||||
—
|
||||
</div>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
placeholder='Tanggal Akhir'
|
||||
@@ -366,7 +463,8 @@ const DashboardProduction = () => {
|
||||
errorMessage={formik.errors.endDate}
|
||||
onChange={formik.handleChange}
|
||||
className={{
|
||||
inputWrapper: 'rounded-lg',
|
||||
inputWrapper:
|
||||
'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
isError={
|
||||
Boolean(formik.errors.endDate) &&
|
||||
@@ -377,8 +475,10 @@ const DashboardProduction = () => {
|
||||
</div>
|
||||
|
||||
{/* Analysis Mode */}
|
||||
<div className='px-4'>
|
||||
<label className='block mb-3'>Analysis Mode</label>
|
||||
<div className='px-[16px]'>
|
||||
<label className='block mb-[8px] text-xs font-semibold'>
|
||||
Analysis Mode
|
||||
</label>
|
||||
<RadioGroup
|
||||
name='analysisMode'
|
||||
value={formik.values.analysisMode}
|
||||
@@ -394,7 +494,8 @@ const DashboardProduction = () => {
|
||||
}}
|
||||
color='primary'
|
||||
className={{
|
||||
wrapper: 'w-full my-6 font-semibold text-neutral-500',
|
||||
wrapper:
|
||||
'w-full flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50',
|
||||
}}
|
||||
>
|
||||
<RadioGroupItem
|
||||
@@ -411,7 +512,7 @@ const DashboardProduction = () => {
|
||||
</div>
|
||||
|
||||
{formik.values.analysisMode === 'COMPARISON' && (
|
||||
<div className='px-4'>
|
||||
<div className='px-[16px]'>
|
||||
<SelectInputRadio
|
||||
label='Compared By'
|
||||
value={comparisonTypeOptions.find(
|
||||
@@ -430,12 +531,16 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.comparisonType) &&
|
||||
Boolean(formik.touched.comparisonType)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Location */}
|
||||
<div className='px-4'>
|
||||
<div className='px-[16px]'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FARM' ? (
|
||||
@@ -465,6 +570,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.location) &&
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
@@ -493,6 +602,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.location) &&
|
||||
Boolean(formik.touched.location)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -505,7 +618,7 @@ const DashboardProduction = () => {
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
<div className='px-[16px]'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK' ? (
|
||||
@@ -530,6 +643,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
@@ -553,6 +670,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.flock) &&
|
||||
Boolean(formik.touched.flock)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -563,7 +684,7 @@ const DashboardProduction = () => {
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
<div className='px-[16px]'>
|
||||
{comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG' ? (
|
||||
@@ -588,6 +709,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SelectInputRadio
|
||||
@@ -611,6 +736,10 @@ const DashboardProduction = () => {
|
||||
Boolean(formik.errors.kandang) &&
|
||||
Boolean(formik.touched.kandang)
|
||||
}
|
||||
className={{
|
||||
label: 'mb-[8px] text-xs font-semibold',
|
||||
select: 'rounded-[8px] text-sm border-[#18181B]/10',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -621,16 +750,19 @@ const DashboardProduction = () => {
|
||||
</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 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
|
||||
<Button
|
||||
type='reset'
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
className='ms-4 px-[16px] rounded-[8px] bg-[#F9FAFB] border-[#F9FAFB] text-[#4A5565] hover:bg-[#4A5565]/10'
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button type='submit' className='me-4 min-w-36 rounded-lg'>
|
||||
Terapkan Filter
|
||||
<Button
|
||||
type='submit'
|
||||
className='me-4 min-w-[160px] px-[16px] rounded-[8px]'
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -151,7 +151,7 @@ const DashboardLineChart = ({
|
||||
}}
|
||||
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 sm:items-center gap-4 mb-[12px]'>
|
||||
<div className='text-lg font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
@@ -169,22 +169,24 @@ const DashboardLineChart = ({
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
|
||||
className='py-[10px] pl-[12px] pr-[4px] text-[#18181B]/50 rounded-[8px] text-[14px] border-[#18181B]/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-[26px] h-[20px] flex items-center justify-center border-l border-[#18181B]/10'>
|
||||
<Icon icon='heroicons:chevron-down' width={14} height={14} />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: 'w-52 mt-3',
|
||||
content: '',
|
||||
}}
|
||||
controlled={open}
|
||||
>
|
||||
<Menu>
|
||||
<MenuItem
|
||||
title='Body weight'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('body_weight');
|
||||
setOpen(!open);
|
||||
@@ -192,6 +194,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Performance'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('performance');
|
||||
setOpen(!open);
|
||||
@@ -199,6 +202,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='FCR'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('fcr');
|
||||
setOpen(!open);
|
||||
@@ -206,6 +210,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Quality Control'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('quality_control');
|
||||
setOpen(!open);
|
||||
@@ -213,6 +218,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Deplesi'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('deplesi');
|
||||
setOpen(!open);
|
||||
@@ -248,8 +254,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 +265,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-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${
|
||||
isVisible
|
||||
? 'border-neutral-400 bg-neutral-50'
|
||||
: 'border-neutral-300 hover:bg-neutral-50'
|
||||
? 'border-[#18181B]/10 hover:bg-[#18181B]/4'
|
||||
: 'border-[#18181B]/10 bg-[#18181B]/4'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-6 h-0.5 ${
|
||||
className={`w-[20px] h-[2px] ${
|
||||
isStandard ? 'border-t-2 border-dashed' : ''
|
||||
} ${!isVisible ? 'opacity-30' : ''}`}
|
||||
style={{
|
||||
@@ -279,17 +287,17 @@ const DashboardLineChart = ({
|
||||
}}
|
||||
></div>
|
||||
<span
|
||||
className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
|
||||
className={`font-semibold text-[14px] ${isVisible ? 'text-[#18181B]/50' : 'text-[#18181B]/50'}`}
|
||||
>
|
||||
{series.label}
|
||||
</span>
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
icon='heroicons:eye'
|
||||
width={16}
|
||||
height={16}
|
||||
className='text-neutral-400'
|
||||
className='text-[#18181B]/40'
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
@@ -335,20 +343,54 @@ 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'
|
||||
? {
|
||||
value:
|
||||
chartData === 'body_weight'
|
||||
? 'Body Weight'
|
||||
: 'Percentage',
|
||||
position: 'insideLeft',
|
||||
angle: -90,
|
||||
offset: 25,
|
||||
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 +441,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 +456,6 @@ const DashboardLineChart = ({
|
||||
data.charts.farm ||
|
||||
data.charts.flock ||
|
||||
data.charts.kandang;
|
||||
seriesData = comparisonChart?.series || [];
|
||||
dataset = comparisonChart?.dataset || [];
|
||||
}
|
||||
|
||||
@@ -436,6 +475,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,13 +497,16 @@ 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);
|
||||
})()}
|
||||
/>
|
||||
<Tooltip
|
||||
@@ -458,7 +514,7 @@ const DashboardLineChart = ({
|
||||
backgroundColor: '#1f2937',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
padding: '8px 12px',
|
||||
padding: '12px 12px',
|
||||
color: 'white',
|
||||
}}
|
||||
labelStyle={{ color: 'white', marginBottom: '4px' }}
|
||||
@@ -466,8 +522,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-[6px] rounded-lg bg-neutral-950 p-4 text-white'>
|
||||
<p className='text-neutral-300 text-[12px] font-semibold text-start'>
|
||||
{analysisMode === 'OVERVIEW'
|
||||
? selectedKandang
|
||||
? selectedKandang.label || 'Overview Performance'
|
||||
@@ -506,12 +562,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-[6px] gap-x-[12px] p-0'
|
||||
>
|
||||
<span className='flex flex-row gap-1 items-center'>
|
||||
<div
|
||||
className='h-4 w-4 m-0 rounded-md'
|
||||
className='h-[20px] w-[20px] m-0 rounded-[4px]'
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
@@ -526,7 +582,7 @@ const DashboardLineChart = ({
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<p className='text-neutral-300 text-xs text-start'>
|
||||
<p className='text-neutral-300 text-[12px] text-start'>
|
||||
Week {props.label}
|
||||
</p>
|
||||
</div>
|
||||
@@ -598,7 +654,7 @@ const DashboardLineChart = ({
|
||||
|
||||
return (
|
||||
<Line
|
||||
key={series.id}
|
||||
key={`${series.id}--${index}`}
|
||||
type='monotone'
|
||||
dataKey={dataKey}
|
||||
name={series.label}
|
||||
@@ -649,13 +705,15 @@ 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-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] 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 */}
|
||||
|
||||
@@ -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-[14px] font-normal text-[#18181B]/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-[12px]'>
|
||||
{CARD_CONFIG.map((config) => {
|
||||
// Find matching data from API
|
||||
const cardData = data.find((item) => item.label === config.key);
|
||||
@@ -78,35 +80,42 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper:
|
||||
'w-full rounded-[12px] border-[1px] border-[#18181B]/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-[16px] pb-[16px] max-h-[48px]'>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
From last month
|
||||
</div>
|
||||
<div className='text-neutral-400 font-semibold text-sm'>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
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-4 px-4 py-4'>
|
||||
<Alert
|
||||
variant='soft'
|
||||
className={`rounded-[8px] p-0 w-[50px] h-[50px] 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-[#18181B]/50'
|
||||
/>
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-neutral-400 font-semibold text-sm'>
|
||||
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
|
||||
{config.key}
|
||||
</h3>
|
||||
<p className='text-2xl font-semibold text-neutral-400'>
|
||||
<p className='text-[20px] font-semibold text-[#18181B]/50'>
|
||||
********
|
||||
</p>
|
||||
</div>
|
||||
@@ -121,17 +130,21 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper:
|
||||
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/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='flex flex-row justify-between px-[16px] pb-[16px]'>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
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-[8px] text-[12px]`}
|
||||
>
|
||||
<Icon icon={trend.icon} width={16} height={16} />
|
||||
{trend.value}%
|
||||
@@ -143,15 +156,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||
<Alert
|
||||
variant='soft'
|
||||
color={config.alertColor}
|
||||
className='rounded-lg p-3'
|
||||
className={`rounded-[8px] p-0 w-[50px] h-[50px] 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'>
|
||||
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
|
||||
{cardData.label}
|
||||
</h3>
|
||||
<p className='text-2xl font-semibold'>
|
||||
<p className='text-[20px] font-semibold'>
|
||||
{formatValue(cardData.value, config.prefix, config.suffix)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+7
-7
@@ -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<{
|
||||
@@ -338,6 +338,6 @@ const DashboardAllCharts = forwardRef<
|
||||
);
|
||||
});
|
||||
|
||||
DashboardAllCharts.displayName = 'DashboardAllCharts';
|
||||
DashboardExportCharts.displayName = 'DashboardExportCharts';
|
||||
|
||||
export default DashboardAllCharts;
|
||||
export default DashboardExportCharts;
|
||||
@@ -0,0 +1,201 @@
|
||||
import Alert from '@/components/Alert';
|
||||
import Card from '@/components/Card';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
import {
|
||||
DashboardOverviewCharts,
|
||||
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-[14px] font-normal text-[#18181B]/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-[12px]'>
|
||||
{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-[16px] pb-[16px]'>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
From last month
|
||||
</div>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
Filter Required
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
|
||||
<Alert
|
||||
variant='soft'
|
||||
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon
|
||||
icon={config.icon}
|
||||
width={24}
|
||||
height={24}
|
||||
className='text-[#18181B]/50'
|
||||
/>
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
|
||||
{config.key}
|
||||
</h3>
|
||||
<p className='text-[20px] font-semibold text-[#18181B]/50'>
|
||||
********
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const trend = getTrendDisplay(cardData.percent_last_month);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={config.key}
|
||||
className={{
|
||||
wrapper:
|
||||
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/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-[16px] pb-[16px]'>
|
||||
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
|
||||
From last month
|
||||
</div>
|
||||
<div
|
||||
className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`}
|
||||
>
|
||||
<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-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`}
|
||||
>
|
||||
<Icon icon={config.icon} width={24} height={24} />
|
||||
</Alert>
|
||||
<div>
|
||||
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
|
||||
{cardData.label}
|
||||
</h3>
|
||||
<p className='text-[20px] 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,104 @@ 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-[12px] border border-[#18181B]/10 p-[16px] relative'>
|
||||
{/* Header with title skeleton */}
|
||||
<div className='text-lg font-semibold'>
|
||||
<div className='text-[16px] font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
width={20}
|
||||
height={20}
|
||||
className='inline text-neutral-500'
|
||||
className='inline text-[#18181B]/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-[9px]'>
|
||||
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] 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-[#18181B]/50 font-semibold text-[14px] mb-[4px]'>
|
||||
No Filters Selected
|
||||
</h3>
|
||||
<p className='text-[#18181B]/50 text-[12px] 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-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] 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-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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row w-full items-center gap-[16px]'>
|
||||
<div className='flex-1 h-full min-w-[16px]'>
|
||||
<div className='h-[114px] w-[16x] bg-[#18181B]/4 rounded-[4px]'></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 className='w-full grid grid-cols-1 gap-y-[53px] mb-[8px]'>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-4 w-8 bg-gray-100 rounded animate-pulse'
|
||||
></div>
|
||||
className='flex items-center w-full h-[16px] gap-[16px]'
|
||||
>
|
||||
<div className='h-[16px] w-[24px] bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
<div className='h-[1px] w-full bg-[#18181B]/4 rounded-[4px]'></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* X-axis skeleton (bottom) */}
|
||||
<div className='grid grid-cols-10 gap-[60px] mt-[16px] ps-[52px] sm:ps-[104px] overflow-x-hidden'>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className='h-[16px] w-[37px] bg-[#18181B]/4 rounded-[4px]'
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex justify-center pt-[16px] ps-[52px] sm:ps-[104px]'>
|
||||
<div className='h-[16px] w-[114px] bg-[#18181B]/4 rounded-[4px]'></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