Update Devisions pada Prime Center

Modules/Internal/Http/Controllers/Api/DivisionController.php

@@ -19,6 +19,7 @@ class DivisionController extends Controller
         $benefits = CorporateDivision::query()
             ->filter($request->all())
             ->where('corporate_id', $corporate_id)
+            ->orderBy('id', 'DESC')
             ->paginate(0)
             ->appends($request->all());
 
@@ -52,6 +53,7 @@ class DivisionController extends Controller
             'corporate_id' => $corporate_id,
             'code' => $request->code,
             'name' => $request->name,
+            'description' => $request->description ? $request->description : null,
         ]);
 
         return $newCorporatePlan;
@@ -91,8 +93,6 @@ class DivisionController extends Controller
         $request->validate([
             'code' => [
                 'required',
-                // Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporatePlan->id)
-                // Rule::unique('corporate_divisions')->where('corporate_id', $corporate_id)
             ],
             'name' => 'required'
         ]);
@@ -100,7 +100,7 @@ class DivisionController extends Controller
         $corporatePlan->fill([
             'code' => $request->code,
             'name' => $request->name,
-            'active' => $request->active,
+            'description' => $request->description,
         ])->save();
 
         return $corporatePlan;

frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx

@@ -44,10 +44,10 @@ export default function CorporateTabNavigations({ position }: Props) {
       path: 'benefits',
       label: 'Benefit',
     },
-    {
-      path: 'divisions',
-      label: 'Division',
-    },
+    // {
+    //   path: 'divisions',
+    //   label: 'Division',
+    // },
     {
       path: 'members',
       label: 'Member List',

frontend/dashboard/src/pages/Corporates/Division/List.tsx

@@ -41,6 +41,14 @@ import axios from '../../../utils/axios';
 import { CorporatePlan } from '../../../@types/corporates';
 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';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
@@ -97,74 +105,33 @@ export default function PlanList() {
 
     return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.id}</TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.description}</TableCell>
