From 6c2baca807484f13846ef77539367a66c1407550 Mon Sep 17 00:00:00 2001 From: randy-ar Date: Thu, 29 Jan 2026 14:50:16 +0700 Subject: [PATCH] fix(FE): fixing classname using dynamic value --- .../pages/dashboard/DashboardProduction.tsx | 489 +++++++++--------- .../dashboard/chart/DashboardLineChart.tsx | 80 +-- .../pages/dashboard/chart/DashboardStats.tsx | 29 +- .../export/DashboardExportCharts.tsx | 3 +- .../dashboard/export/DashboardExportStats.tsx | 39 +- .../skeleton/DashboardLineChartSkeleton.tsx | 49 +- 6 files changed, 350 insertions(+), 339 deletions(-) diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx index 7339e831..b2149771 100644 --- a/src/components/pages/dashboard/DashboardProduction.tsx +++ b/src/components/pages/dashboard/DashboardProduction.tsx @@ -211,7 +211,7 @@ const DashboardProduction = () => { useEffect(() => { setNavbarActions( -
+
{ variant='outline' color='none' className={cn( - 'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]', + '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' )} > Export -
+
} className={{ - content: 'w-full', + content: 'w-full mt-1 p-0', }} > - + @@ -270,8 +272,8 @@ const DashboardProduction = () => { return ( <> -
-
+
+
{ variant='outline' color='none' className={cn( - 'padding-[12px] rounded-[8px] max-h-[40px] font-semibold text-[14px] gap-[6px]', + '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' )} > @@ -296,18 +298,21 @@ const DashboardProduction = () => { icon='heroicons:cloud-arrow-down' /> Export -
+
} className={{ - content: 'w-full', + content: + 'w-full mt-1 p-0 shadow-button-soft border border-base-content/10 rounded-lg', }} > - + @@ -405,107 +410,106 @@ const DashboardProduction = () => { ref={filterModal.ref} className={{ modal: 'p-0', - modalBox: 'p-0 rounded-xl', + modalBox: 'p-0 rounded-[14px]', }} > -
+
{/* Modal Header */} -
-
+
+
-

Filter Data

+

Filter Data

- {/* Rentang Waktu */} -
- -
- -
- — +
+ {/* Rentang Waktu */} +
+ +
+ +
+
-
-
- {/* Analysis Mode */} -
- - { - 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 flex flex-row items-center min-h-[45px] font-medium text-[#18181B]/50', - }} - > - + + { + 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' - /> - - -
+ 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', + }} + > + + + +
- {formik.values.analysisMode === 'COMPARISON' && ( -
+ {formik.values.analysisMode === 'COMPARISON' && ( { Boolean(formik.touched.comparisonType) } className={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', + select: 'rounded-lg text-sm border-base-content/10', }} /> -
- )} + )} - {/* Location */} -
+ {/* Location */} {comparisonTypeOptions.find( (option) => option.value === formik.values.comparisonType )?.value === 'FARM' ? ( @@ -564,7 +565,7 @@ const DashboardProduction = () => { Boolean(formik.touched.location) } className={{ - select: 'rounded-[8px] text-sm border-[#18181B]/10', + select: 'rounded-lg text-sm border-base-content/10', }} /> ) : ( @@ -595,166 +596,164 @@ const DashboardProduction = () => { Boolean(formik.touched.location) } className={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', + 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' ? ( + + 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', + }} + /> + ) : ( + + 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' ? ( + + 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', + }} + /> + ) : ( + + 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 && ( +
+ +
+ )}
- {/* Flock */} - {!( - formik.values.analysisMode === 'COMPARISON' && - !( - formik.values.comparisonType === 'FLOCK' || - formik.values.comparisonType === 'KANDANG' - ) - ) && ( -
- {comparisonTypeOptions.find( - (option) => option.value === formik.values.comparisonType - )?.value === 'FLOCK' ? ( - - 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={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', - }} - /> - ) : ( - - 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={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', - }} - /> - )} -
- )} - - {/* Kandang */} - {!( - formik.values.analysisMode === 'COMPARISON' && - !(formik.values.comparisonType === 'KANDANG') - ) && ( -
- {comparisonTypeOptions.find( - (option) => option.value === formik.values.comparisonType - )?.value === 'KANDANG' ? ( - - 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={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', - }} - /> - ) : ( - - 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={{ - label: 'mb-[8px] text-xs font-semibold', - select: 'rounded-[8px] text-sm border-[#18181B]/10', - }} - /> - )} -
- )} - - {formErrorList.length > 0 && ( -
- -
- )} - {/* Action Buttons */} -
+
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx index 6a419cb4..ab2c347e 100644 --- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx +++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx @@ -147,11 +147,12 @@ const DashboardLineChart = ({ return ( -
+
Performance{' '} setOpen(!open)} > {chartTypeLabels[chartData]}{' '} -
+
} - className={{ - content: '', - }} controlled={open} > - + { setChartData('body_weight'); setOpen(!open); @@ -194,7 +195,7 @@ const DashboardLineChart = ({ /> { setChartData('performance'); setOpen(!open); @@ -202,7 +203,7 @@ const DashboardLineChart = ({ /> { setChartData('fcr'); setOpen(!open); @@ -210,7 +211,7 @@ const DashboardLineChart = ({ /> { setChartData('quality_control'); setOpen(!open); @@ -218,7 +219,7 @@ const DashboardLineChart = ({ /> { setChartData('deplesi'); setOpen(!open); @@ -267,14 +268,14 @@ const DashboardLineChart = ({ }} variant='outline' color='none' - className={`flex items-center gap-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${ + className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${ isVisible - ? 'border-[#18181B]/10 hover:bg-[#18181B]/4' - : 'border-[#18181B]/10 bg-[#18181B]/4' + ? 'border-base-content/10 hover:bg-base-content/4' + : 'border-base-content/10 bg-base-content/4' }`} >
{series.label} @@ -295,7 +296,7 @@ const DashboardLineChart = ({ icon='heroicons:eye' width={16} height={16} - className='text-[#18181B]/40' + className='text-base-content/40' /> ); @@ -371,7 +372,8 @@ const DashboardLineChart = ({ fontWeight: 600, }} label={ - chartData === 'body_weight' || chartData === 'performance' + (chartData === 'body_weight' || chartData === 'performance') && + analysisMode === 'OVERVIEW' ? { value: chartData === 'body_weight' @@ -379,7 +381,7 @@ const DashboardLineChart = ({ : 'Percentage', position: 'insideLeft', angle: -90, - offset: 25, + offset: 5, style: { fontSize: 12, fill: '#18181B', @@ -387,7 +389,20 @@ const DashboardLineChart = ({ fontWeight: 600, }, } - : undefined + : 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: '#C1C1C180', opacity: 0.5 }} @@ -508,6 +523,7 @@ const DashboardLineChart = ({ return Array.from(tickSet).sort((a, b) => a - b); })()} + tickFormatter={(value) => formatNumber(Number(value))} /> `Week ${value}`} content={(props) => { return ( -
-

+

+

{analysisMode === 'OVERVIEW' ? selectedKandang ? selectedKandang.label || 'Overview Performance' @@ -563,11 +579,11 @@ const DashboardLineChart = ({ return (

  • - +
    -

    +

    Week {props.label}

    @@ -705,8 +721,8 @@ const DashboardLineChart = ({ return (
    {/* Chart icon */} -
    -
    +
    +
    {/* Empty state text */} -

    +

    Data Not Yet Available

    -

    +

    Please change your filters to get the data.

    diff --git a/src/components/pages/dashboard/chart/DashboardStats.tsx b/src/components/pages/dashboard/chart/DashboardStats.tsx index f17e18b0..331547b0 100644 --- a/src/components/pages/dashboard/chart/DashboardStats.tsx +++ b/src/components/pages/dashboard/chart/DashboardStats.tsx @@ -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: '', }, { @@ -60,7 +60,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => { {prefix} {formatNumber(value)} {suffix && ( - + {suffix} )} @@ -69,7 +69,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => { }; return ( -
    +
    {CARD_CONFIG.map((config) => { // Find matching data from API const cardData = data.find((item) => item.label === config.key); @@ -80,42 +80,41 @@ const DashboardStats = ({ data }: DashboardStatsProps) => { -
    +
    +
    From last month
    -
    +
    Filter Required
    } > -
    +
    -

    +

    {config.key}

    -

    +

    ********

    @@ -134,7 +133,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => { body: 'p-0', wrapperContent: 'h-full flex flex-col items-between justify-between', - footer: '!mt-0', + footer: 'mt-0!', }} variant='bordered' footer={ diff --git a/src/components/pages/dashboard/export/DashboardExportCharts.tsx b/src/components/pages/dashboard/export/DashboardExportCharts.tsx index c89014d8..ba0b2fe2 100644 --- a/src/components/pages/dashboard/export/DashboardExportCharts.tsx +++ b/src/components/pages/dashboard/export/DashboardExportCharts.tsx @@ -189,7 +189,8 @@ const DashboardExportCharts = forwardRef< > diff --git a/src/components/pages/dashboard/export/DashboardExportStats.tsx b/src/components/pages/dashboard/export/DashboardExportStats.tsx index 3f452d9c..aebdc751 100644 --- a/src/components/pages/dashboard/export/DashboardExportStats.tsx +++ b/src/components/pages/dashboard/export/DashboardExportStats.tsx @@ -72,7 +72,7 @@ const DashboardExportStats = forwardRef< {prefix} {formatNumber(value)} {suffix && ( - + {suffix} )} @@ -87,7 +87,7 @@ const DashboardExportStats = forwardRef< })); return ( -
    +
    {CARD_CONFIG.map((config) => { // Find matching data from API const cardData = data.find((item) => item.label === config.key); @@ -102,37 +102,37 @@ const DashboardExportStats = forwardRef< body: 'p-0', wrapperContent: 'h-full flex flex-col items-between justify-between', - footer: '!mt-0', + footer: 'mt-0!', }} variant='bordered' footer={ -
    -
    +
    +
    From last month
    -
    +
    Filter Required
    } > -
    +
    -

    +

    {config.key}

    -

    +

    ********

    @@ -147,21 +147,20 @@ const DashboardExportStats = forwardRef< -
    +
    +
    From last month
    {trend.value}% @@ -173,15 +172,15 @@ const DashboardExportStats = forwardRef<
    -

    +

    {cardData.label}

    -

    +

    {formatValue(cardData.value, config.prefix, config.suffix)}

    diff --git a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx index d2999544..66c76071 100644 --- a/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx +++ b/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx @@ -3,15 +3,15 @@ import { DashboardMeta } from '@/types/api/dashboard/dashboard'; const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => { return ( -
    +
    {/* Header with title skeleton */} -
    +
    Performance{' '}
    @@ -24,9 +24,9 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => { {!meta?.filters && ( <> {/* Filter icon */} -
    -
    -
    +
    +
    +
    {
    {/* Empty state text */} -

    +

    No Filters Selected

    -

    +

    Please choose filters to narrow down your results and make your search easier.

    @@ -50,8 +50,8 @@ const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => { {meta?.filters && ( <> {/* Filter icon */} -
    -
    +
    +
    {
    {/* Empty state text */} -

    +

    Data Not Yet Available

    -

    +

    Please change your filters to get the data.

    )}
    -
    -
    -
    +
    +
    +
    -
    +
    {[1, 2, 3, 4].map((item) => ( -
    -
    -
    +
    +
    +
    ))}
    {/* X-axis skeleton (bottom) */} -
    +
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
    ))}
    -
    -
    +
    +