From a01d28bc49d8f673204c7d4de577ff40ac1c10d9 Mon Sep 17 00:00:00 2001
From: naveen prabhu <naveenprabhu.kvk93.com>
Date: Thu, 7 May 2026 16:26:02 +0530
Subject: [PATCH] values

---
 .../src/pages/Admin/ValidationReview.jsx      | 178 +++++++++++-------
 1 file changed, 111 insertions(+), 67 deletions(-)

diff --git a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
index 2edf56e..c7e2315 100644
--- a/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
+++ b/ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
@@ -368,7 +368,9 @@ const employmentIcons = {
 };
 
 const ValidationReview = () => {
-  const [threshold, setThreshold] = React.useState(10);
+  const [quantityThreshold, setQuantityThreshold] = React.useState('');
+  const [valueThreshold, setValueThreshold] = React.useState('');
+  const threshold = quantityThreshold || valueThreshold || 10;
   const navigate = useNavigate();
   const location = useLocation();
   const actionType = location.state?.actionType || 'view';
@@ -801,33 +803,49 @@ setAdditionalForecastMonths([
     );
   };
 
-  const getCellClass = (previousValue, currentValue, isFirstMonth = false) => {
+  const getActiveThreshold = (metricType) => {
+    if (metricType === 'quantity') {
+      return quantityThreshold === '' ? null : Number(quantityThreshold);
+    }
+
+    if (metricType === 'value') {
+      return valueThreshold === '' ? null : Number(valueThreshold);
+    }
+
+    return null;
+  };
+
+  const getCellClass = (previousValue, currentValue, isFirstMonth = false, metricType = null) => {
     if (isFirstMonth || !varianceHighlighting) return '';
+    const activeThreshold = getActiveThreshold(metricType);
+    if (activeThreshold == null) return '';
 
     const variance = calculateVariance(previousValue, currentValue);
     const absVariance = Math.abs(variance);
 
     // 🔴 threshold > 100 → only highlight above 100
-    if (threshold > 100) {
+    if (activeThreshold > 100) {
       if (absVariance <= 100) return '';
       return variance > 0 ? 'bg-[#F0FDF4]' : 'bg-[#FEF2F2]';
     }
 
     // 🟢 NORMAL: highlight WITHIN threshold
-    if (absVariance > threshold) return '';
+    if (absVariance > activeThreshold) return '';
 
     return variance > 0 ? 'bg-[#F0FDF4]' : 'bg-[#FEF2F2]';
   };
 
-  const getBorderClass = (previousValue, currentValue, isFirstMonth = false) => {
+  const getBorderClass = (previousValue, currentValue, isFirstMonth = false, metricType = null) => {
     if (isFirstMonth || !varianceHighlighting) return '';
 
-    if (threshold > 100) return '';
+    const activeThreshold = getActiveThreshold(metricType);
+    if (activeThreshold == null) return '';
+    if (activeThreshold > 100) return '';
 
     const variance = calculateVariance(previousValue, currentValue);
     const absVariance = Math.abs(variance);
 
-    if (absVariance > threshold) return '';
+    if (absVariance > activeThreshold) return '';
 
     return variance > 0
       ? 'border-2 border-[#1E7C34]'
@@ -1124,27 +1142,53 @@ setAdditionalForecastMonths([
                           Variance Highlighting
                         </label>
                         {varianceHighlighting && (
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm text-[#4B5563]">Threshold</span>
-                            <select 
-                              value={threshold}
-                              onChange={(e) => setThreshold(Number(e.target.value))}
-                              className="border border-[#D1D5DB] rounded-md px-3 py-1 text-sm "
-                            >
-                              <option value="5">5%</option>
-                              <option value="10">10%</option>
-                              <option value="15">15%</option>
-                              <option value="20">20%</option>
-                              <option value="25">25%</option>
-                              <option value="30">30%</option>
-                              <option value="50">50%</option>
-                              <option value="60">60%</option>
-                              <option value="70">70%</option>
-                              <option value="80">80%</option>
-                              <option value="90">90%</option>
-                              <option value="100">100%</option>
-                              <option value="101">Above 100%</option>
-                            </select>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm text-[#4B5563]">Quantity</span>
+                              <select 
+                                value={quantityThreshold}
+                                onChange={(e) => setQuantityThreshold(e.target.value)}
+                                className="border border-[#D1D5DB] rounded-md px-3 py-1 text-sm "
+                              >
+                                <option value="">Select</option>
+                                <option value="5">5%</option>
+                                <option value="10">10%</option>
+                                <option value="15">15%</option>
+                                <option value="20">20%</option>
+                                <option value="25">25%</option>
+                                <option value="30">30%</option>
+                                <option value="50">50%</option>
+                                <option value="60">60%</option>
+                                <option value="70">70%</option>
+                                <option value="80">80%</option>
+                                <option value="90">90%</option>
+                                <option value="100">100%</option>
+                                <option value="101">Above 100%</option>
+                              </select>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm text-[#4B5563]">Value</span>
+                              <select 
+                                value={valueThreshold}
+                                onChange={(e) => setValueThreshold(e.target.value)}
+                                className="border border-[#D1D5DB] rounded-md px-3 py-1 text-sm "
+                              >
+                                <option value="">Select</option>
+                                <option value="5">5%</option>
+                                <option value="10">10%</option>
+                                <option value="15">15%</option>
+                                <option value="20">20%</option>
+                                <option value="25">25%</option>
+                                <option value="30">30%</option>
+                                <option value="50">50%</option>
+                                <option value="60">60%</option>
+                                <option value="70">70%</option>
+                                <option value="80">80%</option>
+                                <option value="90">90%</option>
+                                <option value="100">100%</option>
+                                <option value="101">Above 100%</option>
+                              </select>
+                            </div>
                           </div>
                         )}
                       </div> 
@@ -1342,7 +1386,7 @@ setAdditionalForecastMonths([
                                 </td>
 
                                 {/* Previous Quarter – Month 2 */}
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true)} ${getBorderClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true, 'quantity')} ${getBorderClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true, 'quantity')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">
                                       {product.previous_quantity_period_two || "0"}
@@ -1356,7 +1400,7 @@ setAdditionalForecastMonths([
                                 </td>
 
                                 {/* Previous Quarter – Month 3 */}
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros)} ${getBorderClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros, 'quantity')} ${getBorderClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros, 'quantity')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">
                                       {product.previous_quantity_period_three || "0"}
@@ -1372,7 +1416,7 @@ setAdditionalForecastMonths([
                             )}
 
                             {/* Current Quarter – Month 1 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros)} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros, 'quantity')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">
                                   {product.current_quantity_period_one || "0"}
@@ -1386,7 +1430,7 @@ setAdditionalForecastMonths([
                             </td>
 
                             {/* Current Quarter – Month 2 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_one, product.current_quantity_period_two, false)} ${getBorderClass(product.current_quantity_period_one, product.current_quantity_period_two, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_one, product.current_quantity_period_two, false, 'quantity')} ${getBorderClass(product.current_quantity_period_one, product.current_quantity_period_two, false, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">
                                   {product.current_quantity_period_two || "0"}
@@ -1400,7 +1444,7 @@ setAdditionalForecastMonths([
                             </td>
 
                             {/* Current Quarter – Month 3 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_two, product.current_quantity_period_three, false)} ${getBorderClass(product.current_quantity_period_two, product.current_quantity_period_three, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_two, product.current_quantity_period_three, false, 'quantity')} ${getBorderClass(product.current_quantity_period_two, product.current_quantity_period_three, false, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">
                                   {product.current_quantity_period_three || "0"}
@@ -1418,19 +1462,19 @@ setAdditionalForecastMonths([
                               const historicalData = getCurrentYearForecastData(product?.product?.id);
                               return (
                                 <>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, historicalData.forecast_quantity_period_one, false)} ${getBorderClass(product.current_quantity_period_three, historicalData.forecast_quantity_period_one, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, historicalData.forecast_quantity_period_one, false, 'quantity')} ${getBorderClass(product.current_quantity_period_three, historicalData.forecast_quantity_period_one, false, 'quantity')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_quantity_period_one || '0'}</span>
                                       {getVarianceDisplay(product.current_quantity_period_three, historicalData.forecast_quantity_period_one)}
                                     </div>
                                   </td>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two, false)} ${getBorderClass(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two, false, 'quantity')} ${getBorderClass(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two, false, 'quantity')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_quantity_period_two || '0'}</span>
                                       {getVarianceDisplay(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two)}
                                     </div>
                                   </td>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three, false)} ${getBorderClass(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three, false, 'quantity')} ${getBorderClass(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three, false, 'quantity')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_quantity_period_three || '0'}</span>
                                       {getVarianceDisplay(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three)}
@@ -1443,19 +1487,19 @@ setAdditionalForecastMonths([
                             {/* NEXT YEAR FORECAST Data (original from submission) */}
                             {!shouldHideForecast && (
                               <>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false)} ${getBorderClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false, 'quantity')} ${getBorderClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false, 'quantity')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_quantity_period_one || '0'}</span>
                                     {getVarianceDisplay(product.current_quantity_period_three, product.forecast_quantity_period_one)}
                                   </div>
                                 </td>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false)} ${getBorderClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false, 'quantity')} ${getBorderClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false, 'quantity')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_quantity_period_two || '0'}</span>
                                     {getVarianceDisplay(product.forecast_quantity_period_one, product.forecast_quantity_period_two)}
                                   </div>
                                 </td>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false)} ${getBorderClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false, 'quantity')} ${getBorderClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false, 'quantity')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_quantity_period_three || '0'}</span>
                                     {getVarianceDisplay(product.forecast_quantity_period_two, product.forecast_quantity_period_three)}
