fix(FE): add empty state overlay on chart null value

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

@@ -283,6 +283,8 @@ const DashboardLineChart = ({
         })()}
       </div>
 
+      {/* Chart Container with Empty State Overlay */}
+      <div className='relative'>
         {/* Chart */}
         <ResponsiveContainer width='100%' height={350}>
           <LineChart
@@ -292,7 +294,8 @@ const DashboardLineChart = ({
                 // For OVERVIEW mode, use the selected chart data
                 if (isOverviewCharts(data.charts)) {
                   const selectedChartData = data.charts[chartData];
-                if (!selectedChartData || !selectedChartData.dataset) return [];
+                  if (!selectedChartData || !selectedChartData.dataset)
+                    return [];
                   return selectedChartData.dataset;
                 }
                 return [];
@@ -484,7 +487,10 @@ const DashboardLineChart = ({
             {(() => {
               let seriesData: DashboardChartsSeries[] = [];
 
-            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
                 seriesData = data.charts[chartData]?.series || [];
               } else if (
                 analysisMode === 'COMPARISON' &&
@@ -538,6 +544,50 @@ const DashboardLineChart = ({
             })()}
           </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 */}
+                <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>
+            );
+          }
+          return null;
+        })()}
+      </div>
     </Card>
   );
 };