100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
// ** MUI Imports
|
|
import Paper from '@mui/material/Paper';
|
|
import Table from '@mui/material/Table';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import NotesIcon from '@mui/icons-material/Notes';
|
|
import crypto from 'crypto';
|
|
import { Box, Stack, Typography } from '@mui/material';
|
|
import { useEffect, useState } from 'react';
|
|
import fetchCustomerOrders from 'src/api/fetchCustomerOrders';
|
|
import Loading from './Loading';
|
|
import NoOrders from './NoOrders';
|
|
|
|
const CustomerOrderTable = () => {
|
|
let [orders, setOrders] = useState(null);
|
|
let [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchOrder = async () => {
|
|
try {
|
|
let session_raw = localStorage.getItem('session');
|
|
let { session } = JSON.parse(session_raw);
|
|
let fetch_orders = await fetchCustomerOrders({ session });
|
|
setOrders(fetch_orders);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error('error during fetching orders');
|
|
}
|
|
};
|
|
fetchOrder();
|
|
}, []);
|
|
|
|
if (loading) return <Loading />;
|
|
|
|
if (!orders || orders.length == 0) return <NoOrders />;
|
|
|
|
return (
|
|
<TableContainer component={Paper} sx={{ minWidth: '66vw' }}>
|
|
<Table sx={{ width: '100%', minWidth: 650 }} aria-label="simple table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center"></TableCell>
|
|
{/* <TableCell align="center">custom_id</TableCell> */}
|
|
{/* <TableCell align="center">username</TableCell> */}
|
|
<TableCell align="center">invoice_id</TableCell>
|
|
<TableCell align="center">currency</TableCell>
|
|
<TableCell align="center">order status</TableCell>
|
|
<TableCell align="center">amount</TableCell>
|
|
<TableCell align="center">items</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{orders.map(row => (
|
|
<TableRow
|
|
key={row.name}
|
|
sx={{
|
|
'&:last-of-type td, &:last-of-type th': {
|
|
border: 0,
|
|
},
|
|
}}
|
|
>
|
|
<TableCell component="th" scope="row">
|
|
<NotesIcon />
|
|
</TableCell>
|
|
{/* <TableCell align="right">{row.custom_id}</TableCell> */}
|
|
{/* <TableCell align="right">{row.username}</TableCell> */}
|
|
<TableCell align="right">{row.invoice_id}</TableCell>
|
|
<TableCell align="right">{row.currency_code}</TableCell>
|
|
<TableCell align="right">{row.order_status}</TableCell>
|
|
<TableCell align="right">{parseInt(row.amount).toFixed(2)}</TableCell>
|
|
<TableCell align="right">
|
|
{JSON.parse(row.items).map(i => (
|
|
<>
|
|
<Stack direction="column" spacing={'0.2rem'} alignItems={'flex-start'}>
|
|
<Typography variant="caption" fontWeight={'bold'}>
|
|
{i.item_name}
|
|
</Typography>
|
|
<Typography variant="caption" fontWeight={'bold'}>
|
|
{'QTY :' + i.quantity}
|
|
</Typography>
|
|
<Typography variant="caption" fontWeight={'bold'}>
|
|
{row.currency_code + ' ' + parseInt(i.unit_price).toFixed(2)}
|
|
</Typography>
|
|
</Stack>
|
|
</>
|
|
))}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
};
|
|
|
|
export default CustomerOrderTable;
|