@@ -1477,7 +1521,7 @@ setAdditionalForecastMonths([
                             
                             {/* Previous Quarter – Month 2 */}
                             {!shouldHidePreviousQuarter && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true)} ${getBorderClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true, 'quantity')} ${getBorderClass(product.previous_quantity_period_one, product.previous_quantity_period_two, true, 'quantity')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.previous_quantity_period_two || '0'}</span>
                                   {!isPreviousQuarterAllZeros && getVarianceDisplay(
@@ -1490,7 +1534,7 @@ setAdditionalForecastMonths([
                             
                             {/* Previous Quarter – Month 3 */}
                             {!shouldHidePreviousQuarter && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros)} ${getBorderClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros, 'quantity')} ${getBorderClass(product.previous_quantity_period_two, product.previous_quantity_period_three, isPreviousQuarterAllZeros, 'quantity')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.previous_quantity_period_three || '0'}</span>
                                   {!isPreviousQuarterAllZeros && getVarianceDisplay(
@@ -1502,7 +1546,7 @@ setAdditionalForecastMonths([
                             )}
 
                             {/* Current Quarter – Month 1 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros)} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros, 'quantity')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_quantity_period_one || '0'}</span>
                                 {!shouldHidePreviousQuarter && !isPreviousQuarterAllZeros && getVarianceDisplay(
@@ -1513,7 +1557,7 @@ setAdditionalForecastMonths([
                             </td>
                             
                             {/* Current Quarter – Month 2 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_one, product.current_quantity_period_two, false)} ${getBorderClass(product.current_quantity_period_one, product.current_quantity_period_two, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_one, product.current_quantity_period_two, false, 'quantity')} ${getBorderClass(product.current_quantity_period_one, product.current_quantity_period_two, false, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_quantity_period_two || '0'}</span>
                                 {getVarianceDisplay(
@@ -1524,7 +1568,7 @@ setAdditionalForecastMonths([
                             </td>
 
                             {/* Current Quarter – Month 3 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_two, product.current_quantity_period_three, false)} ${getBorderClass(product.current_quantity_period_two, product.current_quantity_period_three, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_two, product.current_quantity_period_three, false, 'quantity')} ${getBorderClass(product.current_quantity_period_two, product.current_quantity_period_three, false, 'quantity')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_quantity_period_three || '0'}</span>
                                 {getVarianceDisplay(
@@ -1536,7 +1580,7 @@ setAdditionalForecastMonths([
 
                             {/* Next Year Forecast – Month 1 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false)} ${getBorderClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false, 'quantity')} ${getBorderClass(product.current_quantity_period_three, product.forecast_quantity_period_one, false, 'quantity')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_quantity_period_one || '0'}</span>
                                   {getVarianceDisplay(
@@ -1549,7 +1593,7 @@ setAdditionalForecastMonths([
                             
                             {/* Next Year Forecast – Month 2 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false)} ${getBorderClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false, 'quantity')} ${getBorderClass(product.forecast_quantity_period_one, product.forecast_quantity_period_two, false, 'quantity')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_quantity_period_two || '0'}</span>
                                   {getVarianceDisplay(
@@ -1562,7 +1606,7 @@ setAdditionalForecastMonths([
                             
                             {/* Next Year Forecast – Month 3 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false)} ${getBorderClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false, 'quantity')} ${getBorderClass(product.forecast_quantity_period_two, product.forecast_quantity_period_three, false, 'quantity')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_quantity_period_three || '0'}</span>
                                   {getVarianceDisplay(
@@ -1595,7 +1639,7 @@ setAdditionalForecastMonths([
                                 </td>
 
                                 {/* Previous Cost – Month 2 */}
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_one, product.previous_cost_period_two, true)} ${getBorderClass(product.previous_cost_period_one, product.previous_cost_period_two, true)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_one, product.previous_cost_period_two, true, 'value')} ${getBorderClass(product.previous_cost_period_one, product.previous_cost_period_two, true, 'value')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">
                                       {product.previous_cost_period_two || "0"}
@@ -1608,7 +1652,7 @@ setAdditionalForecastMonths([
                                 </td>
 
                                 {/* Previous Cost – Month 3 */}
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros)} ${getBorderClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros, 'value')} ${getBorderClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros, 'value')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">
                                       {product.previous_cost_period_three || "0"}
@@ -1623,19 +1667,19 @@ setAdditionalForecastMonths([
                             )}
 
                             {/* Current Quarter Cost – Month 1 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros)} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros, 'value')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_one || '0'}</span>
                                 {!shouldHidePreviousQuarter && !isPreviousQuarterCostAllZeros && getVarianceDisplay(product.previous_cost_period_three, product.current_cost_period_one)}
                               </div>
                             </td>
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_one, product.current_cost_period_two, false)} ${getBorderClass(product.current_cost_period_one, product.current_cost_period_two, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_one, product.current_cost_period_two, false, 'value')} ${getBorderClass(product.current_cost_period_one, product.current_cost_period_two, false, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_two || '0'}</span>
                                 {getVarianceDisplay(product.current_cost_period_one, product.current_cost_period_two)}
                               </div>
                             </td>
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_two, product.current_cost_period_three, false)} ${getBorderClass(product.current_cost_period_two, product.current_cost_period_three, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_two, product.current_cost_period_three, false, 'value')} ${getBorderClass(product.current_cost_period_two, product.current_cost_period_three, false, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_three || '0'}</span>
                                 {getVarianceDisplay(product.current_cost_period_two, product.current_cost_period_three)}
@@ -1647,19 +1691,19 @@ setAdditionalForecastMonths([
                               const historicalData = getCurrentYearForecastData(product?.product?.id);
                               return (
                                 <>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, historicalData.forecast_cost_period_one, false)} ${getBorderClass(product.current_cost_period_three, historicalData.forecast_cost_period_one, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, historicalData.forecast_cost_period_one, false, 'value')} ${getBorderClass(product.current_cost_period_three, historicalData.forecast_cost_period_one, false, 'value')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_cost_period_one || '0'}</span>
                                       {getVarianceDisplay(product.current_cost_period_three, historicalData.forecast_cost_period_one)}
                                     </div>
                                   </td>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two, false)} ${getBorderClass(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two, false, 'value')} ${getBorderClass(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two, false, 'value')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_cost_period_two || '0'}</span>
                                       {getVarianceDisplay(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two)}
                                     </div>
                                   </td>
-                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three, false)} ${getBorderClass(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three, false)}`}>
+                                  <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three, false, 'value')} ${getBorderClass(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three, false, 'value')}`}>
                                     <div className="flex flex-col items-center justify-center">
                                       <span className="font-medium">{historicalData.forecast_cost_period_three || '0'}</span>
                                       {getVarianceDisplay(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three)}
@@ -1672,19 +1716,19 @@ setAdditionalForecastMonths([
                             {/* NEXT YEAR FORECAST Cost (original from submission) */}
                             {!shouldHideForecast && (
                               <>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, product.forecast_cost_period_one, false)} ${getBorderClass(product.current_cost_period_three, product.forecast_cost_period_one, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, product.forecast_cost_period_one, false, 'value')} ${getBorderClass(product.current_cost_period_three, product.forecast_cost_period_one, false, 'value')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_cost_period_one || '0'}</span>
                                     {getVarianceDisplay(product.current_cost_period_three, product.forecast_cost_period_one)}
                                   </div>
                                 </td>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false)} ${getBorderClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false, 'value')} ${getBorderClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false, 'value')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_cost_period_two || '0'}</span>
                                     {getVarianceDisplay(product.forecast_cost_period_one, product.forecast_cost_period_two)}
                                   </div>
                                 </td>
