SS-FCSC/fcsc_ipi_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

values

Browse Source
This commit is contained in:
naveen prabhu 2026-05-07 16:26:02 +05:30
parent df3a0bbbd4
commit a01d28bc49
1 changed files with 111 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
ipi-survey-platform/src/pages/Admin/ValidationReview.jsx
View File

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