From 97c16ce59685337d0269edbf9c5f81feba6eebd4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 9 Jan 2026 10:46:05 +0700
Subject: [PATCH] refactor(FE): Initialize and use current gauge week index

---
 .../production/uniformity/UniformityChart.tsx | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityChart.tsx b/src/components/pages/production/uniformity/UniformityChart.tsx
index 302d5468..6ddf50d3 100644
--- a/src/components/pages/production/uniformity/UniformityChart.tsx
+++ b/src/components/pages/production/uniformity/UniformityChart.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import Card from '@/components/Card';
 import UniformityBarChart from '@/components/pages/production/uniformity/chart/UniformityBarChart';
 import UniformityGaugeChart from '@/components/pages/production/uniformity/chart/UniformityGaugeChart';
@@ -22,13 +22,27 @@ const UniformityChart = ({
     return uniformityData.chart_data;
   }, [uniformityData]);
 
+  useEffect(() => {
+    if (uniformityData?.chart_data?.gauge_chart?.week_info) {
+      const { current_week_index } =
+        uniformityData.chart_data.gauge_chart.week_info;
+      setCurrentWeekIndex(current_week_index);
+    }
+  }, [uniformityData]);
+
   const barChartData = useMemo(() => {
-    if (!chartData?.bar_chart) {
+    if (!chartData?.bar_chart || !chartData?.gauge_chart) {
       return [];
     }
 
-    const { bar_chart } = chartData;
-    const currentWeekStr = String(bar_chart.current_week);
+    const { bar_chart, gauge_chart } = chartData;
+    const currentWeekData = gauge_chart.available_weeks[currentWeekIndex];
+
+    if (!currentWeekData || !currentWeekData.has_data) {
+      return [];
+    }
+
+    const currentWeekStr = String(currentWeekData.week);
     const weekData = bar_chart.all_weeks[currentWeekStr];
 
     if (!weekData || !weekData.has_data) {
@@ -42,7 +56,7 @@ const UniformityChart = ({
       idealRange: range.ideal_range,
       outsideRange: range.outside_range,
     }));
-  }, [chartData]);
+  }, [chartData, currentWeekIndex]);
 
   const gaugeChartData = useMemo(() => {
     if (!chartData?.gauge_chart || !uniformityData) return undefined;
@@ -54,28 +68,33 @@ const UniformityChart = ({
       return undefined;
     }
 
+    const hasPrevWeek = currentWeekIndex > 0;
+    const hasNextWeek =
+      currentWeekIndex < gauge_chart.available_weeks.length - 1;
+
     return {
       value: currentWeekData.uniformity_percentage,
       label: 'Uniformity',
       week: `Week ${currentWeekData.week}`,
       currentValue: currentWeekData.ideal_count,
       totalValue: currentWeekData.total_count,
-      hasPrevWeek: gauge_chart.week_info.has_prev_week,
-      hasNextWeek: gauge_chart.week_info.has_next_week,
+      hasPrevWeek,
+      hasNextWeek,
     };
   }, [chartData, currentWeekIndex, uniformityData]);
 
   const handleWeekChange = (direction: 'prev' | 'next') => {
     if (!chartData?.gauge_chart) return;
 
-    const { available_weeks, week_info } = chartData.gauge_chart;
+    const { available_weeks } = chartData.gauge_chart;
 
-    if (direction === 'prev' && week_info.has_prev_week) {
-      setCurrentWeekIndex((prev) => Math.max(0, prev - 1));
-    } else if (direction === 'next' && week_info.has_next_week) {
-      setCurrentWeekIndex((prev) =>
-        Math.min(available_weeks.length - 1, prev + 1)
-      );
+    if (direction === 'prev' && currentWeekIndex > 0) {
+      setCurrentWeekIndex((prev) => prev - 1);
+    } else if (
+      direction === 'next' &&
+      currentWeekIndex < available_weeks.length - 1
+    ) {
+      setCurrentWeekIndex((prev) => prev + 1);
     }
   };