payment-backoffice/app/components/HistoryModal/HistoryModal.tsx

import * as React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  Paper,
  Box,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

interface Transaction {
  date: string;
  method: string;
  amount: number | string;
  status: string;
}

interface TransactionHistoryModalProps {
  open: boolean;
  onClose: () => void;
  deposits?: Transaction[];
  withdrawals?: Transaction[];
}

/**
 * TransactionHistoryModal
 *
 * Props:
 * - open: boolean
 * - onClose: () => void
 * - deposits: Array<{ date: string; method: string; amount: number | string; status: string }>
 * - withdrawals: Array<{ date: string; method: string; amount: number | string; status: string }>
 */
export function HistoryModal({
  open,
  onClose,
  deposits = [],
  withdrawals = [],
}: TransactionHistoryModalProps) {
  const fmt = (n: number | string): string =>
    typeof n === "number"
      ? n.toLocaleString(undefined, { style: "currency", currency: "EUR" })
      : n;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
      <DialogTitle sx={{ p: 2, pr: 6 }}>
        <Typography variant="h6" fontWeight={700} sx={{ textAlign: "center" }}>
          History
        </Typography>
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{ position: "absolute", right: 8, top: 8 }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent sx={{ pt: 0 }}>
        <Box component={Paper} variant="outlined" sx={{ p: { xs: 1, sm: 2 } }}>
          <Box
            sx={{
              display: "flex",
              flexDirection: { xs: "column", md: "row" },
              gap: 2,
            }}
          >
            <Box sx={{ flex: 1 }}>
              <Typography
                variant="h6"
                sx={{ mb: 1, fontWeight: 700, textAlign: "center" }}
              >
                Last 5 Deposits
              </Typography>
              <TableContainer component={Paper} variant="outlined">
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Date/Time</TableCell>
                      <TableCell>Deposit Method</TableCell>
                      <TableCell>Amount</TableCell>
                      <TableCell>Status</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {deposits.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={4}>
                          <Typography variant="body2" color="text.secondary">
                            No deposits yet
                          </Typography>
                        </TableCell>
                      </TableRow>
                    ) : (
                      deposits.slice(0, 5).map((row, idx) => (
                        <TableRow key={idx}>
                          <TableCell>{row.date}</TableCell>
                          <TableCell>{row.method}</TableCell>
                          <TableCell>{fmt(row.amount)}</TableCell>
                          <TableCell>{row.status}</TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>

            <Box sx={{ flex: 1 }}>
              <Typography
                variant="h6"
                sx={{ mb: 1, fontWeight: 700, textAlign: "center" }}
              >
                Last 5 Withdrawals
              </Typography>
              <TableContainer component={Paper} variant="outlined">
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Date/Time</TableCell>
                      <TableCell>Withdrawal Method</TableCell>
                      <TableCell>Amount</TableCell>
                      <TableCell>Status</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {withdrawals.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={4}>
                          <Typography variant="body2" color="text.secondary">
                            No withdrawals yet
                          </Typography>
                        </TableCell>
                      </TableRow>
                    ) : (
                      withdrawals.slice(0, 5).map((row, idx) => (
                        <TableRow key={idx}>
                          <TableCell>{row.date}</TableCell>
                          <TableCell>{row.method}</TableCell>
                          <TableCell>{fmt(row.amount)}</TableCell>
                          <TableCell>{row.status}</TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Box>
        </Box>
      </DialogContent>
    </Dialog>
  );
}

export default function TransactionHistoryModalDemo() {
  const [open, setOpen] = React.useState(false);

  const deposits: Transaction[] = [
    { date: "2025-08-01 10:10", method: "CC", amount: 120, status: "approved" },
    {
      date: "2025-07-28 14:35",
      method: "Bank Transfer",
      amount: 250,
      status: "approved",
    },
    {
      date: "2025-07-20 09:05",
      method: "PayPal",
      amount: 75,
      status: "pending",
    },
    { date: "2025-07-11 17:12", method: "CC", amount: 300, status: "rejected" },
    { date: "2025-07-01 12:42", method: "CC", amount: 180, status: "approved" },
  ];

  const withdrawals: Transaction[] = [
    {
      date: "2025-08-02 11:20",
      method: "Crypto",
      amount: 95,
      status: "processing",
    },
    {
      date: "2025-07-29 16:45",
      method: "Bank Transfer",
      amount: 220,
      status: "approved",
    },
    {
      date: "2025-07-21 15:10",
      method: "eWallet",
      amount: 60,
      status: "pending",
    },
    {
      date: "2025-07-12 13:33",
      method: "Crypto",
      amount: 120,
      status: "approved",
    },
    {
      date: "2025-07-03 08:50",
      method: "Bank Transfer",
      amount: 150,
      status: "rejected",
    },
  ];

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Transaction History</button>
      <HistoryModal
        open={open}
        onClose={() => setOpen(false)}
        deposits={deposits}
        withdrawals={withdrawals}
      />
    </div>
  );
}