update,

jamespong14205/task1/project/003_src/client/components/AdminQueueItemCard/index.js

@@ -0,0 +1,66 @@
+import Box from '@mui/material/Box';
+
+const row = {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+};
+
+const labelColumn = {
+  fontWeight: 'bold',
+  width: '25%',
+};
+
+const valueColumn = {
+  width: '75%',
+};
+
+const cardTitle = {
+  fontWeight: 'bold',
+  fontSize: '1.2rem',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+};
+
+export default function AdminQueueItemCard({ queue_data }) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        margin: '1rem 0',
+      }}
+    >
+      <Box
+        sx={{
+          width: '90vw',
+          border: '1px solid gray',
+          borderRadius: '1rem',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '1rem',
+        }}
+      >
+        <Box sx={cardTitle}>{`non-urgent-case ${queue_data.id}`}</Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', padding: '1rem 1rem' }}>
+          <Box sx={row}>
+            <Box sx={labelColumn}>Name</Box>
+            <Box sx={valueColumn}>{queue_data.name || ''}</Box>
+          </Box>
+          <Box sx={row}>
+            <Box sx={labelColumn}>HKID</Box>
+            <Box sx={valueColumn}>{queue_data.hkid || '-'}</Box>
+          </Box>
+          <Box sx={row}>
+            <Box sx={labelColumn}>Mobile</Box>
+            <Box sx={valueColumn}>{queue_data.mobile || '-'}</Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}