update,

tsc1877/task1/project/admin/src/components/CustomerOrderTable.js

@@ -0,0 +1,99 @@
+// ** 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;