eigen
/
pos-realtime-report
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 11 Wiki Activity

feat: add total at header table

main
Firman Ramdhani 2024-10-03 11:00:06 +07:00
parent 6964ca5764
commit 3df442b6a1
1 changed files with 137 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/apps/admin/index.tsx
View File

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