-          <TableCell align="right">
-            <Button variant="outlined" color="success" size="small">
-              Active
-            </Button>
-          </TableCell>
-          <TableCell align="right">
-            <Link to={`/corporate/${row.corporate_id}/divisions/${row.id}/edit`}>
-              <Button variant="outlined" color="success" size="small">
-                Edit
-              </Button>
-            </Link>
-          </TableCell>
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  No Extra Data
-                </Typography>
-              </Box>
-              {false && (
-                <Box sx={{ margin: 1 }}>
-                  <Typography variant="h6" gutterBottom component="div">
-                    Rules
-                  </Typography>
-                  <Table size="small" aria-label="purchases">
-                    <TableHead>
-                      <TableRow>
-                        <TableCell>Date</TableCell>
-                        <TableCell>Customer</TableCell>
-                        <TableCell align="right">Amount</TableCell>
-                        <TableCell align="right">Total price ($)</TableCell>
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">
-                          {row.start} - {row.end}
-                        </TableCell>
-                        <TableCell>{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell align="right">{row.start}</TableCell>
-                      </TableRow>
-                      {/* ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    } */}
-                    </TableBody>
-                  </Table>
-                </Box>
-              )}
-            </Collapse>
+          <TableCell align="center">{row.id ? row.id : '-'}</TableCell>
+          <TableCell align="left">{row.code ? row.code : '-'}</TableCell>
+          <TableCell align="left">{row.name ? row.name : '-'}</TableCell>
+          <TableCell align="left">{row.description ? row.description : '-'}</TableCell>
+          <TableCell align="left">
+          <TableMoreMenu actions={
+            <>
+              <MenuItem onClick={() => navigate ('')}>
+                <FindInPageOutlinedIcon />
+                Details
+              </MenuItem>
+              <MenuItem onClick={() => handleEditData(row)}>
+                <EditOutlinedIcon />
+                Edit
+              </MenuItem>
+              <MenuItem onClick={() => handleEditDataStatus(row)}>
+                <CachedOutlinedIcon />
+                Update Status
+              </MenuItem>
+              <MenuItem onClick={() => navigate ('')}>
+                <HistoryIcon />
+                History
+              </MenuItem>
+            </>
+            }
+          />
           </TableCell>
         </TableRow>
       </React.Fragment>
@@ -194,7 +161,6 @@ export default function PlanList() {
     const response = await axios.get('/corporates/' + corporate_id + '/divisions', {
       params: filter,
     });
-    // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
@@ -219,48 +185,147 @@ export default function PlanList() {
     loadDataTableData();
   }, []);
 
+  // Dialog for devisions
+  const [openDialog, setOpenDialog] = useState(false);
+  //validation dialog
+  const [nameField, setNameField] = useState('');
+  const [nameFieldError, setNameFieldError] = useState('');
+  const [codeField, setCodeField] = useState('');
+  const [codeFieldError, setCodeFieldError] = useState('');
+  const [descriptionField, setDescriptionField] = useState('');
+  // ID for edit data
+  const [idField, setIdField] = useState('');
+
+  const isRequiredFieldsFilled = () => {
+    return nameField.trim() !== '' && codeField.trim() !== '';
+  };
+
+  const handleAddData = () => {
+    setOpenDialog(true);
+  }
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+    setNameField('');
+    setCodeField('');
+    setDescriptionField('');
+    setIdField('');
+  }
+
+  const handleSaveData = () => {
+    const addData = {
+      code: codeField,
+      name: nameField,
+      description: descriptionField,
+    };
+    // Check conditions add or update data
+    if(idField)
+    {
+      // Update data
+      axios
+      .put('/corporates/'+corporate_id+'/divisions/'+idField+'', addData)
+      .then((response) => {
+        enqueueSnackbar('Data saved successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialog();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+    }
+    else{
+      // Save data
+      axios
+      .post('/corporates/'+corporate_id+'/divisions', addData)
+      .then((response) => {
+        enqueueSnackbar('Data saved successfully', { variant: 'success' });
+        loadDataTableData();
+        handleCloseDialog();
+      })
+      .catch((error) => {
+        enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+    }
+  }
+  //Edit data
+  const handleEditData = (data) => {
+    setIdField(data.id)
+    setNameField(data.name);
+    setCodeField(data.code);
+    setDescriptionField(data.description);
+    setOpenDialog(true);    
+  }
+  // End dialog for devisions
+
+  // Dialog for update status devisions
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
+  // Active for update status
+  const [activeField, setActiveField] = useState('');
+  const handleCloseDialogStatus = () => {
+    setOpenDialogStatus(false);
+    setNameField('');
+    setCodeField('');
+    setDescriptionField('');
+    setIdField('');
+    setActiveField('');
+  }
+
+  const handleSaveDataStatus = () => {
+    
+  }
+
+  const handleEditDataStatus = (data) => {
+    setIdField(data.id)
+    setNameField(data.name);
+    setCodeField(data.code);
+    setDescriptionField(data.description);
+    setActiveField(data.active);
+    setOpenDialogStatus(true);    
+  }
+  // End dialog for update status devisions
+
+  
+
   return (
     <Stack>
       <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
         <SearchInput onSearch={applyFilter} />
-        <Link to={`/corporate/${corporate_id}/divisions/create`}>
-          <Button
-            component="button"
-            id="upload-button"
-            variant="outlined"
-            startIcon={<AddIcon />}
-            sx={{ p: 1.8 }}
-          >
-            Create
-          </Button>
-        </Link>
+        <Button
+          component="button"
+          id="upload-button"
+          startIcon={<AddIcon />}
+          sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
+          onClick={handleAddData}
+        >
+          Create
+        </Button>
       </Stack>
-
       <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
-                <TableCell style={headStyle} align="left">
-                  ID
+                <TableCell sx={{width: '10%'}} align="center">
+                  <Typography variant='subtitle2'>ID</Typography>
                 </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Code
+                <TableCell sx={{width: '10%'}} align="left">
+                  <Typography variant='subtitle2'>Code</Typography>
                 </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Name
+                <TableCell sx={{width: '20%'}} align="left">
+                  <Typography variant='subtitle2'>Name</Typography>
                 </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Description
+                <TableCell sx={{width: '50%'}} align="left">
+                  <Typography variant='subtitle2'>Description</Typography>
+                </TableCell>
+                <TableCell sx={{width: '10%'}} align="left">
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>
-                  <TableCell colSpan={8} align="center">
+                  <TableCell colSpan={4} align="center">
                     Loading
                   </TableCell>
                 </TableRow>
@@ -268,7 +333,7 @@ export default function PlanList() {
             ) : dataTableData.data.length == 0 ? (
               <TableBody>
                 <TableRow>
-                  <TableCell colSpan={8} align="center">
+                  <TableCell colSpan={4} align="center">
                     No Data
                   </TableCell>
                 </TableRow>
@@ -284,6 +349,101 @@ export default function PlanList() {
         </TableContainer>
         <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
       </Card>
+      {/* Dialog */}
+      <Dialog open={openDialog} onClose={handleCloseDialog} 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}>
+                {idField ? (
+                  <>
+                    <Typography variant="h6">Edit Data</Typography>
+                  </>
+                ): (
+                  <>
+                    <Typography variant="h6">Create Data</Typography>
+                  </>
+                )}
+                
+              </Stack>
+              <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialog}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+        <Stack spacing={2} sx={{marginTop: 2}}>
+          <TextField
+            label="Code"
+            required
+            value={codeField ? codeField : ''}
+            onChange={(e) =>{
+              setCodeField(e.target.value);
+              setCodeFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
+            }}
+            fullWidth
+            inputProps={{ maxLength: 50 }}
+            error={!!codeFieldError}
+            helperText={codeFieldError}
+          />
+          <TextField
+            label="Name"
+            required
+            value={nameField ? nameField : ''}
+            onChange={(e) =>{
+              setNameField(e.target.value);
+              setNameFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
+            }}
+            fullWidth
+            inputProps={{ maxLength: 50 }}
+            error={!!nameFieldError}
+            helperText={nameFieldError}
+          />
+          <TextField
+            label="Description"
+            value={descriptionField ? descriptionField : ''}
+            onChange={(e) =>{
+              setDescriptionField(e.target.value);
+            }}
+            fullWidth
+            inputProps={{ maxLength: 255 }}
+          />
+        </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Cancel</Button>
+          <Button onClick={handleSaveData} variant="contained" color="primary" disabled={!isRequiredFieldsFilled()}>Save</Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Dialog Update Status */}
+      <Dialog open={openDialogStatus} onClose={handleCloseDialogStatus} 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={handleCloseDialogStatus}>
+                <CloseIcon />
+              </IconButton>
+          </Stack>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} padding={2}>
+            <Typography variant='body1'>Are you sure to inactive this division ?</Typography>
+            <Card>
+              <Stack direction='row' spacing={2}>
+                <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
+                <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+              </Stack>
+            </Card>
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialogStatus}>Cancel</Button>
+          <Button onClick={handleSaveDataStatus} variant="contained" color="error">Inactive</Button>
+        </DialogActions>
+      </Dialog>
+
     </Stack>
   );
 }