create table component & connect api for dashboard

frontend/client-portal/src/sections/dashboard/CardNotification.tsx

@@ -26,9 +26,10 @@ type NotificationProps = {
 
 const RootNotificationStyle = styled(Card)(({ theme }) => ({
   boxShadow: 'none',
-  padding: '1rem 0.5rem',
+  padding: '1.5rem',
   color: 'black',
   backgroundColor: theme.palette.grey[200],
+  height: '100%',
   maxHeight: '240px',
 }));
 
@@ -37,6 +38,10 @@ const ItemNotificationStyle = styled(Card)(({ theme }) => ({
   padding: theme.spacing(1),
   borderRadius: 0.5,
   color: 'black',
+  marginTop: 2,
+  overflowY: 'auto',
+  maxHeight: '154px',
+  gap: '0.5rem',
 }));
 
 // ----------------------------------------------------------------------
@@ -95,11 +100,11 @@ export default function CardNotification({ data }: NotificationProps) {
         </Button>
       </Stack>
 
-      <ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
+      <ItemNotificationStyle>
         {data
-          ? data.map(({ info, date, time }, key) => (
-              <div key={key}>
-                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+          ? data.map(({ info, date, time }, index) => (
+              <div key={index}>
+                {index >= 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>