Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into dev/restu

src/components/helper/ButtonFilter.tsx

@@ -1,5 +1,6 @@
 import Button, { ButtonProps } from '@/components/Button';
 import { getFilledFormikValuesCount } from '@/lib/formik-helper';
+import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { FormikValues } from 'formik';
 
@@ -13,11 +14,12 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
     <Button
       {...props}
       onClick={onClick}
-      className={
+      className={cn(
         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'
-          : ''
+          : '',
-      }
+        props.className
+      )}
     >
       <Icon
         icon='heroicons:funnel'

src/components/helper/form/FormErrors.tsx

@@ -18,7 +18,7 @@ const AlertErrorList = ({
   if (formErrorList.length === 0) return null;
 
   return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
+    <Alert color='error' className='w-full flex flex-col gap-2 px-4'>
       <div className='flex justify-between items-center gap-2 w-full'>
         <div className='flex items-center gap-2'>
           <Icon icon='material-symbols:error-outline' width={24} height={24} />

src/components/pages/closing/ClosingFinanceTable.tsx

@@ -8,6 +8,7 @@ import {
   HppPurchaseData,
   ProfitLossDataAmount,
 } from '@/types/api/closing';
+import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
 type HppTableRow =
@@ -55,9 +56,16 @@ const ClosingFinanceTable = ({
 }: {
   projectFlockId: number;
 }) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const { data: finance, isLoading } = useSWR(
-    `/closing/finance/${projectFlockId}`,
+    `/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
-    () => ClosingApi.getFinance(projectFlockId)
+    () =>
+      ClosingApi.getFinance(
+        projectFlockId,
+        kandangId ? Number(kandangId) : undefined
+      )
   );
 
   const staticHppRows: Array<{
@@ -283,6 +291,7 @@ const ClosingFinanceTable = ({
           <div className='mt-6 p-0 mb-0'>
             <Table<HppTableRow>
               data={hppTableData}
+              isLoading={isLoading}
               columns={[
                 {
                   header: 'No.',
@@ -455,6 +464,7 @@ const ClosingFinanceTable = ({
           <div className='mt-6 p-0 mb-0'>
             <Table<ProfitLossTableRow>
               data={profitLossTableData}
+              isLoading={isLoading}
               columns={[
                 {
                   header: 'Jenis',

src/components/pages/dashboard/DashboardProduction.tsx

@@ -8,7 +8,7 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
@@ -30,6 +30,11 @@ import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import toast from 'react-hot-toast';
+import Dropdown from '@/components/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -49,6 +54,7 @@ const DashboardProduction = () => {
   );
   const [endpointUrl, setEndpointUrl] = useState('/dashboards');
   const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+  const [exporting, setExporting] = useState(false);
 
   // ===== FETCH DATA =====
   const {
@@ -64,22 +70,32 @@ const DashboardProduction = () => {
     : undefined;
 
   // ===== SELECT =====
-  const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
-    useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
-      limit: 'limit',
-      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
-    });
   const {
+    setInputValue: setInputValueFlock,
+    options: flockOptions,
+    isLoadingOptions: isLoadingFlockOptions,
+    loadMore: loadMoreFlock,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
+    limit: 'limit',
+    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+  });
+  const {
+    setInputValue: setInputValueLocation,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocation,
   } = useSelect(LocationApi.basePath, 'id', 'name', '', {
     limit: 'limit',
   });
-  const { options: kandangOptions, isLoadingOptions: isLoadingKandangOptions } =
+  const {
-    useSelect(KandangApi.basePath, 'id', 'name', '', {
+    setInputValue: setInputValueKandang,
-      limit: 'limit',
+    options: kandangOptions,
-      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+    isLoadingOptions: isLoadingKandangOptions,
-    });
+    loadMore: loadMoreKandang,
+  } = useSelect(KandangApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+  });
   const comparisonTypeOptions = [
     { value: 'FARM', label: 'Farm' },
     { value: 'FLOCK', label: 'Flock' },
@@ -143,12 +159,27 @@ const DashboardProduction = () => {
     console.log(endpointUrl);
     filterModal.closeModal();
     refreshDashboardProductionData();
-    formik.resetForm();
   };
 
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
+  // ===== Export PDF =====
+  const handleExportPDF = () => {
+    setExporting(true);
+  };
+
+  // Wait for state to render, then trigger print
+  useEffect(() => {
+    if (exporting) {
+      const timer = setTimeout(() => {
+        window.print();
+        setExporting(false);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [exporting]);
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -156,71 +187,39 @@ const DashboardProduction = () => {
       </div>
     );
   }
+
   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'>
-            <Button
+            <ButtonFilter
+              values={{
+                ...formik.values,
+                analysisMode: undefined,
+              }}
               variant='outline'
-              className={`min-w-28 rounded-lg ${
-                isResponseSuccess(dashboardProductionResponse) &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters
-                  ? 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-                  : ''
-              }`}
-              onClick={() => filterModal.openModal()}
-            >
-              <Icon
-                icon='heroicons:funnel'
-                width={20}
-                height={20}
-                className={
-                  isResponseSuccess(dashboardProductionResponse) &&
-                  (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                    .filters
-                    ? 'text-blue-600'
-                    : ''
-                }
-              />
-              Filter
-              {isResponseSuccess(dashboardProductionResponse) &&
-                dashboardProductionResponse.meta &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters && (
-                  <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
-                    {(() => {
-                      const meta =
-                        dashboardProductionResponse.meta as unknown as DashboardMeta;
-                      if (!meta.filters) return 0;
-                      const count =
-                        (meta.filters.location_ids.length > 1
-                          ? meta.filters.location_ids.length
-                          : 0) +
-                        (meta.filters.flock_ids.length > 1
-                          ? meta.filters.flock_ids.length
-                          : 0) +
-                        (meta.filters.kandang_ids.length > 1
-                          ? meta.filters.kandang_ids.length
-                          : 0);
-                      return meta.filters.analysis_mode === 'OVERVIEW'
-                        ? 1
-                        : count;
-                    })()}
-                  </span>
-                )}
-            </Button>
-            <Button
-              variant='outline'
-              color='neutral'
               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',
+              }}
             >
-              <Icon icon='heroicons:arrow-down-tray' width={20} height={20} />
+              <Menu className={exporting ? 'hidden' : ''}>
-              Export
+                <MenuItem title='PDF' onClick={handleExportPDF} />
-              <Icon icon='heroicons:chevron-down' width={20} height={20} />
+              </Menu>
-            </Button>
+            </Dropdown>
           </div>
         </div>
 
@@ -287,7 +286,7 @@ const DashboardProduction = () => {
             {/* Rentang Waktu */}
             <div className='px-4'>
               <label className='flex items-center gap-2 mb-3'>Tanggal</label>
-              <div className='flex items-center gap-2'>
+              <div className='flex items-start gap-2'>
                 <DateInput
                   name='startDate'
                   placeholder='Tanggal Mulai'
@@ -302,7 +301,7 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.startDate)
                   }
                 />
-                <span className='hidden md:block text-center'>—</span>
+                <div className='hidden md:block mt-3 text-center'>—</div>
                 <DateInput
                   name='endDate'
                   placeholder='Tanggal Akhir'
@@ -383,6 +382,8 @@ const DashboardProduction = () => {
               <SelectInput
                 label='Farm'
                 value={formik.values.location}
+                onInputChange={setInputValueLocation}
+                onMenuScrollToBottom={loadMoreLocation}
                 onChange={(selected) => {
                   formik.setFieldValue('location', selected);
                   // Update selectedLocationIds for kandang filter
@@ -422,6 +423,8 @@ const DashboardProduction = () => {
                     formik.setFieldValue('flock', selected)
                   }
                   errorMessage={formik.errors.flock as string}
+                  onInputChange={setInputValueFlock}
+                  onMenuScrollToBottom={loadMoreFlock}
                   options={flockOptions}
                   isLoading={isLoadingFlockOptions}
                   isMulti={
@@ -450,6 +453,8 @@ const DashboardProduction = () => {
                     formik.setFieldValue('kandang', selected)
                   }
                   errorMessage={formik.errors.kandang as string}
+                  onInputChange={setInputValueKandang}
+                  onMenuScrollToBottom={loadMoreKandang}
                   options={kandangOptions}
                   isLoading={isLoadingKandangOptions}
                   isMulti={
@@ -465,7 +470,9 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            <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'>

src/components/pages/dashboard/chart/DashboardLineChart.tsx

@@ -283,261 +283,311 @@ const DashboardLineChart = ({
         })()}
       </div>
 
-      {/* Chart */}
+      {/* Chart Container with Empty State Overlay */}
-      <ResponsiveContainer width='100%' height={350}>
+      <div className='relative'>
-        <LineChart
+        {/* Chart */}
-          data={(() => {
+        <ResponsiveContainer width='100%' height={350}>
-            // Transform data based on analysisMode
+          <LineChart
-            if (analysisMode === 'OVERVIEW') {
+            data={(() => {
-              // For OVERVIEW mode, use the selected chart data
+              // Transform data based on analysisMode
-              if (isOverviewCharts(data.charts)) {
+              if (analysisMode === 'OVERVIEW') {
-                const selectedChartData = data.charts[chartData];
+                // For OVERVIEW mode, use the selected chart data
-                if (!selectedChartData || !selectedChartData.dataset) return [];
+                if (isOverviewCharts(data.charts)) {
-                return selectedChartData.dataset;
+                  const selectedChartData = data.charts[chartData];
+                  if (!selectedChartData || !selectedChartData.dataset)
+                    return [];
+                  return selectedChartData.dataset;
+                }
+                return [];
+              } else {
+                // For COMPARISON mode, use the first available comparison chart
+                if (isComparisonCharts(data.charts)) {
+                  const chartData =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+
+                  if (!chartData || !chartData.dataset) return [];
+                  return chartData.dataset;
+                }
+                return [];
               }
-              return [];
-            } else {
-              // For COMPARISON mode, use the first available comparison chart
-              if (isComparisonCharts(data.charts)) {
-                const chartData =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-
-                if (!chartData || !chartData.dataset) return [];
-                return chartData.dataset;
-              }
-              return [];
-            }
-          })()}
-          margin={{
-            top: 5,
-            right: 10,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='week'
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            label={{
-              value: 'Weeks',
-              position: 'insideBottom',
-              offset: -5,
-              style: { fontSize: 12, fill: '#9ca3af' },
-            }}
-          />
-          <YAxis
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={(() => {
-              // Calculate dynamic domain based on visible data
-              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' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              // Get all values from visible series
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-
-              // Add padding (10% on each side)
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              return [domainMin, domainMax];
             })()}
-            ticks={(() => {
+            margin={{
-              // Calculate dynamic ticks based on domain
+              top: 5,
-              let seriesData: DashboardChartsSeries[] = [];
+              right: 10,
-              let dataset: DashboardChartsDataset[] = [];
+              left: 0,
-
+              bottom: 5,
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-                dataset = data.charts[chartData]?.dataset || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 25, 50, 75, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              // Generate 5 evenly spaced ticks
-              const range = domainMax - domainMin;
-              const step = range / 4;
-
-              return [
-                domainMin,
-                Math.round(domainMin + step),
-                Math.round(domainMin + step * 2),
-                Math.round(domainMin + step * 3),
-                domainMax,
-              ];
-            })()}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: '#1f2937',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '8px 12px',
-              color: 'white',
             }}
-            labelStyle={{ color: 'white', marginBottom: '4px' }}
+          >
-            itemStyle={{ color: 'white', fontSize: '12px' }}
+            <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-            labelFormatter={(value) => `Week ${value}`}
+            <XAxis
-            formatter={(
+              dataKey='week'
-              value: number | undefined,
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
-              name: string | undefined
+              tickLine={false}
-            ) => {
+              axisLine={{ stroke: '#e5e7eb' }}
-              if (value === undefined || name === undefined) return ['', ''];
+              label={{
+                value: 'Weeks',
+                position: 'insideBottom',
+                offset: -5,
+                style: { fontSize: 12, fill: '#9ca3af' },
+              }}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              domain={(() => {
+                // Calculate dynamic domain based on visible data
+                let seriesData: DashboardChartsSeries[] = [];
+                let dataset: DashboardChartsDataset[] = [];
 
-              // Get series data to find the unit
+                if (
-              let seriesData: DashboardChartsSeries[] = [];
+                  analysisMode === 'OVERVIEW' &&
-              if (
+                  isOverviewCharts(data.charts)
-                analysisMode === 'OVERVIEW' &&
+                ) {
-                isOverviewCharts(data.charts)
+                  seriesData = data.charts[chartData]?.series || [];
-              ) {
+                  dataset = data.charts[chartData]?.dataset || [];
-                seriesData = data.charts[chartData]?.series || [];
+                } else if (
-              } else if (
+                  analysisMode === 'COMPARISON' &&
-                analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
-                isComparisonCharts(data.charts)
+                ) {
-              ) {
+                  const comparisonChart =
-                const comparisonChart =
+                    data.charts.location ||
-                  data.charts.location ||
+                    data.charts.flock ||
-                  data.charts.flock ||
+                    data.charts.kandang;
-                  data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
-                seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
-              }
+                }
 
-              // Find the series that matches this line's name
+                // Get all values from visible series
-              const series = seriesData.find((s) => s.label === name);
+                const visibleSeriesIds = Array.from(visibleSeries);
-              const unit = series?.unit || '';
+                const allValues: number[] = [];
 
-              return [`${value} ${unit}`, name];
+                dataset.forEach((item: DashboardChartsDataset) => {
-            }}
+                  visibleSeriesIds.forEach((seriesId) => {
-          />
+                    const value = item[seriesId];
-          {/* Dynamic Line rendering based on visible series */}
+                    if (typeof value === 'number') {
-          {(() => {
+                      allValues.push(value);
-            let seriesData: DashboardChartsSeries[] = [];
-
-            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
-              seriesData = data.charts[chartData]?.series || [];
-            } else if (
-              analysisMode === 'COMPARISON' &&
-              isComparisonCharts(data.charts)
-            ) {
-              const comparisonChart =
-                data.charts.location ||
-                data.charts.flock ||
-                data.charts.kandang;
-              seriesData = comparisonChart?.series || [];
-            }
-
-            return seriesData
-              .filter((series) => visibleSeries.has(series.id))
-              .map((series, index) => {
-                const isStandard = series.id
-                  .toString()
-                  .toLowerCase()
-                  .includes('std');
-                // Use series.id directly as dataKey to match dataset fields
-                const dataKey = series.id.toString();
-
-                return (
-                  <Line
-                    key={series.id}
-                    type='monotone'
-                    dataKey={dataKey}
-                    name={series.label}
-                    stroke={getLineColor(series.id, index, analysisMode)}
-                    opacity={isStandard ? 0.5 : 1}
-                    strokeWidth={2}
-                    strokeDasharray={isStandard ? '5 5' : undefined}
-                    dot={
-                      isStandard
-                        ? false
-                        : {
-                            r: 3,
-                            fill: '#fff',
-                            stroke: getLineColor(
-                              series.id,
-                              index,
-                              analysisMode
-                            ),
-                            strokeWidth: 2,
-                          }
                     }
-                    activeDot={isStandard ? undefined : { r: 5 }}
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+
+                // Add padding (10% on each side)
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                return [domainMin, domainMax];
+              })()}
+              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' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
+                }
+
+                const visibleSeriesIds = Array.from(visibleSeries);
+                const allValues: number[] = [];
+
+                dataset.forEach((item: DashboardChartsDataset) => {
+                  visibleSeriesIds.forEach((seriesId) => {
+                    const value = item[seriesId];
+                    if (typeof value === 'number') {
+                      allValues.push(value);
+                    }
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 25, 50, 75, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                // Generate 5 evenly spaced ticks
+                const range = domainMax - domainMin;
+                const step = range / 4;
+
+                return [
+                  domainMin,
+                  Math.round(domainMin + step),
+                  Math.round(domainMin + step * 2),
+                  Math.round(domainMin + step * 3),
+                  domainMax,
+                ];
+              })()}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#1f2937',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                color: 'white',
+              }}
+              labelStyle={{ color: 'white', marginBottom: '4px' }}
+              itemStyle={{ color: 'white', fontSize: '12px' }}
+              labelFormatter={(value) => `Week ${value}`}
+              formatter={(
+                value: number | undefined,
+                name: string | undefined
+              ) => {
+                if (value === undefined || name === undefined) return ['', ''];
+
+                // Get series data to find the unit
+                let seriesData: DashboardChartsSeries[] = [];
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.location ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                }
+
+                // Find the series that matches this line's name
+                const series = seriesData.find((s) => s.label === name);
+                const unit = series?.unit || '';
+
+                return [`${value} ${unit}`, name];
+              }}
+            />
+            {/* Dynamic Line rendering based on visible series */}
+            {(() => {
+              let seriesData: DashboardChartsSeries[] = [];
+
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.location ||
+                  data.charts.flock ||
+                  data.charts.kandang;
+                seriesData = comparisonChart?.series || [];
+              }
+
+              return seriesData
+                .filter((series) => visibleSeries.has(series.id))
+                .map((series, index) => {
+                  const isStandard = series.id
+                    .toString()
+                    .toLowerCase()
+                    .includes('std');
+                  // Use series.id directly as dataKey to match dataset fields
+                  const dataKey = series.id.toString();
+
+                  return (
+                    <Line
+                      key={series.id}
+                      type='monotone'
+                      dataKey={dataKey}
+                      name={series.label}
+                      stroke={getLineColor(series.id, index, analysisMode)}
+                      opacity={isStandard ? 0.5 : 1}
+                      strokeWidth={2}
+                      strokeDasharray={isStandard ? '5 5' : undefined}
+                      dot={
+                        isStandard
+                          ? false
+                          : {
+                              r: 3,
+                              fill: '#fff',
+                              stroke: getLineColor(
+                                series.id,
+                                index,
+                                analysisMode
+                              ),
+                              strokeWidth: 2,
+                            }
+                      }
+                      activeDot={isStandard ? undefined : { r: 5 }}
+                    />
+                  );
+                });
+            })()}
+          </LineChart>
+        </ResponsiveContainer>
+
+        {/* Empty State Overlay */}
+        {(() => {
+          // Get current dataset
+          let dataset: DashboardChartsDataset[] = [];
+
+          if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+            dataset = data.charts[chartData]?.dataset || [];
+          } else if (
+            analysisMode === 'COMPARISON' &&
+            isComparisonCharts(data.charts)
+          ) {
+            const comparisonChart =
+              data.charts.location || data.charts.flock || data.charts.kandang;
+            dataset = comparisonChart?.dataset || [];
+          }
+
+          // Show empty state if dataset is empty
+          if (dataset.length === 0) {
+            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>
-              });
+
-          })()}
+                {/* Empty state text */}
-        </LineChart>
+                <h3 className='text-gray-900 font-semibold text-base mb-2'>
-      </ResponsiveContainer>
+                  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>
+            );
+          }
+          return null;
+        })()}
+      </div>
     </Card>
   );
 };

src/components/pages/master-data/product/form/ProductForm.schema.ts

@@ -92,7 +92,6 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
             .typeError('Harga wajib diisi!'),
         })
       )
-      .min(1, 'Minimal harus ada 1 supplier!')
       .required('Supplier wajib diisi!'),
 
     flags: Yup.array()

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -527,6 +527,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                                   idx
                                 )}
                                 isClearable
+                                isDisabled={type === 'detail'}
                                 className={{
                                   wrapper: 'min-w-48 w-full',
                                 }}
@@ -573,16 +574,18 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                     </table>
                   </div>
 
-                  <div className='w-full flex flex-row justify-center'>
+                  {type !== 'detail' && (
-                    <Button
+                    <div className='w-full flex flex-row justify-center'>
-                      type='button'
+                      <Button
-                      color='success'
+                        type='button'
-                      onClick={addSupplierHandler}
+                        color='success'
-                    >
+                        onClick={addSupplierHandler}
-                      <Icon icon='ic:round-plus' width={24} height={24} />{' '}
+                      >
-                      Tambah Supplier
+                        <Icon icon='ic:round-plus' width={24} height={24} />{' '}
-                    </Button>
+                        Tambah Supplier
-                  </div>
+                      </Button>
+                    </div>
+                  )}
                 </Card>
               )}
             </div>

src/services/api/closing.ts

@@ -148,10 +148,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   }
 
   async getFinance(
-    id: number
+    id: number,
+    kandangId?: number
   ): Promise<BaseApiResponse<ClosingFinance> | undefined> {
     try {
-      const path = `${this.basePath}/${id}/keuangan`;
+      const path = `${this.basePath}/${id}${kandangId ? `/${kandangId}` : ''}/keuangan`;
       return await httpClient<BaseApiResponse<ClosingFinance>>(path, {
         method: 'GET',
       });