comitting

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

@@ -0,0 +1,191 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  TextField,
+  InputAdornment,
+  Card,
+  IconButton,
+} from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+// React
+import { ReactElement, useRef, useState } from 'react';
+import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+function createData(name: string, memberId: string, saldo: string) {
+  return { name, memberId, saldo };
+}
+
+const rows = [
+  createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
+  createData('Marina kurniadi', '0122123', '10.000.000'),
+  createData('Tjoa Indri', '0122124', '10.000.000'),
+  createData('Atmaja Tirta', '0122125', '10.000.000'),
+  createData('Alexandra kurniadi', '0122126', '10.000.000'),
+];
+
+// ----------------------------------------------------------------------
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+  const [dataMemberClaim, setDataMemberClaim] = useState({
+    name: '',
+    memberId: '',
+    saldo: '',
+  });
+
+  const handleSearchChange = (event: any) => {
+    const newSearchText = event.target.value ?? '';
+    setSearchText(newSearchText);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Get Current Date ---------------------------- */
+
+  const current = new Date();
+  const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Icon On Click ----------------------------- */
+
+  const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
+
+  const clickHandler = (name: string, memberId: string, saldo: string) => {
+    setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
+    setOpenDialogMemberClaim(true);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Pilih Karyawan</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <TextField
+        id="search-input"
+        ref={searchInput}
+        variant="outlined"
+        fullWidth
+        onChange={handleSearchChange}
+        value={searchText}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        placeholder="Cari nama atau member ID disini..."
+        sx={{ marginTop: 2 }}
+      />
+      <Stack marginTop={2} spacing={1}>
+        {rows.map((row, key) => (
+          <Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <img
+                width={40}
+                height={40}
+                src="/images/member.png"
+                alt="user-profile"
+                style={{ borderRadius: '50%' }}
+              />
+              <Stack sx={{ flex: '45%' }}>
+                <Typography variant="subtitle1">{row.name}</Typography>
+                <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+                  Member ID : {row.memberId}
+                </Typography>
+              </Stack>
+              <Stack spacing={1} paddingY={1}>
+                <Typography color="#0A0A0A" variant="caption">
+                  Total Limit
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  {row.saldo} /{' '}
+                  <Typography variant="body2" color="#757575" component="span">
+                    10.000.000
+                  </Typography>
+                </Typography>
+              </Stack>
+              <IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
+                <Iconify icon="ic:round-chevron-right" />
+              </IconButton>
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+
+      <DialogClaimSubmitMemberSubmission
+        title={title}
+        openDialog={openDialogClaimMember}
+        setOpenDialog={setOpenDialogMemberClaim}
+        data={dataMemberClaim}
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMember;