Drug Update

frontend/dashboard/src/pages/Master/Drug/Index.tsx

@@ -1,7 +1,7 @@
 import { Card } from "@mui/material";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
-import List from "./List2";
+import List from "./List";
 
 
 

frontend/dashboard/src/pages/Master/Drug/List.tsx

@@ -1,60 +1,106 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
+import {
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+  Button,
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+  Card,
-import AddIcon from '@mui/icons-material/Add';
+  IconButton,
-import UploadIcon from '@mui/icons-material/Upload';
+  MenuItem,
-import CancelIcon from '@mui/icons-material/Cancel';
+  Paper,
-// hooks
+  Table,
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+  TableBody,
-import useSettings from '../../../hooks/useSettings';
+  TableCell,
-import { useParams, useSearchParams } from 'react-router-dom';
+  TableContainer,
-// components
+  TableHead,
-import axios from '../../../utils/axios';
+  TableRow,
-import { LaravelPaginatedData } from '../../../@types/paginated-data';
+  TextField,
-import { Icd } from '../../../@types/diagnosis';
+  Typography,
-import BasePagination from '../../../components/BasePagination';
+  Stack,
-import { enqueueSnackbar } from 'notistack';
+  Collapse,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  FormHelperText,
+  Menu,
+  ButtonGroup,
+  } from '@mui/material';
+  import AddIcon from '@mui/icons-material/Add';
+  // hooks
+  import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+  import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+  // components
+  import axios from '../../../utils/axios';
+  import { Drug } from '../../../@types/pharmacy-and-delivery-managements';
+  import { LaravelPaginatedData } from '../../../@types/paginated-data';
+  import BasePagination from '../../../components/BasePagination';
+  import TableMoreMenu from '@/components/table/TableMoreMenu';
+  import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+  import HistoryIcon from '@mui/icons-material/History';
+  import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+  import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+  import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+  import CloseIcon from '@mui/icons-material/Close';
+  import { enqueueSnackbar } from 'notistack';
+  import Label from '../../../components/Label';
+  import UploadIcon from '@mui/icons-material/Upload';
+  import CancelIcon from '@mui/icons-material/Cancel';
+  import DownloadIcon from '@mui/icons-material/Download';
+  import { LoadingButton } from '@mui/lab';
   
