update final log

frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogMedicine.tsx

@@ -0,0 +1,160 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import { useFieldArray, useForm } from 'react-hook-form';
+import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
+
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+import { LoadingButton } from '@mui/lab';
+import AddIcon from '@mui/icons-material/Add';
+import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
+
+
+type DialogConfirmationType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    requestLog: DetailFinalLogType|undefined; 
+}
+
+export default function DialogHMedicine({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
+
+    interface FormValuesProps extends Partial<DetailFinalLogType> {
+        taxes: boolean;
+        inStock: boolean;
+    }
+
+    const onSubmit = async (data: DetailFinalLogType) => {
+        
+        reset();
+    }
+
+    const handleCloseDialogMedicine = () => {
+        setOpenDialog(false)
+        setMedicines([])
+    }
+    const [medicines, setMedicines] = useState([]);
+
+    const addMedicine = () => {
+        setMedicines((prevMedicines) => [...prevMedicines, { medicine: '', price: '' }]);
+        
+    };
+
+    const handleDelete = (index) => {
+        // Update the medicines state to remove the medicine at the given index
+        setMedicines((prevMeds) => prevMeds.filter((med, medIndex) => medIndex !== index));
+    };
+
+    const removeMedicene = (i:number) => {
+        const index = medicines.indexOf(i);
+        if (index > -1) { // only splice array when item is found
+            medicines.splice(index, 1); // 2nd parameter means remove one item only
+        }
+    }
+    
+
+    const methods = useForm<DetailFinalLogType>();
+    const {
+        reset,
+        watch,
+        control,
+        setValue,
+        getValues,
+        setError,
+        handleSubmit,
+        resetField,
+        formState: { isSubmitting },
+    } = methods;
+
+    const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
+
+    const getContent = () => (
+        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
+            <Grid container spacing={2}>
+                {/* Medicine */}
+                <Grid item xs={12}>
+                    <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                        <Typography variant='subtitle1' gutterBottom>Medicine*</Typography>
+                        <Button color="inherit" variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={addMedicine}>
+                            <Typography variant="button" display="block">Medicine</Typography>
+                        </Button>
+                    </Stack>
+                </Grid>
+
+                {/* Listing */}
+                <Grid item xs={6}>
+                    <RHFTextField
+                        name={`medicine[0].name`}
+                        label="Medicine"
+                        required
+                        placeholder="Medicine"
+                    />
+                    </Grid>
+                    <Grid item xs={6}>
+                    <RHFTextFieldMoney
+                        name={`medicine[0].price`}
+                        label="Price"
+                        required
+                        placeholder="Price"
+                    />
+                </Grid>
+                {medicines.map((medicine, index) => (
+                    <React.Fragment key={index+1}>
+                        <Grid item xs={6}>
+                        <RHFTextField
+                            name={`medicine[${index+1}].name`}
+                            label="Medicine"
+                            required
+                            placeholder="Medicine"
+                        />
+                        </Grid>
+                        <Grid item xs={6}>
+                        <RHFTextFieldMoney
+                            name={`medicine[${index+1}].price`}
+                            label="Price"
+                            required
+                            placeholder="Price"
+                        />
+                        </Grid>
+                        {/* <Grid item xs={1}>
+                            <Button variant="contained" color="error" onClick={() => handleDelete(index)}>
+                                Delete
+                            </Button>
+                        </Grid> */}
+                        
+                    </React.Fragment>
+                ))}
+                
+            </Grid>
+        </Stack>
+
+    </FormProvider>
+    );
+
+    const getAction = () => (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
+            <Button color="inherit" variant="outlined" onClick={handleCloseDialogMedicine}><Typography>Cancel</Typography></Button>
+            <Button variant="contained"><Typography>Add</Typography></Button>
+        </Stack>
+    );
+
+
+
+    return (
+        <MuiDialog
+          title={{name: "Medicine"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          action={getAction()}
+          content={getContent()}
+          maxWidth="xl"
+        />
+      );
+}