mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 07:15:44 +00:00
feat(FE-326,327): Add sortable table headers and styling
This commit is contained in:
rstubryan
@@ -14,6 +14,15 @@ interface SalesReportTableProps {
|
||||
initialValues?: BaseClosingSales;
|
||||
}
|
||||
|
||||
interface HeaderCell {
|
||||
id: string;
|
||||
content: React.ReactNode;
|
||||
colSpan?: number;
|
||||
rowSpan?: number;
|
||||
className: string;
|
||||
field?: string;
|
||||
}
|
||||
|
||||
const generateCustomHeaders = (template: {
|
||||
groups: Array<{
|
||||
label: string;
|
||||
@@ -41,31 +50,43 @@ const generateCustomHeaders = (template: {
|
||||
|
||||
template.groups.forEach((group) => {
|
||||
if (group.subLabels) {
|
||||
mainRow.push({
|
||||
const mainCell: HeaderCell = {
|
||||
id: `${group.field || 'group'}-${subColumnIndex}`,
|
||||
content: group.label,
|
||||
colSpan: group.colSpan,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-center whitespace-nowrap border border-gray-300',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-center whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
mainRow.push(mainCell);
|
||||
|
||||
group.subLabels.forEach((subLabel) => {
|
||||
subRow.push({
|
||||
const subCell: HeaderCell = {
|
||||
id: `sub-${subColumnIndex}`,
|
||||
content: subLabel,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-300 border-t-0',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
if (group.label === 'Jumlah') {
|
||||
subCell.field = subLabel === 'Ekor' ? 'quantity' : 'weight';
|
||||
}
|
||||
|
||||
subRow.push(subCell);
|
||||
subColumnIndex++;
|
||||
});
|
||||
} else {
|
||||
mainRow.push({
|
||||
const mainCell: HeaderCell = {
|
||||
id: `${group.field}-header`,
|
||||
content: group.label,
|
||||
rowSpan: group.rowSpan,
|
||||
className:
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-300',
|
||||
});
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-200',
|
||||
};
|
||||
|
||||
mainCell.field = group.field;
|
||||
|
||||
mainRow.push(mainCell);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -371,7 +392,7 @@ const SalesReportTable = ({
|
||||
},
|
||||
{ label: 'AVG (Kg)', field: 'average', rowSpan: 2 },
|
||||
{ label: 'Harga Mitra (Rp)', field: 'price_partner', rowSpan: 2 },
|
||||
{ label: 'Total Mitra (Rp)', field: 'total_partner', rowSpan: 2 },
|
||||
{ label: 'Total Mitra (Rp)', field: 'total_mitra', rowSpan: 2 },
|
||||
{ label: 'Harga Act (Rp)', field: 'price_act', rowSpan: 2 },
|
||||
{ label: 'Total Act (Rp)', field: 'total_act', rowSpan: 2 },
|
||||
{ label: 'Kandang', field: 'kandang', rowSpan: 2 },
|
||||
@@ -413,49 +434,37 @@ const SalesReportTable = ({
|
||||
renderFooter={salesBroilerData.length > 0}
|
||||
footerContent={
|
||||
<tfoot>
|
||||
<tr className='bg-gray-100 font-semibold'>
|
||||
<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 border border-gray-200'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
|
||||
Total Penjualan
|
||||
</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 className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.totalQuantity)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.totalWeight)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatNumber(totals.avgWeight)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.avgPricePartner)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.totalPartner)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.avgPriceAct)}
|
||||
</td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right border border-gray-300 border-t-0'>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
|
||||
{formatCurrency(totals.totalAct)}
|
||||
</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 '></td>
|
||||
<td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
}
|
||||
@@ -463,9 +472,10 @@ const SalesReportTable = ({
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
tableClassName: 'w-full table-auto text-sm',
|
||||
headerRowClassName: 'hidden',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyRowClassName:
|
||||
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-300',
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user