feat: add REQ0189 frontend party-order list and details pages with mock data and API integration

03_source/frontend/src/sections/party-order/party-order-details-customer.tsx

@@ -0,0 +1,59 @@
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Iconify } from 'src/components/iconify';
+import type { IOrderCustomer } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  customer?: IOrderCustomer;
+};
+
+export function OrderDetailsCustomer({ customer }: Props) {
+  return (
+    <>
+      <CardHeader
+        title="Customer info"
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+      <Box sx={{ p: 3, display: 'flex' }}>
+        <Avatar
+          alt={customer?.name}
+          src={customer?.avatarUrl}
+          sx={{ width: 48, height: 48, mr: 2 }}
+        />
+
+        <Stack spacing={0.5} sx={{ typography: 'body2', alignItems: 'flex-start' }}>
+          <Typography variant="subtitle2">{customer?.name}</Typography>
+
+          <Box sx={{ color: 'text.secondary' }}>{customer?.email}</Box>
+
+          <div>
+            IP address:
+            <Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
+              {customer?.ipAddress}
+            </Box>
+          </div>
+
+          <Button
+            size="small"
+            color="error"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            sx={{ mt: 1 }}
+          >
+            Add to Blacklist
+          </Button>
+        </Stack>
+      </Box>
+    </>
+  );
+}