payment-backoffice/app/features/FetchReports/FetchReports.tsx

import React, { useState } from "react";
import {
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  Stack,
  Box,
  Paper,
  IconButton,
} from "@mui/material";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";

import MoreVertIcon from "@mui/icons-material/MoreVert";
import { DateRangePicker } from "../DateRangePicker/DateRangePicker";

import "./FetchReport.scss";

export const FetchReport = () => {
  const [state, setState] = useState("");
  const [psp, setPsp] = useState("");
  const [reportType, setReportType] = useState("");

  const handleDownload = () => {
    // Download logic goes here
    alert("Report downloaded");
  };

  const isDownloadEnabled = state && psp && reportType;

  return (
    <Paper className="fetch-report" elevation={3}>
      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
        <Typography variant="h6" fontWeight="bold">
          Fetch Report
        </Typography>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <CalendarTodayIcon fontSize="small" />
          <Typography variant="body2">
            <DateRangePicker />
          </Typography>
          <IconButton size="small">
            <MoreVertIcon fontSize="small" />
          </IconButton>
        </Box>
      </Box>

      <Stack spacing={2}>
        <FormControl fullWidth>
          <InputLabel>Select state (defaults to All)</InputLabel>
          <Select
            value={state}
            onChange={e => setState(e.target.value)}
            label="Select state (defaults to All)"
          >
            <MenuItem value="successful">Successful</MenuItem>
            <MenuItem value="failed">Failed</MenuItem>
            <MenuItem value="canceled">Canceled</MenuItem>

            {/* Add more states */}
          </Select>
        </FormControl>

        <FormControl fullWidth>
          <InputLabel>Select PSPs (defaults to All)</InputLabel>
          <Select
            value={psp}
            onChange={e => setPsp(e.target.value)}
            label="Select PSPs (defaults to All)"
          >
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            {/* Add more PSPs */}
          </Select>
        </FormControl>

        <FormControl fullWidth>
          <InputLabel>Select report type</InputLabel>
          <Select
            value={reportType}
            onChange={e => setReportType(e.target.value)}
            label="Select report type"
          >
            <MenuItem value="allTransactionsReport">
              All Transactions Report
            </MenuItem>
            <MenuItem value="depositReport">Deposit Report</MenuItem>
            <MenuItem value="widthdrawReport">WithDraw Report</MenuItem>
            {/* Add more types */}
          </Select>
        </FormControl>

        <Box textAlign="center" mt={2}>
          <Button
            variant="outlined"
            onClick={handleDownload}
            disabled={!isDownloadEnabled}
            sx={{ minWidth: 200 }}
          >
            Download Report
          </Button>
        </Box>
      </Stack>
    </Paper>
  );
};