finishing UI adjustment - 1

2023-10-26 10:17:17 +07:00
parent 0abcaea006
commit 995f1f76f8
9 changed files with 207 additions and 179 deletions
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -90,6 +90,13 @@ const navConfig = [

        ],
      },
+      {
+        title: 'MASTER',
+        children: [
+          { title: 'Diagnosis', path: '/master/diagnosis' },
+
+        ],
+      },
      {
        title: 'USER MANAGEMENT',
        path: '/users',
--- a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
@@ -283,8 +283,8 @@ export default function List(props: any) {
    id: number;
    status: number;
    code: string,
-    name: string, 
-    rules: string,            
+    name: string,
+    rules: string,
  };
  const plans = props?.data.map((plan: any) => {
    return {
@@ -576,32 +576,32 @@ export default function List(props: any) {
                )}
            </TableCell>

-          <TableCell align="left">
-            <TableMoreMenu actions={
-                <>
-                    <MenuItem onClick={() => setOpen(!open)}>
-                        <FindInPageOutlined />
-                        Detail
-                    </MenuItem>
-                    <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
-                        <EditOutlined />
-                        Edit
-                    </MenuItem>
-                    <MenuItem onClick={() => handleActivate(true, { 
-                        code: row.code,
-                        name: row.name, 
-                        rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
-                        id:row.id, 
-                        status: row.active,
-                        service: row.service_code
-                        }) 
-                      } >
-                        <CachedIcon />
-                        Update Status
-                    </MenuItem>
-                </>
-            } />
-          </TableCell>
+            <TableCell align="left">
+                <TableMoreMenu actions={
+                    <>
+                        <MenuItem onClick={() => setOpen(!open)}>
+                            <FindInPageOutlined />
+                            Detail
+                        </MenuItem>
+                        <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/diagnosis-exclusions/${row.id}/edit`)} >
+                            <EditOutlined />
+                            Edit
+                        </MenuItem>
+                        <MenuItem onClick={() => handleActivate(true, {
+                            code: row.code,
+                            name: row.name,
+                            rules: Object.keys(row.rules).length ? 'With Rules' : 'All',
+                            id:row.id,
+                            status: row.active,
+                            service: row.service_code
+                            })
+                        } >
+                            <CachedIcon />
+                            Update Status
+                        </MenuItem>
+                    </>
+                } />
+            </TableCell>
        </TableRow>
        {/* COLLAPSIBLE ROW */}
        <TableRow>
@@ -801,7 +801,7 @@ export default function List(props: any) {

  const onSubmit = async (row : any) => {
    try {
-      handleUpdate(dataValue.status, dataValue.id, row.reason) 
+      handleUpdate(dataValue.status, dataValue.id, row.reason)
    } catch (error: any) {
      console.log('data gagal');
    }
@@ -836,7 +836,7 @@ export default function List(props: any) {
    resolver: yupResolver(NewCorporateSchema),
  });

-  
+
  const {
      reset,
      handleSubmit,
@@ -924,7 +924,7 @@ export default function List(props: any) {
                Cancel
            </Button>

-            {dataValue?.status == 1?  
+            {dataValue?.status == 1?
              <LoadingButton
                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
                type="submit"
@@ -936,7 +936,7 @@ export default function List(props: any) {
              >
              Inactive
            </LoadingButton>
-            : 
+            :
            <LoadingButton
              sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)'}}
              type="submit"
@@ -948,12 +948,12 @@ export default function List(props: any) {
            >
            Active
          </LoadingButton>
-          
-            
+
+
            }
            </Stack>
        </Stack>
-        
+
        </FormProvider>
    </>
  );
@@ -1031,9 +1031,9 @@ export default function List(props: any) {
        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
      </Card>

-      <DialogUpdateStatus 
+      <DialogUpdateStatus
        openDialog={isDialogOpen}
-        setOpenDialog={setDialogOpen} 
+        setOpenDialog={setDialogOpen}
        title={titles}
        data={dataValue}
        description={dataDescription}
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Index.tsx
@@ -16,27 +16,26 @@ export default function Divisions() {
  return (
    <Page title={ pageTitle }>

-      <HeaderBreadcrumbs
-        heading={ pageTitle }
-        links={[
-          {
-            name: 'Master',
-            href: '/master/diagnosis-template',
-          },
-          {
-            name: 'Diagnosis Template',
-            href: '/master/diagnosis-template',
-          },
-          {
-            name: 'Diagnosis',
-            href: '/master/diagnosis-template',
-          },
-        ]}
-      />
-      
-      <Card>
+        <HeaderBreadcrumbs
+            heading={ pageTitle }
+            sx={{ px: 2 }}
+            links={[
+            {
+                name: 'Master',
+                href: '/master/diagnosis',
+            },
+            {
+                name: 'Diagnosis',
+                href: '/master/diagnosis',
+            },
+            {
+                name: 'Diagnosis',
+                href: '/master/diagnosis',
+            },
+            ]}
+        />
+
        <List />
-      </Card>
    </Page>
  );
 }
--- a/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,15 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import { Icd } from '../../../@types/diagnosis';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';

 export default function List() {
-  const { themeStretch } = useSettings();
-  const { diagnosis_template_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-  
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { diagnosis_template_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
  function SearchInput(props: any) {
     // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +46,7 @@ export default function List() {
    }, [searchParams])

    return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
      </form>
    );
@@ -55,7 +57,7 @@ export default function List() {
    // Create Button Menu
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
    const [currentImportFileName, setCurrentImportFileName] = useState(null)

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -135,8 +137,8 @@ export default function List() {
          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" />
@@ -145,8 +147,8 @@ export default function List() {
          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
          <Button
              id="import-button"
-              variant='outlined'
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+              variant='contained'
+              startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
              aria-controls={createMenu ? 'basic-menu' : undefined}
              aria-haspopup="true"
              aria-expanded={createMenu ? 'true' : undefined}
@@ -186,7 +188,7 @@ export default function List() {
          </Button>
        </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>
        </Stack>
@@ -220,7 +222,7 @@ export default function List() {
              let updatedModel = model;
              if (row.id == model.id) {
                updatedModel.active = res.data.icd.active;
-              } 
+              }
              return updatedModel;
            }),
          });
@@ -240,15 +242,22 @@ export default function List() {

    return (
      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="right">
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
-            <Link to={`/master/diagnosis/${row.id}/diagnosis-history`}>
-                <HistoryIcon />
-              </Link>
-          </TableCell>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.code}</TableCell>
+            <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="right">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}/diagnosis-history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
        </TableRow>
      </React.Fragment>
    );
@@ -301,22 +310,29 @@ export default function List() {
  useEffect(() => {
    loadDataTableData();
  }, [])
-  
+
  return (
    <Stack>
      <ImportForm />

-        <Card>
        {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
          <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
              <TableRow>
+                <TableCell align="left" />
                <TableCell style={headStyle} align="left">Code</TableCell>
                <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
              </TableRow>
-            </TableBody>
+            </TableHead>
            {dataTableIsLoading ?
              (
                <TableBody>
@@ -325,7 +341,7 @@ export default function List() {
                  </TableRow>
                </TableBody>
              ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                (
                  <TableBody>
                    <TableRow>
@@ -342,9 +358,8 @@ export default function List() {
            )}
          </Table>
        </TableContainer>
-        
+
        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
    </Stack>
  );
 }
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/CreateUpdate.tsx
@@ -24,8 +24,8 @@ export default function PlanCreate() {
  }, [configuredCorporateContext])

  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
-  
-  
+
+
  const navigate = useNavigate();

  const isEdit = !!id;
@@ -48,6 +48,7 @@ export default function PlanCreate() {
  return (
    <Page title= "Master ICD - 10">
      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
        heading={'Master ICD - 10'}
        links={[
          {
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Form.tsx
@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { LoadingButton } from "@mui/lab";
-import { Card, Grid, Stack, Typography } from "@mui/material";
+import { Box, Card, Grid, Stack, Typography } from "@mui/material";
 import { CorporatePlan } from "../../../../@types/corporates";
 import { FormProvider, RHFSwitch, RHFTextField } from "../../../../components/hook-form";
 import { useEffect, useMemo } from 'react';
@@ -9,6 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useSnackbar } from 'notistack';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from '../../../../utils/axios';
+import palette from '@/theme/palette';

 type Props = {
  isEdit: boolean;
@@ -68,11 +69,11 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
        enqueueSnackbar('Division created successfully', { variant: 'success' });
      })
      .then((res) => {
-        navigate('/master/diagnosis-template',  { replace: true });
+        navigate('/master/diagnosis',  { replace: true });
      })
      .catch(({ response }) => {
        if (response.status === 422) {
-          for (const [key, value] of Object.entries(response.data.errors)) { 
+          for (const [key, value] of Object.entries(response.data.errors)) {
            setError(key, { message: value[0] });
            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
          }
@@ -88,7 +89,7 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop
          enqueueSnackbar('Division updated successfully', { variant: 'success' });
        })
        .then((res) => {
-          navigate('/master/diagnosis-template' ,  { replace: true });
+          navigate('/master/diagnosis' ,  { replace: true });
        })
        .catch(({ response }) => {
          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
@@ -98,31 +99,27 @@ export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Prop

  return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-        <Grid container spacing={2}>
-          <Grid item xs={8}>
-            <Card sx={{ p: 2 }}>
-                <Stack spacing={3}>
+        <Box sx={{ px: 2 }}>
+            <Grid container spacing={2}>
+                <Grid item xs={8}>
+                    <Card sx={{ px: 3, py: 4 }}>
+                        <Stack spacing={6}>

-                  <Typography variant="h6">Detail</Typography>
+                        <Typography variant="h6" color={palette.light.primary.main}>Detail</Typography>


-                  <RHFTextField name="name" label="Name" />
-                  <RHFTextField name="description" label="Description" />
+                        <RHFTextField name="name" label="Name" />
+                        <RHFTextField name="description" label="Description" />

-                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-                    { isEdit? 'Update' : 'Create' } 
-                  </LoadingButton>
+                        <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                            { isEdit? 'Update' : 'Create' }
+                        </LoadingButton>

-                </Stack>
-            </Card>
-          </Grid>
-          {/* <Grid item xs={4}>
-            <Card sx={{ p:2 }}>
-
-            <RHFSwitch name="active" label="Active" />
-              </Card>
-          </Grid> */}
-        </Grid>
+                        </Stack>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Box>
      </FormProvider>
  );
 }
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/Index.tsx
@@ -12,27 +12,26 @@ export default function Divisions() {

  const { corporate_id } = useParams();

-  const pageTitle = 'Diagnosis Template';
+  const pageTitle = 'Diagnosis';
  return (
    <Page title={ pageTitle }>

      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
        heading={ pageTitle }
        links={[
          {
            name: 'Master',
-            href: '/master/diagnosis-template',
+            href: '/master/diagnosis',
          },
          {
-            name: 'Diagnosis Template',
-            href: '/master/diagnosis-template',
+            name: 'Diagnosis',
+            href: '/master/diagnosis',
          },
        ]}
      />
-      
-      <Card>
+
        <List />
-      </Card>
    </Page>
  );
 }
--- a/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Diagnosis/Master/List.tsx
@@ -7,7 +7,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 // hooks
-import { Link, NavLink as RouterLink } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
 import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../../hooks/useSettings';
 import { useParams, useSearchParams } from 'react-router-dom';
@@ -17,13 +17,16 @@ import { LaravelPaginatedData } from '../../../../@types/paginated-data';
 import { Icd } from '../../../../@types/diagnosis';
 import BasePagination from '../../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { EditOutlined, FindInPageOutlined } from '@mui/icons-material';

 export default function List() {
-  const { themeStretch } = useSettings();
-  const { corporate_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-  
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { corporate_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
  function SearchInput(props: any) {
     // SEARCH
    const searchInput = useRef<HTMLInputElement>(null);
@@ -44,7 +47,7 @@ export default function List() {
    }, [searchParams])

    return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
      </form>
    );
@@ -55,7 +58,7 @@ export default function List() {
    // Create Button Menu
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null) 
+    const importForm = useRef<HTMLInputElement>(null)
    const [currentImportFileName, setCurrentImportFileName] = useState(null)

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -130,8 +133,8 @@ export default function List() {
        })
    }

-    
-    
+
+
    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" />
@@ -139,17 +142,15 @@ export default function List() {
          <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}
-              
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/master/diagnosis/create`)}
            >
-               <Link to={`/master/diagnosis-template/create`} style={{ textDecoration: 'none', color: 'blue'}}>
-                    Create
-                </Link>
+                Create
            </Button>
            <Menu
              id="import-button"
@@ -161,7 +162,7 @@ export default function List() {
              }}
            >
              <MenuItem>
-               
+
              </MenuItem>
            </Menu>
        </Stack>
@@ -195,7 +196,7 @@ export default function List() {
              let updatedModel = model;
              if (row.id == model.id) {
                updatedModel.active = res.data.icd.active;
-              } 
+              }
              return updatedModel;
            }),
          });
