feat: add total at header table
Firman Ramdhani
parent
6964ca5764
commit
3df442b6a1
|
|
@ -9,13 +9,17 @@ import { v4 } from 'uuid';
|
|||
|
||||
export default function Admin() {
|
||||
const [dataItem, setDataItem] = useState<any[]>([]);
|
||||
const [dataItemMaster, setDataItemMaster] = useState<any[]>([]);
|
||||
|
||||
const [dataItemKeys, setDataItemKeys] = useState<any[]>([]);
|
||||
const [dataItemMasterKeys, setDataItemMasterKeys] = useState<any[]>([]);
|
||||
|
||||
const [loadingDataItem, setLoadingDataItem] = useState<boolean>(false);
|
||||
const [dataItemTotalPax, setDataItemTotalPax] = useState<number>(0);
|
||||
const [dataItemTotalRevenue, setDataItemTotalRevenue] = useState<number>(0);
|
||||
|
||||
const [dataItemMaster, setDataItemMaster] = useState<any[]>([]);
|
||||
const [dataItemMasterKeys, setDataItemMasterKeys] = useState<any[]>([]);
|
||||
const [loadingDataItemMaster, setLoadingDataItemMaster] = useState<boolean>(false);
|
||||
const [dataItemMasterTotalPax, setDataItemMasterTotalPax] = useState<number>(0);
|
||||
const [dataItemMasterTotalRevenue, setDataItemMasterTotalRevenue] = useState<number>(0);
|
||||
|
||||
const [filterDate, setFilerDate] = useState(dayjs());
|
||||
|
||||
async function getDataItem(params: any) {
|
||||
|
|
@ -44,6 +48,11 @@ export default function Admin() {
|
|||
};
|
||||
});
|
||||
|
||||
const totalPax = lodash.sumBy(data, (item: any) => Number(item.tr_item__qty));
|
||||
const totalRevenue = lodash.sumBy(data, (item: any) => Number(item.tr_item__total_net_price));
|
||||
setDataItemTotalPax(totalPax);
|
||||
setDataItemTotalRevenue(totalRevenue);
|
||||
|
||||
setDataItemKeys(groupedData.map((item) => item.key));
|
||||
setDataItem(groupedData);
|
||||
})
|
||||
|
|
@ -88,6 +97,11 @@ export default function Admin() {
|
|||
};
|
||||
});
|
||||
|
||||
const totalPax = lodash.sumBy(data, (item: any) => Number(item.tr_item__qty));
|
||||
const totalRevenue = lodash.sumBy(data, (item: any) => Number(item.tr_item_bundling__total_net_price));
|
||||
setDataItemMasterTotalPax(totalPax);
|
||||
setDataItemMasterTotalRevenue(totalRevenue);
|
||||
|
||||
setDataItemMasterKeys(groupedData.map((item) => item.key));
|
||||
setDataItemMaster(groupedData);
|
||||
})
|
||||
|
|
@ -116,7 +130,7 @@ export default function Admin() {
|
|||
<Col xl={8} lg={8} md={12} span={24}>
|
||||
<DatePicker
|
||||
size="large"
|
||||
popupStyle={{ fontSize: 18 }}
|
||||
popupStyle={{ fontSize: 16 }}
|
||||
allowClear={false}
|
||||
value={filterDate}
|
||||
style={{ width: '100%' }}
|
||||
|
|
@ -127,76 +141,125 @@ export default function Admin() {
|
|||
</Row>
|
||||
<div style={{ marginBottom: 20 }}></div>
|
||||
|
||||
<Card
|
||||
title={
|
||||
<div style={{ paddingTop: 10, paddingBottom: 10 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item</div>
|
||||
<div
|
||||
style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
|
||||
>{`Laporan pendapatan item per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
bordered
|
||||
size="small"
|
||||
dataSource={dataItem}
|
||||
pagination={false}
|
||||
loading={loadingDataItem}
|
||||
scroll={{ x: 'max-width', y: 350 }}
|
||||
rowKey={(child) => child.key} // Make sure each child row has a unique key
|
||||
expandable={{ expandedRowKeys: dataItemKeys, showExpandColumn: false }}
|
||||
rowClassName={(row) => (row.key ? 'row-group' : '')}
|
||||
rowHoverable={false}
|
||||
columns={[
|
||||
{ key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
|
||||
{ key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
|
||||
{
|
||||
key: 'tr_item__total_net_price',
|
||||
dataIndex: 'tr_item__total_net_price',
|
||||
title: 'REVENUE',
|
||||
width: 120,
|
||||
render: (value) => currencyFormatter({ value }),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
<div style={{ marginBottom: 20 }}></div>
|
||||
<Card
|
||||
title={
|
||||
<div style={{ paddingTop: 10, paddingBottom: 10 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item Master</div>
|
||||
<div
|
||||
style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
|
||||
>{`Laporan pendapatan item master per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
bordered
|
||||
size="small"
|
||||
dataSource={dataItemMaster}
|
||||
pagination={false}
|
||||
loading={loadingDataItemMaster}
|
||||
scroll={{ x: 'max-width', y: 350 }}
|
||||
rowKey={(child) => child.key} // Make sure each child row has a unique key
|
||||
expandable={{ expandedRowKeys: dataItemMasterKeys, showExpandColumn: false }}
|
||||
rowClassName={(row) => (row.key ? 'row-group' : '')}
|
||||
rowHoverable={false}
|
||||
columns={[
|
||||
{ key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xl={12} lg={12} span={24}>
|
||||
<Card
|
||||
title={
|
||||
<div style={{ paddingTop: 10, paddingBottom: 10 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item</div>
|
||||
<div
|
||||
style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
|
||||
>{`Laporan pendapatan item per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Row gutter={[8, 8]}>
|
||||
<Col span={12}>
|
||||
<Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL PAX</div>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>{dataItemTotalPax}</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL REVENUE</div>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
|
||||
{currencyFormatter({ value: dataItemTotalRevenue })}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ marginBottom: 10 }}></div>
|
||||
<Table
|
||||
bordered
|
||||
size="small"
|
||||
dataSource={dataItem}
|
||||
pagination={false}
|
||||
loading={loadingDataItem}
|
||||
scroll={{ x: 'max-width', y: 350 }}
|
||||
rowKey={(child) => child.key} // Make sure each child row has a unique key
|
||||
expandable={{ expandedRowKeys: dataItemKeys, showExpandColumn: false }}
|
||||
rowClassName={(row) => (row.key ? 'row-group' : '')}
|
||||
rowHoverable={false}
|
||||
columns={[
|
||||
{ key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
|
||||
{ key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
|
||||
{
|
||||
key: 'tr_item__total_net_price',
|
||||
dataIndex: 'tr_item__total_net_price',
|
||||
title: 'REVENUE',
|
||||
width: 120,
|
||||
render: (value) => currencyFormatter({ value }),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xl={12} lg={12} span={24}>
|
||||
<Card
|
||||
title={
|
||||
<div style={{ paddingTop: 10, paddingBottom: 10 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item Master</div>
|
||||
<div
|
||||
style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
|
||||
>{`Laporan pendapatan item master per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Row gutter={[8, 8]}>
|
||||
<Col span={12}>
|
||||
<Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL PAX</div>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
|
||||
{dataItemMasterTotalPax}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL REVENUE</div>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
|
||||
{currencyFormatter({ value: dataItemMasterTotalRevenue })}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ marginBottom: 10 }}></div>
|
||||
<Table
|
||||
bordered
|
||||
size="small"
|
||||
dataSource={dataItemMaster}
|
||||
pagination={false}
|
||||
loading={loadingDataItemMaster}
|
||||
scroll={{ x: 'max-width', y: 350 }}
|
||||
rowKey={(child) => child.key} // Make sure each child row has a unique key
|
||||
expandable={{ expandedRowKeys: dataItemMasterKeys, showExpandColumn: false }}
|
||||
rowClassName={(row) => (row.key ? 'row-group' : '')}
|
||||
rowHoverable={false}
|
||||
columns={[
|
||||
{ key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
|
||||
|
||||
{ key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
|
||||
{
|
||||
key: 'tr_item_bundling__total_net_price',
|
||||
dataIndex: 'tr_item_bundling__total_net_price',
|
||||
title: 'REVENUE',
|
||||
width: 120,
|
||||
render: (value) => currencyFormatter({ value }),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
{ key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
|
||||
{
|
||||
key: 'tr_item_bundling__total_net_price',
|
||||
dataIndex: 'tr_item_bundling__total_net_price',
|
||||
title: 'REVENUE',
|
||||
width: 120,
|
||||
render: (value) => currencyFormatter({ value }),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue