diff --git a/frontend/hospital-portal/src/pages/Dashboard.tsx b/frontend/hospital-portal/src/pages/Dashboard.tsx
index 23dbe24c..a4468195 100755
--- a/frontend/hospital-portal/src/pages/Dashboard.tsx
+++ b/frontend/hospital-portal/src/pages/Dashboard.tsx
@@ -16,11 +16,13 @@ import TableList from '@/sections/dashboard/TableList';
 
 // ----------------------------------------------------------------------
 
+// const [notifications, setNotifications] = useState([])
+
 const itemList = [
-  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
-  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
-  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
-  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
+  // { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
+  // { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
+  // { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
+  // { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
 ];
 
 // ----------------------------------------------------------------------
diff --git a/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx b/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
index e44160d0..6ce297c4 100644
--- a/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
@@ -6,6 +6,8 @@ import { ChevronRight } from '@mui/icons-material';
 import Iconify from '@/components/Iconify';
 // React
 import { useState } from 'react';
+import DialogNotification from './DialogNotification';
+import DialogDetailClaim from './DialogDetailClaim';
 
 // ----------------------------------------------------------------------
 
@@ -93,7 +95,7 @@ export default function CardNotification({ data }: NotificationProps) {
       </Stack>
 
       <ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
-        {data
+        {(data && data.length)
           ? data.map(({ info, date, time }, key) => (
               <div key={key}>
                 {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
@@ -116,7 +118,7 @@ export default function CardNotification({ data }: NotificationProps) {
                 </Stack>
               </div>
             ))
-          : ''}
+          : <Typography variant="body2" align="center">Tidak ada notifikasi</Typography>}
       </ItemNotificationStyle>
 
       {isDialog === 'allNotification' && (
diff --git a/frontend/hospital-portal/src/sections/dashboard/DialogDetailClaim.tsx b/frontend/hospital-portal/src/sections/dashboard/DialogDetailClaim.tsx
new file mode 100644
index 00000000..3aba83d1
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/DialogDetailClaim.tsx
@@ -0,0 +1,175 @@
+// @mui
+import {
+  Button,
+  Box,
+  Stepper,
+  Step,
+  StepLabel,
+  Card,
+  Typography,
+  Divider,
+  Stack,
+} from '@mui/material';
+import { Add } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+// theme
+import palette from '../../theme/palette';
+// React
+import { ReactElement } from 'react';
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+const steps = ['Review', 'Approval', 'Disbursement'];
+
+const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const getContent = () => (
+    <>
+      <Stack
+        alignItems="center"
+        justifyContent="space-between"
+        direction="row"
+        sx={{ marginTop: 1 }}
+      >
+        <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
+          Claim Request
+        </Typography>
+        <Stack>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">15 / 05 / 2022</Typography>
+        </Stack>
+      </Stack>
+      <Box sx={{ width: '100%', marginTop: 2 }}>
+        <Stepper alternativeLabel>
+          {steps.map((label) => (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </Box>
+      <Stack marginTop={2}>
+        <Typography variant="subtitle1" paddingY={2}>
+          17 Mei 2022
+        </Typography>
+      </Stack>
+      <Stack direction="row" spacing={2}>
+        <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
+        <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
+          {/* Item 1 */}
+          <Card sx={{ paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">09:10 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: palette.light.warning.lighter,
+                  color: palette.light.warning.dark,
+                  borderColor: palette.light.warning.dark,
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Approval
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : mohon melengkapi kekurangan dokumen
+              </Typography>
+              <Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
+                Lab pemeriksaan darah
+              </Typography>
+              <Button
+                variant="outlined"
+                startIcon={<Add />}
+                fullWidth
+                sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
+              >
+                Hasil Pemeriksaan Laboratorium
+              </Button>
+            </Stack>
+          </Card>
+          {/* Item 2 */}
+          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">09:00 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: palette.light.warning.lighter,
+                  color: palette.light.warning.dark,
+                  borderColor: palette.light.warning.dark,
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Approval
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : Penilaian Dokter
+              </Typography>
+            </Stack>
+          </Card>
+          {/* Item 3 */}
+          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">08:00 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: '#F5F5F5',
+                  color: '#757575',
+                  borderColor: '#757575',
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Review
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : Klaim Diajukan
+              </Typography>
+            </Stack>
+          </Card>
+        </Stack>
+      </Stack>
+    </>
+  );
+
+  return (
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+    />
+  );
+};
+
+export default DialogDetailClaim;
diff --git a/frontend/hospital-portal/src/sections/dashboard/DialogNotification.tsx b/frontend/hospital-portal/src/sections/dashboard/DialogNotification.tsx
new file mode 100644
index 00000000..c93a27b2
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/DialogNotification.tsx
@@ -0,0 +1,93 @@
+// react
+import { ReactElement, useState } from 'react';
+// mui
+import { Card, Divider, Link, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// Component
+import MuiDialog from '../../components/MuiDialog';
+// Sections
+import DialogDetailClaim from './DialogDetailClaim';
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const [openDialogClaim, setOpenDialogClaim] = useState(false);
+  const [dialogTitleClaim, setDialogTitleClaim] = useState('');
+
+  const clickHandler = () => {
+    setDialogTitleClaim('Claim Details');
+    setOpenDialogClaim(true);
+  };
+
+  const getContent = () => (
+    <Stack sx={{ marginTop: 2 }}>
+      <ItemNotificationStyle>
+        {data
+          ? data.map(({ info, date, time }: DataContent, key) => (
+              <div key={key}>
+                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                    <Link
+                      component="button"
+                      variant="caption"
+                      underline="always"
+                      onClick={clickHandler}
+                    >
+                      Info Detail
+                    </Link>
+                  </Stack>
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                  </Stack>
+                </Stack>
+              </div>
+            ))
+          : ''}
+      </ItemNotificationStyle>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+      />
+
+      <DialogDetailClaim
+        openDialog={openDialogClaim}
+        setOpenDialog={setOpenDialogClaim}
+        title={{ name: dialogTitleClaim }}
+      />
+    </>
+  );
+};
+
+export default DialogNotification;
diff --git a/frontend/hospital-portal/src/sections/dashboard/TableList.tsx b/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
index 72ddd2af..49513571 100755
--- a/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
+++ b/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
@@ -38,6 +38,7 @@ import palette from '@/theme/palette';
 import { useSearchParams } from 'react-router-dom';
 // import { UserCurrentCorporateContext } from '@/contexts/UserCurrentCorporate';
 import { fSplit } from '@/utils/formatNumber';
+import { Chip } from '@mui/material';
 
 /* ---------------------------------- types --------------------------------- */
 type PaginationTableProps = {
@@ -60,7 +61,7 @@ type DataTableProps = {
     total: number;
     percentage: number;
   };
-  status: number;
+  status: string;
 };
 
 type Order = 'asc' | 'desc';
@@ -174,7 +175,6 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
 /* -------------------------------------------------------------------------- */
 
 export default function TableList(props: any) {
-
   const [dataTable, setDataTable] = useState([]);
   const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
     current_page: 0,
@@ -294,7 +294,7 @@ export default function TableList(props: any) {
       const response = await axios.get(`/claim-requests`, {
         params: { ...params, claimMember: false },
       });
-      
+
       setSearchParams(params);
       setDataTable(response.data.data.data);
       setPaginationTable(response.data.data);
@@ -365,8 +365,9 @@ export default function TableList(props: any) {
                       <TableCell align="left">{row.code}</TableCell>
                       <TableCell align="center">{row.member?.full_name ?? ''}</TableCell>
                       <TableCell align="center">{row.submission_date}</TableCell>
-                      <TableCell align="right">{ row.log_url ? (
-                        <Button
+                      <TableCell align="right">
+                        {row.log_url ? (
+                          <Button
                             sx={{
                               backgroundColor: palette.light.grey[400],
                               color: palette.dark.grey[900],
@@ -379,46 +380,26 @@ export default function TableList(props: any) {
                           >
                             Download LOG
                           </Button>
-                      ) : (
-                        <Typography>Belum Tersedia</Typography>
-                      )}
-                          </TableCell>
-                      <TableCell align="right">
-                        {row.status == 'requested' ? (
-                          <Button
-                            sx={{
-                              backgroundColor: 'rgba(84, 214, 44, 0.16)',
-                              color: palette.dark.success.dark,
-                              paddingY: 0,
-                              '&:hover': {
-                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
-                                color: palette.dark.success.darker,
-                              },
-                            }}
-                          >
-                            Requested
-                          </Button>
                         ) : (
-                          <Button
-                            sx={{
-                              backgroundColor: 'rgba(255, 72, 66, 0.16)',
-                              color: palette.dark.error.dark,
-                              paddingY: 0,
-                              '&:hover': {
-                                backgroundColor: 'rgba(255, 72, 66, 0.32)',
-                                color: palette.dark.error.darker,
-                              },
-                            }}
-                          >
-                            Declined
-                          </Button>
+                          <Typography>Belum Tersedia</Typography>
                         )}
                       </TableCell>
-                      {/* <TableCell align="right">
-                        <IconButton>
-                          <Iconify icon="ic:baseline-more-vert" />
-                        </IconButton>
-                      </TableCell> */}
+                      <TableCell align="right">
+                        <Chip
+                          color={
+                            row.status == 'requested'
+                              ? 'default'
+                              : row.status == 'approved'
+                              ? 'success'
+                              : row.status == 'declined'
+                              ? 'error'
+                              : 'default'
+                          }
+                          size="small"
+                          label={row.status ?? 'unknown'}
+                          sx={{ textTransform: 'capitalize' }}
+                        />
+                      </TableCell>
                     </TableRow>
                   ))
                 ) : (