-export default function List() {
+
-  const { themeStretch } = useSettings();
+  export default function DrugList() {
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
+  const navigate = useNavigate();
 
   function SearchInput(props: any) {
       // SEARCH
       const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+      const [searchText, setSearchText] = useState('');
 
       const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+      };
 
-    const handleSearchSubmit = (event: any) => {
+      const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+      };
 
-    useEffect(() =>  { // Trigger First Search
+      useEffect(() => {
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+      }, [searchParams]);
 
       return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search Code or Name" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search Code or Name..."
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+          />
       </form>
       );
   }
 
+  // Called on every row to map the data to the columns
+  function createData(drug: Drug): Drug {
+      return {
+      ...drug,
+      };
+  }
   function ImportForm(props: any) {
       // IMPORT
       // Create Button Menu
       const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
       const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+      const importPlan = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+      const [currentImportFileName, setCurrentImportFileName] = useState(null);
+      const [importLoading, setImportLoading] = useState(false);
 
       const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
           setAnchorEl(event.currentTarget);
@@ -65,55 +111,88 @@ export default function List() {
       };
 
       const handleImportButton = () => {
-      if (importForm?.current) {
+          if (importPlan?.current) {
           handleClose();
-        importForm.current ? importForm.current.click() : console.log('No File selected');
+          importPlan.current ? importPlan.current.click() : console.log('No File selected');
           } else {
-        alert('No file selected')
+          alert('No file selected');
-      }
           }
+      };
 
       const handleCancelImportButton = () => {
-      importForm.current.value = "";
+          if(importPlan.current)
-      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
+          {
+              importPlan.current.value = '';
+              importPlan.current.dispatchEvent(new Event('change', { bubbles: true }));
           }
+      };
 
       const handleImportChange = (event: any) => {
           if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name)
+          setCurrentImportFileName(event.target.files[0].name);
           } else {
           setCurrentImportFileName(null);
           }
-    }
+      };
 
       const handleUpload = () => {
-      if (importForm.current?.files.length) {
+          if(importPlan.current && importPlan.current.files)
+          {
+              if (importPlan.current?.files.length) {
                   const formData = new FormData();
-        formData.append("file", importForm.current?.files[0])
+                  formData.append('file', importPlan.current?.files[0]);
-        axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
+                  setImportLoading(true);
-          .then(response => {
+                  axios
+                      .post(`master/drugs/${corporate_id}/import`, formData)
+                      .then((response) => {
                       handleCancelImportButton();
                       loadDataTableData();
-            setImportResult(response.data)
+                      setImportResult(response.data);
-            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+                      console.log(response.data);
-          })
+                      setImportLoading(false);
-          .catch(response => {
-            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
                       })
+                      .catch((response) => {
+                      enqueueSnackbar(
+                          'Looks like something went wrong. Please check your data and try again. ' +
+                          response.message,
+                          { variant: 'error' }
+                      );
+                      setImportLoading(false);
+                      });
               } else {
-        enqueueSnackbar('No File Selected', { variant: 'warning' })
+                  enqueueSnackbar('No File Selected', { variant: 'warning' });
               }
           }
+      };
+
+      const handleGetTemplate = () => {
+          axios.get('master/drugs/download-template').then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+          });
+      };
 
       return (
           <div>
-        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+          <input
-        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+              type="file"
-          <SearchInput onSearch={applyFilter}/>
+              id="file"
+              ref={importPlan}
+              style={{ display: 'none' }}
+              onChange={handleImportChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+          {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+              <SearchInput onSearch={applyFilter} />
               <Button
                   id="import-button"
-              variant='outlined'
+                  startIcon={<DownloadIcon />}
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+                  sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
                   aria-controls={createMenu ? 'basic-menu' : undefined}
                   aria-haspopup="true"
                   aria-expanded={createMenu ? 'true' : undefined}
@@ -130,78 +209,142 @@ export default function List() {
                   'aria-labelledby': 'basic-button',
                   }}
               >
-              <MenuItem onClick={handleImportButton}>Import</MenuItem>
+                  <MenuItem onClick={handleImportButton}>
-              <MenuItem onClick={handleClose}>Download Template</MenuItem>
+                      <Typography variant='body2'>Import</Typography>
+                  </MenuItem>
+                  <MenuItem
+                      onClick={() => {
+                          handleGetTemplate();
+                      }}
+                  >
+                  <Typography variant='body2'> Download Template</Typography>
+                  </MenuItem>
+                  {/* <MenuItem onClick={handleICDList}>
+                  <Typography variant='body2'>Download ICD</Typography>
+                  </MenuItem> */}
               </Menu>
               </Stack>
           )}
 
-        {( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          {currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
               <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
-            <Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
+                  <Button onClick={handleImportButton} fullWidth>
-            <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
+                  {currentImportFileName ?? 'No File Selected'}
+                  </Button>
+                  <Button
+                  onClick={handleCancelImportButton}
+                  size="small"
+                  fullWidth={false}
+                  sx={{ p: 1.8 }}
+                  >
+                  <CancelIcon color="error" />
+                  </Button>
               </ButtonGroup>
 
-          <Button
+              <LoadingButton
                   id="upload-button"
-            variant='outlined'
+                  variant="outlined"
-            startIcon={<UploadIcon />} sx={{ p: 1.8 }}
+                  startIcon={<UploadIcon />}
+                  sx={{ p: 1.8 }}
                   onClick={handleUpload}
+                  loading={importLoading}
               >
                   Upload
-          </Button>
+              </LoadingButton>
               </Stack>
           )}
-        {( importResult && 
+          {importResult && (
               <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
-          <Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
+              <Box sx={{ color: 'text.secondary' }}>
+                  Last Import Result :{' '}
+                  <Box sx={{ color: 'success.main', display: 'inline' }}>
+                  {importResult.data.total_success_row ?? 0}
+                  </Box>{' '}
+                  Row Processed,{' '}
+                  <Box sx={{ color: 'error.main', display: 'inline' }}>
+                  {importResult.data.total_failed_row}
+                  </Box>{' '}
+                  Failed
+                  {importResult.data.failed_rows.map((row, index) => (
+                      <Typography variant='body' key={index} color="error"> [Code=>{row.code ? row.code : 'Required'},Name=>{row.name ? row.name : 'Required'}]</Typography>
+                  ))}
+              </Box>
               </Stack>
           )}
           </div>
       );
       }
 
-  // Called on every row to map the data to the columns
-  function createData( icd: Icd ): Icd {
-    return {
-      ...icd,
-    }
-  }
-
   // Generate the every row of the table
   function Row(props: { row: ReturnType<typeof createData> }) {
       const { row } = props;
       const [open, setOpen] = React.useState(false);
+      const style1 = {
+      color: '#637381'
+      }
 
       return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell>
+          <TableCell align="left">{row.type ? row.type : '-'}</TableCell>
-            <IconButton
+          <TableCell align="left">{row.code ? row.code : '-'}</TableCell>
-              aria-label="expand row"
+          <TableCell align="left">{row.name ? row.name : '-'}</TableCell>
-              size="small"
+          <TableCell align="left">{row.version ? row.version : '-'}</TableCell>
-              onClick={() => setOpen(!open)}
+          <TableCell align="left">
-            >
+              {row.active === 1 ? (
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+              <Label color='success' >
-            </IconButton>
+                  Active
+              </Label>
+              ) : ( 
+              <Label color='error'>
+                  Inactive
+              </Label>
+              )}
+              </TableCell>
+          <TableCell align="left">
+              <TableMoreMenu actions={
+              <>
+                  <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                  </MenuItem>
+                  {/* <MenuItem onClick={() => handleEditData(row)}>
+                  <EditOutlinedIcon />
+                  Edit
+                  </MenuItem> */}
+                  <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                  </MenuItem>
+                  {/* <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
+                  <HistoryIcon />
+                  History
+                  </MenuItem> */}
+              </>
+              }
+              />
           </TableCell>
-          <TableCell align="left">{row.type}</TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.version}</TableCell>
-
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
           </TableRow>
           {/* COLLAPSIBLE ROW */}
-        <TableRow>
+          <TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+          <TableCell colSpan={6}>
               <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
+              <Card sx={{padding:2}}>
-                <Typography variant="body2" gutterBottom component="div">
+                  <Box sx={{ pb: 2 }}>
-                  Description : {row.description}
+                  <Typography variant='subtitle1'>Detail</Typography>
-                </Typography>
+                  <Stack marginTop={2}>
+                      <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Code:</Typography>
+                      <Typography variant='body2' sx={{width: '70%'}}>{row.code ? row.code : '-'}</Typography>
+                      </Stack>
+                      <Stack direction='row' spacing={1}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Name:</Typography>
+                      <Typography variant='body2' sx={{width: '70%'}}>{row.name ? row.name : '-'}</Typography>
+                      </Stack>
+                  </Stack>
                   </Box>
+              </Card>
               </Collapse>
           </TableCell>
           </TableRow>
@@ -210,101 +353,227 @@ export default function List() {
   }
 
   // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
-  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
       current_page: 1,
       data: [],
-    path: "",
+      path: '',
-    first_page_url: "",
+      first_page_url: '',
       last_page: 1,
-    last_page_url: "",
+      last_page_url: '',
-    next_page_url: "",
+      next_page_url: '',
-    prev_page_url: "",
+      prev_page_url: '',
       per_page: 10,
       from: 0,
       to: 0,
-    total: 0
+      total: 0,
   });
