progress - membuat update activate

frontend/dashboard/.env.development

@@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false
 
 PORT=8083
 
-REACT_APP_HOST_API_URL="http://lms.test"
+REACT_APP_HOST_API_URL="https://aso-api.linksehat.dev/api/internal"
 
-VITE_API_URL="http://127.0.0.1:8000/api/internal"
+VITE_API_URL="https://aso-api.linksehat.dev/api/internal"

frontend/dashboard/src/components/Label.tsx

@@ -0,0 +1,98 @@
+// @mui
+import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
+import { BoxProps } from '@mui/material';
+// theme
+import { ColorSchema } from '../theme/palette';
+
+// ----------------------------------------------------------------------
+
+type LabelColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+
+type LabelVariant = 'filled' | 'outlined' | 'ghost';
+
+const RootStyle = styled('span')(
+  ({
+    theme,
+    ownerState,
+  }: {
+    theme: Theme;
+    ownerState: {
+      color: LabelColor;
+      variant: LabelVariant;
+    };
+  }) => {
+    const isLight = theme.palette.mode === 'light';
+    const { color, variant } = ownerState;
+
+    const styleFilled = (color: ColorSchema) => ({
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+    });
+
+    const styleOutlined = (color: ColorSchema) => ({
+      color: theme.palette[color].main,
+      backgroundColor: 'transparent',
+      border: `1px solid ${theme.palette[color].main}`,
+    });
+
+    const styleGhost = (color: ColorSchema) => ({
+      color: theme.palette[color][isLight ? 'dark' : 'light'],
+      backgroundColor: alpha(theme.palette[color].main, 0.16),
+    });
+
+    return {
+      height: 22,
+      minWidth: 22,
+      lineHeight: 0,
+      borderRadius: 6,
+      // cursor: 'default',
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      padding: theme.spacing(0, 1),
+      color: theme.palette.grey[800],
+      fontSize: theme.typography.pxToRem(12),
+      fontFamily: theme.typography.fontFamily,
+      backgroundColor: theme.palette.grey[300],
+      fontWeight: theme.typography.fontWeightBold,
+
+      ...(color !== 'default'
+        ? {
+            ...(variant === 'filled' && { ...styleFilled(color) }),
+            ...(variant === 'outlined' && { ...styleOutlined(color) }),
+            ...(variant === 'ghost' && { ...styleGhost(color) }),
+          }
+        : {
+            ...(variant === 'outlined' && {
+              backgroundColor: 'transparent',
+              color: theme.palette.text.primary,
+              border: `1px solid ${theme.palette.grey[500_32]}`,
+            }),
+            ...(variant === 'ghost' && {
+              color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
+              backgroundColor: theme.palette.grey[500_16],
+            }),
+          }),
+    };
+  }
+);
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  color?: LabelColor;
+  variant?: LabelVariant;
+}
+
+export default function Label({ color = 'default', variant = 'ghost', children, sx }: Props) {
+  const theme = useTheme();
+
+  return (
+    <RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
+      {children}
+    </RootStyle>
+  );
+}
+
+

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

@@ -38,13 +38,13 @@ import {
 } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
+import GetApp from '@mui/icons-material/GetApp';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams, useNavigate } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
@@ -54,6 +54,11 @@ import { enqueueSnackbar } from 'notistack';
 import { Icon } from '@iconify/react';
 import { LoadingButton } from '@mui/lab';
 import HistoryIcon from '@mui/icons-material/History';
+import CachedIcon from '@mui/icons-material/Cached';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import Label from '@/components/Label';
+import { display } from '@mui/system';
 
 export default function List(props: any) {
   const { themeStretch } = useSettings();
@@ -82,7 +87,7 @@ export default function List(props: any) {
     }, [searchParams]);
 
     return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
         <TextField
           id="search-input"
           ref={searchInput}
@@ -146,7 +151,7 @@ export default function List(props: any) {
             handleCancelImportButton();
             loadDataTableData();
             setImportResult(response.data);
-            
+
             setImportLoading(false);
             // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
           })
@@ -156,14 +161,14 @@ export default function List(props: any) {
                 response.message,
               { variant: 'error' }
             );
-            
+
             setImportLoading(false);
           })
       } else {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
       }
     };
