Update customer service

frontend/dashboard/src/pages/CustomerService/Components/CardMedicine.tsx

@@ -0,0 +1,65 @@
+import { Card, Grid, Typography } from "@mui/material";
+import { Stack } from '@mui/material';
+import { DetailFinalLogType } from "../FinalLog/Model/Types";
+import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import DialogMedicine from "../FinalLog/Components/DialogMedicine";
+import { fNumber } from "@/utils/formatNumber";
+import { Button } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import { useState } from "react";
+
+type CardDetail = {
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+const style1 = {
+    color: '#919EAB',
+    width: '30%'
+}
+const style2 = {
+    width: '70%'
+}
+const marginBottom1 = {
+    marginBottom: 1,
+}
+const marginBottom2 = {
+    marginBottom: 2,
+}
+
+const [openDialogMedicine, setDialogMedicine] = useState(false);
+
+
+export default function CardMedicine({requestLog} : CardDetail ) {
+    return (
+        <Card sx={{padding:2}}  >
+            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
+                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
+                        setDialogMedicine(true)
+                    }} >
+                        <Typography variant="button" display="block">Medicine</Typography>
+                    </Button>
+            </Stack>
+
+            {requestLog?.medicine.map((item, index) => (
+                <Grid
+                    container
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="space-between"  // Menempatkan item ke sebelah kiri dan kanan
+                    sx={{ marginBottom: 2 }}
+                >
+                    <Typography variant='subtitle1'>{item.medicine}</Typography>
+                    <Typography variant="subtitle1">Rp. {fNumber(item.price)}</Typography>
+                </Grid>
+            ))}
+
+            {/* <DialogMedicine
+                requestLog={requestLog}
+                openDialog={openDialogMedicine}
+                setOpenDialog={setDialogMedicine}
+            /> */}
+        </Card>
+    )
+   
+}