-                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false)} ${getBorderClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false)}`}>
+                                <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false, 'value')} ${getBorderClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false, 'value')}`}>
                                   <div className="flex flex-col items-center justify-center">
                                     <span className="font-medium">{product.forecast_cost_period_three || '0'}</span>
                                     {getVarianceDisplay(product.forecast_cost_period_two, product.forecast_cost_period_three)}
@@ -1706,7 +1750,7 @@ setAdditionalForecastMonths([
                             
                             {/* Previous Cost – Month 2 */}
                             {!shouldHidePreviousQuarter && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_one, product.previous_cost_period_two, true)} ${getBorderClass(product.previous_cost_period_one, product.previous_cost_period_two, true)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_one, product.previous_cost_period_two, true, 'value')} ${getBorderClass(product.previous_cost_period_one, product.previous_cost_period_two, true, 'value')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.previous_cost_period_two || '0'}</span>
                                   {!isPreviousQuarterCostAllZeros && getVarianceDisplay(
@@ -1719,7 +1763,7 @@ setAdditionalForecastMonths([
                             
                             {/* Previous Cost – Month 3 */}
                             {!shouldHidePreviousQuarter && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros)} ${getBorderClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros, 'value')} ${getBorderClass(product.previous_cost_period_two, product.previous_cost_period_three, isPreviousQuarterCostAllZeros, 'value')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.previous_cost_period_three || '0'}</span>
                                   {!isPreviousQuarterCostAllZeros && getVarianceDisplay(
@@ -1731,7 +1775,7 @@ setAdditionalForecastMonths([
                             )}
 
                             {/* Current Cost – Month 1 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros)} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros, 'value')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_one || '0'}</span>
                                 {!shouldHidePreviousQuarter && !isPreviousQuarterCostAllZeros && getVarianceDisplay(
@@ -1742,7 +1786,7 @@ setAdditionalForecastMonths([
                             </td>
                             
                             {/* Current Cost – Month 2 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_one, product.current_cost_period_two, false)} ${getBorderClass(product.current_cost_period_one, product.current_cost_period_two, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_one, product.current_cost_period_two, false, 'value')} ${getBorderClass(product.current_cost_period_one, product.current_cost_period_two, false, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_two || '0'}</span>
                                 {getVarianceDisplay(
@@ -1753,7 +1797,7 @@ setAdditionalForecastMonths([
                             </td>
                             
                             {/* Current Cost – Month 3 */}
-                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_two, product.current_cost_period_three, false)} ${getBorderClass(product.current_cost_period_two, product.current_cost_period_three, false)}`}>
+                            <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_two, product.current_cost_period_three, false, 'value')} ${getBorderClass(product.current_cost_period_two, product.current_cost_period_three, false, 'value')}`}>
                               <div className="flex flex-col items-center justify-center">
                                 <span className="font-medium">{product.current_cost_period_three || '0'}</span>
                                 {getVarianceDisplay(
@@ -1765,7 +1809,7 @@ setAdditionalForecastMonths([
 
                             {/* Forecast Cost – Month 1 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, product.forecast_cost_period_one, false)} ${getBorderClass(product.current_cost_period_three, product.forecast_cost_period_one, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.current_cost_period_three, product.forecast_cost_period_one, false, 'value')} ${getBorderClass(product.current_cost_period_three, product.forecast_cost_period_one, false, 'value')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_cost_period_one || '0'}</span>
                                   {getVarianceDisplay(
@@ -1778,7 +1822,7 @@ setAdditionalForecastMonths([
                             
                             {/* Forecast Cost – Month 2 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false)} ${getBorderClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false, 'value')} ${getBorderClass(product.forecast_cost_period_one, product.forecast_cost_period_two, false, 'value')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_cost_period_two || '0'}</span>
                                   {getVarianceDisplay(
@@ -1791,7 +1835,7 @@ setAdditionalForecastMonths([
                             
                             {/* Forecast Cost – Month 3 */}
                             {!shouldHideForecast && (
-                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false)} ${getBorderClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false)}`}>
+                              <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false, 'value')} ${getBorderClass(product.forecast_cost_period_two, product.forecast_cost_period_three, false, 'value')}`}>
                                 <div className="flex flex-col items-center justify-center">
                                   <span className="font-medium">{product.forecast_cost_period_three || '0'}</span>
                                   {getVarianceDisplay(
@@ -2126,4 +2170,4 @@ setAdditionalForecastMonths([
   );
 };
 
-export default ValidationReview;
\ No newline at end of file
+export default ValidationReview;