@@ -211,27 +212,30 @@ export default function List() {

    return (
      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.description ?? '-'}</TableCell>
-          <TableCell align="center">
-            {/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
-            <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={`/master/diagnosis/${row.id}`}>
-                <Button variant="outlined" color="primary" size="small">
-                  Detail
-                </Button>
-              </Link>
-              <Link to={`/master/diagnosis-template/${row.id}/edit`}>
-                <Button variant="outlined" color="primary" size="small">
-                  Edit
-                </Button>
-              </Link>
-              <Link to={`/master/diagnosis-template/${row.id}/diagnosis-template-history`}>
-                <HistoryIcon />
-              </Link>
-            </Stack>
-          </TableCell>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.name}</TableCell>
+            <TableCell align="left">{row.description ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            <MenuItem onClick={() => navigate(`/master/diagnosis-template/${row.id}/diagnosis-template-history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
        </TableRow>
      </React.Fragment>
    );
@@ -285,22 +289,29 @@ export default function List() {
  useEffect(() => {
    loadDataTableData();
  }, [])
-  
+
  return (
    <Stack>
-      <ImportForm />
+        <ImportForm />

-        <Card>
        {/* The Main Table */}
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
          <Table aria-label="collapsible table">
-            <TableBody>
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
              <TableRow>
+                <TableCell align="left" />
                <TableCell style={headStyle} align="left">Name</TableCell>
                <TableCell style={headStyle} align="left">Description</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
              </TableRow>
-            </TableBody>
+            </TableHead>
            {dataTableIsLoading ?
              (
                <TableBody>
@@ -309,7 +320,7 @@ export default function List() {
                  </TableRow>
                </TableBody>
              ) : (
-                dataTableData.data.length == 0 ? 
+                dataTableData.data.length == 0 ?
                (
                  <TableBody>
                    <TableRow>
@@ -326,9 +337,8 @@ export default function List() {
            )}
          </Table>
        </TableContainer>
-        
+
        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
-        </Card>
    </Stack>
  );
 }
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -268,12 +268,12 @@ export default function Router() {
          element: <MasterHospitalsCreate />,
        },
        {
-          path: 'master/diagnosis-template/create',
-          element: <MasterDiagnosisTemplateCreate />,
+          path: 'master/diagnosis',
+          element: <MasterDiagnosisTemplate />,
        },
        {
-          path: 'master/diagnosis-template',
-          element: <MasterDiagnosisTemplate />,
+          path: 'master/diagnosis/create',
+          element: <MasterDiagnosisTemplateCreate />,
        },
        {
          path: 'master/diagnosis-template/:id/diagnosis-template-history',