-    
+
     const handleGetTemplate = (type :string) => {
       axios.get('corporates/import-document-example/' + type)
         .then((response) => {
@@ -191,17 +196,19 @@ export default function List(props: any) {
             <SearchInput onSearch={applyFilter} />
             {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
             <Button
-              id="import-button"
-              variant="outlined"
-              startIcon={<AddIcon />}
-              sx={{ p: 1.8 }}
-              aria-controls={createMenu ? 'basic-menu' : undefined}
-              aria-haspopup="true"
-              aria-expanded={createMenu ? 'true' : undefined}
-              onClick={handleClick}
+            id="import-button"
+            variant="contained"
+            startIcon={<GetApp />}
+            sx={{ p: 1.8,width: '200px' }}
+            aria-controls={createMenu ? 'basic-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={createMenu ? 'true' : undefined}
+            onClick={handleClick}
+            color='primary'
             >
-              Import
+            Import
             </Button>
+
             <Menu
               id="import-button"
               anchorEl={anchorEl}
@@ -462,80 +469,171 @@ export default function List(props: any) {
 
     console.log('exclusions', exclusions);
 
+    const handleActivate = (row: any) => {
+      axios
+        .put(`/corporates/diagnosis-exclusions/update_activation`, {
+            id: row.id,
+            active: row.active == 1 ? 0 : 1,
+        })
+        .then((res) => {
+        //   setDataTableData({
+        //     ...dataTableData,
+        //     data: dataTableData.data.map((model) => {
+        //       let updatedModel = model;
+        //       if (row.id == model.id) {
+        //         updatedModel.active = res.data.corporate.active;
+        //       }
+        //       return updatedModel;
+        //     }),
+        //   });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
     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.service_code}</TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</TableCell>
-          <TableCell align="left">{row.active ? 'Active' : 'Inactive'}</TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}/>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
+                {row.service_code}
+            </TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
+                {row.code}
+            </TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
+                {row.name}
+            </TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
+                {Object.keys(row.rules).length ? 'With Rules' : 'All'}
+            </TableCell>
+            <TableCell align="left" onClick={() => {if(open==true) setOpen(!open)}}>
+                {row.active == 1 && (
+                <Label
+                    variant="outlined"
+                    color="success"
+                    size="small"
+                >
+                    Active
+                </Label>
+                )}
+                {row.active != 1 && (
+                <Label
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                >
+                    Inactive
+                </Label>
+                )}
+            </TableCell>
 
-          <TableCell align="center">
-          <Stack direction={'row'} spacing={1} sx={{ mb: 1 }}>
-          {openEdit ? (
-              <Button
-                variant="contained"
-                color="success"
-                size="small"
-                sx={{
-                  color: '#fff',
-                }}
-                onClick={(event) => {
-                  setOpenEdit(!openEdit);
-                  if (open == false) {
-                    setOpen(true);
-                  }
-                  handleConfigExclusion(event, row, '', 'one_row');
-                }}
-              >
-                Save
-              </Button>
-            ) : (
-              <Button
-                variant="outlined"
-                color="success"
-                size="small"
-                onClick={() => {
-                  setOpenEdit(true);
-                  setOpen(true);
-                }}
-              >
-                Edit
-              </Button>
-            )}
-            {/* <Button
-              variant="outlined"
-              color="error"
-              size="small"
-              sx={{ ml: 2 }}
-              onClick={() => {
-                setOpenDelete(true);
-              }}
-            >
-              Delete
-            </Button> */}
-             {/* <Link to={`/corporate/${corporate_id}/diagnosis-exclusions/${row.id}/history`}>
-                <HistoryIcon />
-              </Link> */}
-          </Stack>
-            
+          <TableCell align="left">
+            <TableMoreMenu actions={
+                <>
+                    <MenuItem onClick={() => setOpen(!open)}>
+                        <FindInPageOutlined />
+                        Detail
+                    </MenuItem>
+                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/history`)} >
+                        <EditOutlined />
+                        Edit
+                    </MenuItem>
+                    <MenuItem onClick={() => handleActivate(row)}>
+                        <CachedIcon />
+                        Update Status
+                    </MenuItem>
+                </>
+            } />
           </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              {open == true ? (
+                {open == true ? (
+                    <Box sx={{ padding: '24px' }}>
+                        <Card sx={{ padding: '24px' }}>
+                            <Grid container spacing={6}>
+                                <Grid item xs={8}>
+                                    <Typography variant="body1" sx={{ fontWeight: 'bold'}}>
+                                        Excluded Only for :
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Grid container spacing={2}>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                MSC :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            {row?.rules?.msc && row?.rules?.msc[0] ? (
+                                                row?.rules?.msc[0].split(',').map((text,i) => {
+                                                    return (
+                                                        <Typography key={i} component="div">
+                                                            <Label>{text}</Label>
+                                                        </Typography>
+                                                    )
+                                                })
+                                            ) : '-'}
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Gender :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            {row?.rules?.gender && row?.rules?.gender[0] ? (
+                                                <Typography component="div">
+                                                    <Label>{row?.rules?.gender[0]}</Label>
+                                                </Typography>
+                                            ) : '-'}
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Min Age :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.min_age && row?.rules?.min_age[0] ? row?.rules?.min_age[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Max Age :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.max_age && row?.rules?.max_age[0] ? row?.rules?.max_age[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={3}>
+                                            <Typography variant="body1" component="div" color={'GrayText'}>
+                                                Play :
+                                            </Typography>
+                                        </Grid>
+                                        <Grid item xs={9} sx={{display: 'flex', gap: 1}}>
+                                            <Typography component="div">
+                                                {row?.rules?.plan && row?.rules?.plan[0] ? row?.rules?.plan[0] : '-'}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Card>
+                    </Box>
+                ) : null }
+              {/* {open == true ? (
                 openEdit == false ? (
                   <Box sx={{ borderBottom: 1 }}>
-                    {Object.keys(row.rules).length ? (
-                      <div>
+                    <div>
                         <Typography variant="body" sx={{ fontWeight: 'bold' }}>
                           Excluded Only for :
                         </Typography>
@@ -560,12 +658,7 @@ export default function List(props: any) {
                             Plan : {row.rules.plan.join(', ') ?? '-'}
                           </Typography>
                         )}
-                      </div>
-                    ) : (
-                      <Typography variant="body2" gutterBottom component="div">
-                        Excluded for All
-                      </Typography>
-                    )}
+                    </div>
                   </Box>
                 ) : (
                   // <CollapseEdit row={row} index={index} plans={plans} />
@@ -752,7 +845,7 @@ export default function List(props: any) {
                     </Stack>
                   </Box>
                 )
-              ) : null}
+              ) : null} */}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -866,6 +959,8 @@ export default function List(props: any) {
     loadDataTableData();
   }, []);
 
+  const navigate = useNavigate()
+
   return (
     <Stack>
       <ImportForm />
@@ -874,9 +969,9 @@ export default function List(props: any) {
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableBody>
+            <TableHead>
               <TableRow>
-                <TableCell style={headStyle} align="left" />
+                <TableCell align="left" width={50} />
                 <TableCell style={headStyle} align="left">
                   Service
                 </TableCell>
@@ -893,15 +988,17 @@ export default function List(props: any) {
                   Status
                 </TableCell>
                 <TableCell style={headStyle} align="left">
-                  Action
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  <Link to={`/corporate/${corporate_id}/diagnosis-exclusions/history`}>
-                    <HistoryIcon />
-                  </Link>
+                    <TableMoreMenu actions={
+                        <>
+                            <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
                 </TableCell>
               </TableRow>
-            </TableBody>
+            </TableHead>
             {dataTableIsLoading ? (
               <TableBody>
                 <TableRow>

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

@@ -258,7 +258,7 @@ export default function Corporates() {
               Import
             </Button> */}
           <Link to={'/corporates/create'}>
-            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}> 
+            <Button variant="contained" startIcon={<AddIcon sx={{}} />} sx={{ p: 1.8, typography: 'subtitle2', backgroundColor: '#19BBBB'  }}>
               New Corporate
             </Button>
           </Link>

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

@@ -38,7 +38,7 @@ export default function Corporates() {
 
   const headStyle = {
     fontWeight: 'bold',
-  }; 
+  };
   // Upload Docs
   const fileDocsInput = useRef<HTMLInputElement>(null);
   const [fileDocs, setFileDocs] = useState([]);
@@ -109,7 +109,7 @@ export default function Corporates() {
     }
     axios
     .post('/update-status-files-doc', {status_download : statusDownload, corporate_id :  corporate_id})
-    .then((response) => {      
+    .then((response) => {
       enqueueSnackbar(response.data.message,  { variant: 'success' });
     })
     .catch((error) => {
@@ -138,7 +138,7 @@ export default function Corporates() {
           },
         ]}
       />
-      
+
       {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
         <Card>
           <Stack spacing="2">
@@ -204,7 +204,7 @@ export default function Corporates() {
                           accept="application/pdf"
                           multiple
                         />
-                        
+
                           <Button
                             variant="outlined"
                             onClick={() => {

frontend/dashboard/src/routes/index.tsx

@@ -256,7 +256,7 @@ export default function Router() {
           path: 'master/diagnosis-template/:id/edit',
           element: <MasterDiagnosisTemplateCreate />,
         },
-        
+
         {
           path: 'master/diagnosis/:diagnosis_template_id',
           element: <MasterDiagnosis />,
@@ -515,4 +515,4 @@ const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
 const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));
 
 
-const Membership = Loadable(lazy(() => import('../pages/Service/Membership/index')));
+const Membership = Loadable(lazy(() => import('../pages/Service/Membership/index')));

frontend/dashboard/src/theme/palette.ts

@@ -62,7 +62,7 @@ declare module '@mui/material' {
 
 // SETUP COLORS
 const PRIMARY = {
-  lighter: '#C8FACD',
+  lighter: '#19BBBB', // #19BBBB
   light: '#5BE584',
   main: '#00AB55',
   dark: '#007B55',