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

sum of quater is added in table column

Browse Source
This commit is contained in:
naveen prabhu 2026-05-13 10:42:35 +05:30
parent dcba8f2e24
commit 82bce2bb2d
1 changed files with 241 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -856,6 +856,19 @@ setAdditionalForecastMonths([
return `${quarter} ${year}`; return `${quarter} ${year}`;
}; };
const sumQuarterValues = (...values) =>
values.reduce((total, value) => total + (Number(value) || 0), 0);
const formatQuarterValue = (value) => {
const numericValue = Number(value) || 0;
if (Number.isInteger(numericValue)) {
return numericValue.toString();
}
return numericValue.toFixed(2).replace(/\.?0+$/, '');
};
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen bg-[#F6F5F1]"> <div className="min-h-screen bg-[#F6F5F1]">
@ -1096,6 +1109,52 @@ setAdditionalForecastMonths([
(!product.previous_cost_period_one || Number(product.previous_cost_period_one) === 0) && (!product.previous_cost_period_one || Number(product.previous_cost_period_one) === 0) &&
(!product.previous_cost_period_two || Number(product.previous_cost_period_two) === 0) && (!product.previous_cost_period_two || Number(product.previous_cost_period_two) === 0) &&
(!product.previous_cost_period_three || Number(product.previous_cost_period_three) === 0); (!product.previous_cost_period_three || Number(product.previous_cost_period_three) === 0);
const historicalData = showPreviousNext
? getCurrentYearForecastData(product?.product?.id)
: null;
const previousQuantityTotal = sumQuarterValues(
product.previous_quantity_period_one,
product.previous_quantity_period_two,
product.previous_quantity_period_three
);
const currentQuantityTotal = sumQuarterValues(
product.current_quantity_period_one,
product.current_quantity_period_two,
product.current_quantity_period_three
);
const historicalQuantityTotal = sumQuarterValues(
historicalData?.forecast_quantity_period_one,
historicalData?.forecast_quantity_period_two,
historicalData?.forecast_quantity_period_three
);
const forecastQuantityTotal = sumQuarterValues(
product.forecast_quantity_period_one,
product.forecast_quantity_period_two,
product.forecast_quantity_period_three
);
const previousCostTotal = sumQuarterValues(
product.previous_cost_period_one,
product.previous_cost_period_two,
product.previous_cost_period_three
);
const currentCostTotal = sumQuarterValues(
product.current_cost_period_one,
product.current_cost_period_two,
product.current_cost_period_three
);
const historicalCostTotal = sumQuarterValues(
historicalData?.forecast_cost_period_one,
historicalData?.forecast_cost_period_two,
historicalData?.forecast_cost_period_three
);
const forecastCostTotal = sumQuarterValues(
product.forecast_cost_period_one,
product.forecast_cost_period_two,
product.forecast_cost_period_three
);
return ( return (
<section key={product.id || idx} className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-5"> <section key={product.id || idx} className="rounded-[16px] bg-white p-6 shadow-[0_16px_32px_rgba(15,23,42,0.08)] ring-1 ring-[#E5E7EB] space-y-5">
@ -1216,10 +1275,16 @@ setAdditionalForecastMonths([
</div> </div>
)} )}
</div> </div>
<table className="min-w-full text-sm text-left border-collapse"> <table
className="text-sm text-left border-collapse"
style={{
tableLayout: 'fixed',
width: '100%'
}}
>
<thead> <thead>
<tr> <tr>
<th rowSpan="2" className="bg-[#F2ECCF] text-[#92722A] px-4 py-3 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB] w-[180px]"> <th rowSpan="2" className="bg-[#F2ECCF] text-[#92722A] px-4 py-1 text-xs font-semibold uppercase align-middle border-r border-[#E5E7EB]">
Metric Metric
</th> </th>
@ -1227,18 +1292,18 @@ setAdditionalForecastMonths([
<> <>
{/* 12 columns when showPreviousNext is true */} {/* 12 columns when showPreviousNext is true */}
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB] ">
{previousLabel || 'Q1 2024'} (PREVIOUS QUARTER) {previousLabel || 'Q1 2024'} (PREVIOUS QUARTER)
</th> </th>
)} )}
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{currentLabel || 'Q2 2024'} (CURRENT QUARTER) {currentLabel || 'Q2 2024'} (CURRENT QUARTER)
</th> </th>
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{additionalForecastLabel || ''} (PREVIOUS FORECAST) {additionalForecastLabel || ''} (PREVIOUS FORECAST)
</th> </th>
{!shouldHideForecast && ( {!shouldHideForecast && (
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{forecastLabel || 'Q3 2024'} (NEXT QUARTER FORECAST) {forecastLabel || 'Q3 2024'} (NEXT QUARTER FORECAST)
</th> </th>
)} )}
@ -1247,15 +1312,15 @@ setAdditionalForecastMonths([
<> <>
{/* 9 columns when showPreviousNext is false */} {/* 9 columns when showPreviousNext is false */}
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{previousLabel || 'Q1 2024'} (PREVIOUS QUARTER) {previousLabel || 'Q1 2024'} (PREVIOUS QUARTER)
</th> </th>
)} )}
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{currentLabel || 'Q2 2024'} (CURRENT QUARTER) {currentLabel || 'Q2 2024'} (CURRENT QUARTER)
</th> </th>
{!shouldHideForecast && ( {!shouldHideForecast && (
<th colSpan="3" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]"> <th colSpan="4" className="bg-[#F2ECCF] text-[#92722A] px-4 py-2 text-xs font-semibold uppercase text-center border border-[#E5E7EB]">
{forecastLabel || 'Q3 2024'} (NEXT QUARTER FORECAST) {forecastLabel || 'Q3 2024'} (NEXT QUARTER FORECAST)
</th> </th>
)} )}
@ -1278,6 +1343,9 @@ setAdditionalForecastMonths([
<th className="bg-[#F4F8FF] px-3 py-2 font-medium text-[#286CFF] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#F4F8FF] px-3 py-2 font-medium text-[#286CFF] border border-[#E5E7EB] text-center min-w-[100px]">
{previousMonths?.previous_period_three || 'Mar'} {previousMonths?.previous_period_three || 'Mar'}
</th> </th>
<th className="bg-[#F4F8FF] px-3 py-2 font-semibold text-[#286CFF] border border-[#E5E7EB] text-center min-w-[110px]">
{previousLabel || 'Q1 2024'}
</th>
</> </>
)} )}
@ -1291,6 +1359,9 @@ setAdditionalForecastMonths([
<th className="bg-[#F3FAF4] px-3 py-2 font-medium text-[#2F663C] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#F3FAF4] px-3 py-2 font-medium text-[#2F663C] border border-[#E5E7EB] text-center min-w-[100px]">
{currentMonths?.current_period_three || 'Jun'} {currentMonths?.current_period_three || 'Jun'}
</th> </th>
<th className="bg-[#F3FAF4] px-3 py-2 font-semibold text-[#2F663C] border border-[#E5E7EB] text-center min-w-[110px]">
{currentLabel || 'Q2 2024'}
</th>
{/* Previous Forecast Months */} {/* Previous Forecast Months */}
<th className="bg-purple-100 px-3 py-2 font-medium text-[#4C1D95] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-purple-100 px-3 py-2 font-medium text-[#4C1D95] border border-[#E5E7EB] text-center min-w-[100px]">
@ -1302,6 +1373,9 @@ setAdditionalForecastMonths([
<th className="bg-purple-100 px-3 py-2 font-medium text-[#4C1D95] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-purple-100 px-3 py-2 font-medium text-[#4C1D95] border border-[#E5E7EB] text-center min-w-[100px]">
{additionalForecastMonths?.[2] || 'Sep'} {additionalForecastMonths?.[2] || 'Sep'}
</th> </th>
<th className="bg-purple-100 px-3 py-2 font-semibold text-[#4C1D95] border border-[#E5E7EB] text-center min-w-[110px]">
{additionalForecastLabel || ''}
</th>
{/* Next Year Forecast Months */} {/* Next Year Forecast Months */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1315,6 +1389,9 @@ setAdditionalForecastMonths([
<th className="bg-[#FFF6EC] px-3 py-2 font-medium text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#FFF6EC] px-3 py-2 font-medium text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[100px]">
{forecastMonths?.forecast_period_three || 'Dec'} {forecastMonths?.forecast_period_three || 'Dec'}
</th> </th>
<th className="bg-[#FFF6EC] px-3 py-2 font-semibold text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[110px]">
{forecastLabel || 'Q3 2024'}
</th>
</> </>
)} )}
</> </>
@ -1332,6 +1409,9 @@ setAdditionalForecastMonths([
<th className="bg-[#F4F8FF] px-3 py-2 font-medium text-[#286CFF] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#F4F8FF] px-3 py-2 font-medium text-[#286CFF] border border-[#E5E7EB] text-center min-w-[100px]">
{previousMonths?.previous_period_three || 'Mar'} {previousMonths?.previous_period_three || 'Mar'}
</th> </th>
<th className="bg-[#F4F8FF] px-3 py-2 font-semibold text-[#286CFF] border border-[#E5E7EB] text-center min-w-[110px]">
{previousLabel || 'Q1 2024'}
</th>
</> </>
)} )}
@ -1345,6 +1425,9 @@ setAdditionalForecastMonths([
<th className="bg-[#F3FAF4] px-3 py-2 font-medium text-[#2F663C] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#F3FAF4] px-3 py-2 font-medium text-[#2F663C] border border-[#E5E7EB] text-center min-w-[100px]">
{currentMonths?.current_period_three || 'Jun'} {currentMonths?.current_period_three || 'Jun'}
</th> </th>
<th className="bg-[#F3FAF4] px-3 py-2 font-semibold text-[#2F663C] border border-[#E5E7EB] text-center min-w-[110px]">
{currentLabel || 'Q2 2024'}
</th>
{/* Next Year Forecast Months */} {/* Next Year Forecast Months */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1358,6 +1441,9 @@ setAdditionalForecastMonths([
<th className="bg-[#FFF6EC] px-3 py-2 font-medium text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[100px]"> <th className="bg-[#FFF6EC] px-3 py-2 font-medium text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[100px]">
{forecastMonths?.forecast_period_three || 'Sep'} {forecastMonths?.forecast_period_three || 'Sep'}
</th> </th>
<th className="bg-[#FFF6EC] px-3 py-2 font-semibold text-[#F29F0E] border border-[#E5E7EB] text-center min-w-[110px]">
{forecastLabel || 'Q3 2024'}
</th>
</> </>
)} )}
</> </>
@ -1411,6 +1497,11 @@ setAdditionalForecastMonths([
)} )}
</div> </div>
</td> </td>
<td className="px-3 py-3 border border-[#E5E7EB] text-center bg-[#F9FBFF]">
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(previousQuantityTotal)}</span>
</div>
</td>
</> </>
)} )}
@ -1455,33 +1546,42 @@ setAdditionalForecastMonths([
)} )}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(previousQuantityTotal, currentQuantityTotal, shouldHidePreviousQuarter, 'quantity')} ${getBorderClass(previousQuantityTotal, currentQuantityTotal, shouldHidePreviousQuarter, 'quantity')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(currentQuantityTotal)}</span>
{!shouldHidePreviousQuarter && getVarianceDisplay(previousQuantityTotal, currentQuantityTotal)}
</div>
</td>
{/* HISTORICAL Data (from API) */} {/* HISTORICAL Data (from API) */}
{showPreviousNext && (() => { {showPreviousNext && (
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, 'quantity')} ${getBorderClass(product.current_quantity_period_three, historicalData.forecast_quantity_period_one, false, 'quantity')}`}>
<> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_quantity_period_one || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(product.current_quantity_period_three, historicalData.forecast_quantity_period_one)}
<span className="font-medium">{historicalData.forecast_quantity_period_one || '0'}</span> </div>
{getVarianceDisplay(product.current_quantity_period_three, historicalData.forecast_quantity_period_one)} </td>
</div> <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')}`}>
</td> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_quantity_period_two || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two)}
<span className="font-medium">{historicalData.forecast_quantity_period_two || '0'}</span> </div>
{getVarianceDisplay(historicalData.forecast_quantity_period_one, historicalData.forecast_quantity_period_two)} </td>
</div> <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')}`}>
</td> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_quantity_period_three || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three)}
<span className="font-medium">{historicalData.forecast_quantity_period_three || '0'}</span> </div>
{getVarianceDisplay(historicalData.forecast_quantity_period_two, historicalData.forecast_quantity_period_three)} </td>
</div> <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(currentQuantityTotal, historicalQuantityTotal, false, 'quantity')} ${getBorderClass(currentQuantityTotal, historicalQuantityTotal, false, 'quantity')}`}>
</td> <div className="flex flex-col items-center justify-center">
</> <span className="font-medium">{formatQuarterValue(historicalQuantityTotal)}</span>
); {getVarianceDisplay(currentQuantityTotal, historicalQuantityTotal)}
})()} </div>
</td>
</>
)}
{/* NEXT YEAR FORECAST Data (original from submission) */} {/* NEXT YEAR FORECAST Data (original from submission) */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1504,6 +1604,12 @@ setAdditionalForecastMonths([
{getVarianceDisplay(product.forecast_quantity_period_two, product.forecast_quantity_period_three)} {getVarianceDisplay(product.forecast_quantity_period_two, product.forecast_quantity_period_three)}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(showPreviousNext ? historicalQuantityTotal : currentQuantityTotal, forecastQuantityTotal, false, 'quantity')} ${getBorderClass(showPreviousNext ? historicalQuantityTotal : currentQuantityTotal, forecastQuantityTotal, false, 'quantity')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(forecastQuantityTotal)}</span>
{getVarianceDisplay(showPreviousNext ? historicalQuantityTotal : currentQuantityTotal, forecastQuantityTotal)}
</div>
</td>
</> </>
)} )}
</> </>
@ -1543,6 +1649,13 @@ setAdditionalForecastMonths([
</div> </div>
</td> </td>
)} )}
{!shouldHidePreviousQuarter && (
<td className="px-3 py-3 border border-[#E5E7EB] text-center bg-[#F9FBFF]">
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(previousQuantityTotal)}</span>
</div>
</td>
)}
{/* 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, 'quantity')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_quantity_period_three, product.current_quantity_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterAllZeros, 'quantity')}`}> <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')}`}>
@ -1576,6 +1689,12 @@ setAdditionalForecastMonths([
)} )}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(previousQuantityTotal, currentQuantityTotal, shouldHidePreviousQuarter, 'quantity')} ${getBorderClass(previousQuantityTotal, currentQuantityTotal, shouldHidePreviousQuarter, 'quantity')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(currentQuantityTotal)}</span>
{!shouldHidePreviousQuarter && getVarianceDisplay(previousQuantityTotal, currentQuantityTotal)}
</div>
</td>
{/* Next Year Forecast – Month 1 */} {/* Next Year Forecast – Month 1 */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1615,6 +1734,14 @@ setAdditionalForecastMonths([
</div> </div>
</td> </td>
)} )}
{!shouldHideForecast && (
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(currentQuantityTotal, forecastQuantityTotal, false, 'quantity')} ${getBorderClass(currentQuantityTotal, forecastQuantityTotal, false, 'quantity')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(forecastQuantityTotal)}</span>
{getVarianceDisplay(currentQuantityTotal, forecastQuantityTotal)}
</div>
</td>
)}
</> </>
)} )}
</tr> </tr>
@ -1662,6 +1789,11 @@ setAdditionalForecastMonths([
)} )}
</div> </div>
</td> </td>
<td className="px-3 py-3 border border-[#E5E7EB] text-center bg-[#F9FBFF]">
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(previousCostTotal)}</span>
</div>
</td>
</> </>
)} )}
@ -1684,33 +1816,42 @@ setAdditionalForecastMonths([
{getVarianceDisplay(product.current_cost_period_two, product.current_cost_period_three)} {getVarianceDisplay(product.current_cost_period_two, product.current_cost_period_three)}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(previousCostTotal, currentCostTotal, shouldHidePreviousQuarter, 'value')} ${getBorderClass(previousCostTotal, currentCostTotal, shouldHidePreviousQuarter, 'value')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(currentCostTotal)}</span>
{!shouldHidePreviousQuarter && getVarianceDisplay(previousCostTotal, currentCostTotal)}
</div>
</td>
{/* HISTORICAL Cost (from API) */} {/* HISTORICAL Cost (from API) */}
{showPreviousNext && (() => { {showPreviousNext && (
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, 'value')} ${getBorderClass(product.current_cost_period_three, historicalData.forecast_cost_period_one, false, 'value')}`}>
<> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_cost_period_one || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(product.current_cost_period_three, historicalData.forecast_cost_period_one)}
<span className="font-medium">{historicalData.forecast_cost_period_one || '0'}</span> </div>
{getVarianceDisplay(product.current_cost_period_three, historicalData.forecast_cost_period_one)} </td>
</div> <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')}`}>
</td> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_cost_period_two || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two)}
<span className="font-medium">{historicalData.forecast_cost_period_two || '0'}</span> </div>
{getVarianceDisplay(historicalData.forecast_cost_period_one, historicalData.forecast_cost_period_two)} </td>
</div> <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')}`}>
</td> <div className="flex flex-col items-center justify-center">
<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')}`}> <span className="font-medium">{historicalData.forecast_cost_period_three || '0'}</span>
<div className="flex flex-col items-center justify-center"> {getVarianceDisplay(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three)}
<span className="font-medium">{historicalData.forecast_cost_period_three || '0'}</span> </div>
{getVarianceDisplay(historicalData.forecast_cost_period_two, historicalData.forecast_cost_period_three)} </td>
</div> <td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(currentCostTotal, historicalCostTotal, false, 'value')} ${getBorderClass(currentCostTotal, historicalCostTotal, false, 'value')}`}>
</td> <div className="flex flex-col items-center justify-center">
</> <span className="font-medium">{formatQuarterValue(historicalCostTotal)}</span>
); {getVarianceDisplay(currentCostTotal, historicalCostTotal)}
})()} </div>
</td>
</>
)}
{/* NEXT YEAR FORECAST Cost (original from submission) */} {/* NEXT YEAR FORECAST Cost (original from submission) */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1733,6 +1874,12 @@ setAdditionalForecastMonths([
{getVarianceDisplay(product.forecast_cost_period_two, product.forecast_cost_period_three)} {getVarianceDisplay(product.forecast_cost_period_two, product.forecast_cost_period_three)}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(showPreviousNext ? historicalCostTotal : currentCostTotal, forecastCostTotal, false, 'value')} ${getBorderClass(showPreviousNext ? historicalCostTotal : currentCostTotal, forecastCostTotal, false, 'value')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(forecastCostTotal)}</span>
{getVarianceDisplay(showPreviousNext ? historicalCostTotal : currentCostTotal, forecastCostTotal)}
</div>
</td>
</> </>
)} )}
</> </>
@ -1772,6 +1919,13 @@ setAdditionalForecastMonths([
</div> </div>
</td> </td>
)} )}
{!shouldHidePreviousQuarter && (
<td className="px-3 py-3 border border-[#E5E7EB] text-center bg-[#F9FBFF]">
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(previousCostTotal)}</span>
</div>
</td>
)}
{/* 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, 'value')} ${getBorderClass(shouldHidePreviousQuarter ? null : product.previous_cost_period_three, product.current_cost_period_one, shouldHidePreviousQuarter ? false : isPreviousQuarterCostAllZeros, 'value')}`}> <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')}`}>
@ -1805,6 +1959,12 @@ setAdditionalForecastMonths([
)} )}
</div> </div>
</td> </td>
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(previousCostTotal, currentCostTotal, shouldHidePreviousQuarter, 'value')} ${getBorderClass(previousCostTotal, currentCostTotal, shouldHidePreviousQuarter, 'value')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(currentCostTotal)}</span>
{!shouldHidePreviousQuarter && getVarianceDisplay(previousCostTotal, currentCostTotal)}
</div>
</td>
{/* Forecast Cost – Month 1 */} {/* Forecast Cost – Month 1 */}
{!shouldHideForecast && ( {!shouldHideForecast && (
@ -1844,6 +2004,14 @@ setAdditionalForecastMonths([
</div> </div>
</td> </td>
)} )}
{!shouldHideForecast && (
<td className={`px-3 py-3 border border-[#E5E7EB] text-center ${getCellClass(currentCostTotal, forecastCostTotal, false, 'value')} ${getBorderClass(currentCostTotal, forecastCostTotal, false, 'value')}`}>
<div className="flex flex-col items-center justify-center">
<span className="font-medium">{formatQuarterValue(forecastCostTotal)}</span>
{getVarianceDisplay(currentCostTotal, forecastCostTotal)}
</div>
</td>
)}
</> </>
)} )}
</tr> </tr>
@ -1855,11 +2023,11 @@ setAdditionalForecastMonths([
{showPreviousNext ? ( {showPreviousNext ? (
<> <>
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
<td colSpan="3" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium border border-[#E5E7EB]"> <td colSpan="4" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium border border-[#E5E7EB]">
{product.other_variation_reason || {product.other_variation_reason ||
(product?.variation_reason?.reason ? (product?.variation_reason?.reason ?
(product.variation_reason.reason.startsWith('Other (specify)') ? '' : product.variation_reason.reason) (product.variation_reason.reason.startsWith('Other (specify)') ? '' : product.variation_reason.reason)
@ -1867,11 +2035,11 @@ setAdditionalForecastMonths([
} }
</td> </td>
{/* Previous Forecast (colSpan 3) */} {/* Previous Forecast (colSpan 3) */}
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
{!shouldHideForecast && ( {!shouldHideForecast && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
@ -1879,11 +2047,11 @@ setAdditionalForecastMonths([
) : ( ) : (
<> <>
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
<td colSpan="3" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium border border-[#E5E7EB]"> <td colSpan="4" className="px-4 py-3 text-center bg-[#E9F6EC] text-[#1E7C34] font-medium border border-[#E5E7EB]">
{product.other_variation_reason || {product.other_variation_reason ||
(product?.variation_reason?.reason ? (product?.variation_reason?.reason ?
(product.variation_reason.reason.startsWith('Other (specify)') ? '' : product.variation_reason.reason) (product.variation_reason.reason.startsWith('Other (specify)') ? '' : product.variation_reason.reason)
@ -1891,7 +2059,7 @@ setAdditionalForecastMonths([
} }
</td> </td>
{!shouldHideForecast && ( {!shouldHideForecast && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
@ -1906,18 +2074,18 @@ setAdditionalForecastMonths([
{showPreviousNext ? ( {showPreviousNext ? (
<> <>
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
{!shouldHideForecast && ( {!shouldHideForecast && (
<td colSpan="3" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium border border-[#E5E7EB]"> <td colSpan="4" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium border border-[#E5E7EB]">
{product.other_zero_target_reason || {product.other_zero_target_reason ||
(product?.zero_target_reason?.reason ? (product?.zero_target_reason?.reason ?
(product.zero_target_reason.reason.startsWith('Other (specify)') ? '' : product.zero_target_reason.reason) (product.zero_target_reason.reason.startsWith('Other (specify)') ? '' : product.zero_target_reason.reason)
@ -1929,15 +2097,15 @@ setAdditionalForecastMonths([
) : ( ) : (
<> <>
{!shouldHidePreviousQuarter && ( {!shouldHidePreviousQuarter && (
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
)} )}
<td colSpan="3" className="text-center text-[#6B7280] border border-[#E5E7EB]"> <td colSpan="4" className="text-center text-[#6B7280] border border-[#E5E7EB]">
– –
</td> </td>
{!shouldHideForecast && ( {!shouldHideForecast && (
<td colSpan="3" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium border border-[#E5E7EB]"> <td colSpan="4" className="px-4 py-3 text-center bg-[#FFF2E0] text-[#D97706] font-medium border border-[#E5E7EB]">
{product.other_zero_target_reason || {product.other_zero_target_reason ||
(product?.zero_target_reason?.reason ? (product?.zero_target_reason?.reason ?
(product.zero_target_reason.reason.startsWith('Other (specify)') ? '' : product.zero_target_reason.reason) (product.zero_target_reason.reason.startsWith('Other (specify)') ? '' : product.zero_target_reason.reason)