refactor(FE-326,327): enhance SalesReportTable to handle empty sales data and conditionally render summary row

This commit is contained in:
rstubryan
2025-12-04 14:08:44 +07:00
parent ba40bbb1d3
commit 1a4a05308f
@@ -102,6 +102,18 @@ const SalesReportTable = ({
}, [initialValues, activeTabId]); }, [initialValues, activeTabId]);
const totals = useMemo(() => { const totals = useMemo(() => {
if (salesBroilerData.length === 0) {
return {
totalQuantity: 0,
totalWeight: 0,
avgWeight: 0,
avgPricePartner: 0,
totalPartner: 0,
avgPriceAct: 0,
totalAct: 0,
};
}
const totalQuantity = salesBroilerData.reduce( const totalQuantity = salesBroilerData.reduce(
(sum, item) => sum + (item.quantity || 0), (sum, item) => sum + (item.quantity || 0),
0 0
@@ -113,7 +125,7 @@ const SalesReportTable = ({
const avgWeight = totalQuantity > 0 ? totalWeight / totalQuantity : 0; const avgWeight = totalQuantity > 0 ? totalWeight / totalQuantity : 0;
const validPriceItems = salesBroilerData.filter( const validPriceItems = salesBroilerData.filter(
(item) => item.price != null (item) => item.price != null && item.price > 0
); );
const avgPricePartner = const avgPricePartner =
validPriceItems.length > 0 validPriceItems.length > 0
@@ -374,54 +386,56 @@ const SalesReportTable = ({
/> />
{/* Summary Row */} {/* Summary Row */}
<table className='w-full table-auto text-sm mt-0'> {salesBroilerData.length > 0 && (
<tbody> <table className='w-full table-auto text-sm mt-0'>
<tr className='bg-gray-100 font-semibold'> <tbody>
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> <tr className='bg-gray-100 font-semibold'>
Total Penjualan <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> Total Penjualan
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatNumber(totals.totalQuantity)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatNumber(totals.totalQuantity)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatNumber(totals.totalWeight)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatNumber(totals.totalWeight)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatNumber(totals.avgWeight)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatNumber(totals.avgWeight)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatCurrency(totals.avgPricePartner)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatCurrency(totals.avgPricePartner)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatCurrency(totals.totalPartner)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatCurrency(totals.totalPartner)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatCurrency(totals.avgPriceAct)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatCurrency(totals.avgPriceAct)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'> </td>
{formatCurrency(totals.totalAct)} <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
</td> {formatCurrency(totals.totalAct)}
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'> </td>
- <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300 border-t-0'>
</td> -
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
)}
</Card> </Card>
</div> </div>
), ),