pengajuan claim

frontend/client-portal/src/sections/claim-submit/CardNotification.tsx

@@ -0,0 +1,148 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '../../components/Iconify';
+//  Section
+import DialogNotification from './DialogNotification';
+import DialogDetailClaim from './DialogDetailClaim';
+// React
+import { useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type NotificationProps = {
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+const RootNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  height: '100%',
+  maxHeight: '240px',
+}));
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+  marginTop: 2,
+  overflowY: 'auto',
+  maxHeight: '154px',
+  gap: '0.5rem',
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardNotification({ data }: NotificationProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [dialogTitle, setDialogTitle] = useState('');
+  const [isDialog, setIsDialog] = useState('');
+
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'allNotification':
+        setDialogTitle('Notification');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      case 'infoDetail':
+        setDialogTitle('Claim Details');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <RootNotificationStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button
+          sx={{ typography: 'body2' }}
+          endIcon={<ChevronRight />}
+          onClick={() => clickHandler('allNotification')}
+        >
+          View All
+        </Button>
+      </Stack>
+
+      <ItemNotificationStyle>
+        {data
+          ? 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>
+                    <Link
+                      component="button"
+                      variant="caption"
+                      underline="always"
+                      onClick={() => clickHandler('infoDetail')}
+                    >
+                      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>
+
+      {isDialog === 'allNotification' && (
+        <DialogNotification
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+          data={data}
+        />
+      )}
+
+      {isDialog === 'infoDetail' && (
+        <DialogDetailClaim
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+        />
+      )}
+    </RootNotificationStyle>
+  );
+}