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

// @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, useContext, useEffect, useRef, useState } from 'react';
import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';

// ----------------------------------------------------------------------

type DataContentType = {
  id: number;
  fullName: string;
  memberId: string;
  limit: {
    current: number;
    total: number;
    percentage: number;
  };
  avatar?: {
    url?: string;
    title?: string;
  };
};

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  // data?: DataContent[];
};

// ----------------------------------------------------------------------

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%)',
  },
}));

// ----------------------------------------------------------------------

export default function DialogClaimSubmitMember({
  title,
  openDialog,
  setOpenDialog,
}: MuiDialogProps) {
  const { corporateValue } = useContext(UserCurrentCorporateContext);

  /* ---------------------------------- data ---------------------------------- */
  const [data, setData] = useState([]);
  const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
    id: 0,
    fullName: '',
    memberId: '',
    limit: {
      current: 0,
      total: 0,
      percentage: 0,
    },
  });
  /* -------------------------------------------------------------------------- */

  /* --------------------------------- Search --------------------------------- */
  const [searchText, setSearchText] = useState('');
  const [appliedParams, setAppliedParams] = useState({});

  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (searchText === '') {
      setAppliedParams({});
    } else {
      setAppliedParams({ search: searchText });
    }
    await new Promise((resolve) => setTimeout(resolve, 500));
  };
  /* -------------------------------------------------------------------------- */

  /* ---------------------------- 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 = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
    setDataMemberClaim({
      id: id,
      fullName: fullName,
      memberId: memberId,
      limit: {
        current: limit.current,
        total: limit.total,
        percentage: limit.percentage,
      },
      avatar: {
        url: avatar && avatar.url,
        title: avatar && avatar.title,
      },
    });
    setOpenDialogMemberClaim(true);
  };
  /* -------------------------------------------------------------------------- */

  useEffect(() => {
    (async () => {
      if (openDialog === true) {
        const response = await axios.get(`${corporateValue}/members`, {
          params: { ...appliedParams, claimMember: true },
        });

        setData(response.data.data);
      }
    })();
  }, [corporateValue, openDialog, appliedParams]);

  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>
      <form onSubmit={handleSearchSubmit}>
        <TextField
          id="search-input"
          variant="outlined"
          fullWidth
          onChange={(event) => setSearchText(event?.target.value)}
          value={searchText}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
          placeholder="Cari nama atau member ID disini..."
          sx={{ marginTop: 2 }}
        />
      </form>
      <Stack marginTop={2} spacing={1}>
        {data.map((row: DataContentType, key) => (
          <Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
            <Stack direction="row" alignItems="center" spacing={2}>
              <img
                width={40}
                height={40}
                src={row.avatar ? row.avatar.url : '/images/member.png'}
                alt={row.avatar ? row.avatar.url : 'user-profile'}
                style={{ borderRadius: '50%' }}
              />
              <Stack sx={{ flex: '45%' }}>
                <Typography variant="subtitle1">{row.fullName}</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={row.limit && row.limit.percentage}
                />
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  {row.limit && row.limit.current} /{' '}
                  <Typography variant="body2" color="#757575" component="span">
                    {row.limit && row.limit.total}
                  </Typography>
                </Typography>
              </Stack>
              <IconButton
                onClick={() =>
                  clickHandler({
                    id: row.id,
                    fullName: row.fullName,
                    memberId: row.memberId,
                    limit: {
                      current: row.limit.current,
                      total: row.limit.total,
                      percentage: row.limit.percentage,
                    },
                  })
                }
              >
                <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}
      />
    </>
  );
}