-  const [dataTablePage, setDataTablePage] = useState(5);
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
       setDataTableLoading(true);
       const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+      // Get Data Drugs
       const response = await axios.get('/master/drugs', { params: filter });
-    // console.log(response.data);
       setDataTableLoading(false);
-
       setDataTableData(response.data);
-  }
-
-  const headStyle = {
-    fontWeight: 'bold',
   };
 
-  const applyFilter = async (searchFilter: string) => {
+  const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+      await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+      setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+      const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
       loadDataTableData(filter);
       setSearchParams(filter);
-  }
+  };
 
   useEffect(() => {
       loadDataTableData();
-  }, [])
+  }, []);
+
+  //validation dialog
+  const [nameField, setNameField] = useState('');
+  const [codeField, setCodeField] = useState('');
+  // ID for edit data
+  const [idField, setIdField] = useState('');
+
+  const handleAddData = () => {
+      navigate('/corporates/'+corporate_id+'/hospitals/create');
+  }
+  //Edit data
+  const handleEditData = (data : any) => {
+      navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);  
+  }
+  // End dialog for hospitals
+
+  // Dialog for update status hospitals
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+  const [activeField, setActiveField] = useState(0);
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+
+  const handleCloseDialogUpdate = () => {
+      setOpenDialogStatus(false);
+      setNameField('');
+      setCodeField('');
+      setIdField('');
+      setActiveField(activeField);
+  }
+
+  const handleSaveUpdateData = () => {
+      let activeValue = 0;
+      if(activeField === 1)
+      {
+      activeValue = 0;
+      }
+      else
+      {
+      activeValue = 1;
+      }
+      const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idField,
+      };
+      axios
+      .put('/master/drugs/'+idField+'/activation', updateData)
+      .then((response) => {
+          enqueueSnackbar('Data updated successfully', { variant: 'success' });
+          loadDataTableData();
+          handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+          enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data: any) => {
+      setIdField(data.id);
+      setNameField(data.name);
+      setCodeField(data.code);
+      setActiveField(data.active);
+      setOpenDialogStatus(true);    
+  }
+  // End dialog for update status devisions
+
+
 
   return (
       <Stack>
           <ImportForm />
-
           <Card>
               {/* The Main Table */}
               <TableContainer component={Paper}>
               <Table aria-label="collapsible table">
+                  {/* Table Head */}
+                  <TableHead>
+                  <TableRow>
+                      <TableCell sx={{width: '10%'}} align="left">
+                      <Typography variant='subtitle2'>Type</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '20%'}} align="left">
+                      <Typography variant='subtitle2'>Code</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '30%'}} align="left">
+                      <Typography variant='subtitle2'>Name</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '20%'}} align="left">
+                          <Typography variant='subtitle2'>Version</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '10%'}} align="left">
+                          <Typography variant='subtitle2'>Status</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '10%'}} align="left">
+                      </TableCell>
+                  </TableRow>
+                  </TableHead>
+                  {/* Condition Table Body */}
+                  {dataTableIsLoading ? (
                   <TableBody>
                       <TableRow>
-                <TableCell style={headStyle} align="left" />
+                      <TableCell colSpan={6} align="center">
-                <TableCell style={headStyle} align="left">Type</TableCell>
+                          Loading
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                      </TableCell>
-                <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="left">Version</TableCell>
-                <TableCell style={headStyle} align="right">Status</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
                       </TableRow>
                   </TableBody>
-            {dataTableIsLoading ?
+                  ) : dataTableData.data.length == 0 ? (
-              (
                   <TableBody>
                       <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                      <TableCell colSpan={6} align="center">
-                  </TableRow>
+                          No Data
-                </TableBody>
+                      </TableCell>
-              ) : (
-                dataTableData.data.length == 0 ? 
-                (
-                  <TableBody>
-                    <TableRow>
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
                       </TableRow>
                   </TableBody>
                   ) : (
                   <TableBody>
-                    {dataTableData.data.map(row => (
+                      {dataTableData.data.map((row) => (
                       <Row key={row.id} row={row} />
                       ))}
                   </TableBody>
-                )
                   )}
               </Table>
               </TableContainer>
-        
+              {/* Paginations */}
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+              <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+          </Card>
+          {/* Dialog Update Status */}
+          <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
+              <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+              <Stack direction="row" alignItems="center" justifyContent="space-between">
+                  <Stack direction="row" alignItems='center' spacing={1}>
+                      <Typography variant="h6">Update Status</Typography>
+                  </Stack>
+                  <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                      <CloseIcon />
+                  </IconButton>
+              </Stack>
+              </DialogTitle>
+              <DialogContent>
+              <Stack spacing={2} padding={2}>
+                  <Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this drug ?</Typography>
+                  <Card sx={{padding:2}}  >
+                  <Stack direction='row' spacing={2}>
+                      <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
+                      <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
+                  </Stack>
+                  <Stack direction='row' spacing={2}>
+                      <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
+                      <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+                  </Stack>
                   </Card>
               </Stack>
+              <Stack spacing={2} padding={2}>
+                  <Typography variant='subtitle1'>Reason for update*</Typography>
+                  <FormControl>
+                  <InputLabel htmlFor="reason" required>
+                      Reason for update
+                  </InputLabel>
+                  <Select
+                      id="reason"
+                      value={reasonUpdate}
+                      fullWidth
+                      label="Reason for update"
+                      onChange={(e) => {
+                      setReasonUpdate(e.target.value);
+                      }}
+                      
+                  >
+                      <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                      <MenuItem value="Endorsement">Endorsement</MenuItem>
+                      <MenuItem value="Renewal">Renewal</MenuItem>
+                      <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+                  </Select>
+                  <FormHelperText style={{ color: 'red' }}></FormHelperText>
+                  </FormControl>
+              </Stack>
+              </DialogContent>
+              <DialogActions>
+              <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+              <Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
+              </DialogActions>
+          </Dialog>
+
+      </Stack>
   );
-}
+  }