payment-backoffice/payment-iq/app/features/Pages/transactions/Transactions.tsx

"use client";
import { useEffect, useState } from "react";
import {
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  Select,
  MenuItem,
  FormControlLabel,
  Checkbox,
  Stack,
  Paper,
  styled,
  TextField,
} from "@mui/material";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import { DataGrid } from "@mui/x-data-grid";
import { columns } from "./constants";
import { rows } from "./mockData";
import AdvancedSearch from "../../AdvancedSearch/AdvancedSearch";

const paginationModel = { page: 0, pageSize: 50 };

export default function TransactionTable() {
  const [open, setOpen] = useState(false);
  const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv");
  const [onlyCurrentTable, setOnlyCurrentTable] = useState(false);
  const [filteredRows, setFilteredRows] = useState<typeof rows>([])

  const [form, setForm] = useState({
    keyword: "",
    transactionID: "",
    transactionReferenceId: "",
    user: "",
    currency: "",
    state: "",
    statusDescription: "",
    transactionType: "",
    paymentMethod: "",
    psps: "",
    initialPsps: "",
    merchants: "",
    startDate: null,
    endDate: null,
    lastUpdatedFrom: null,
    lastUpdatedTo: null,
    minAmount: "",
    maxAmount: "",
    channel: "",
  });

  const resetForm = () => {
    setForm({
      keyword: "",
      transactionID: "",
      transactionReferenceId: "",
      user: "",
      currency: "",
      state: "",
      statusDescription: "",
      transactionType: "",
      paymentMethod: "",
      psps: "",
      initialPsps: "",
      merchants: "",
      startDate: null,
      endDate: null,
      lastUpdatedFrom: null,
      lastUpdatedTo: null,
      minAmount: "",
      maxAmount: "",
      channel: "",
    });
  };


  const filterRows = (rows1, filters) => {
    // debugger
    return rows1.filter(row => {
      const hasTransactionIdFilter = filters.transactionID !== "";
      const hasStateFilter = filters.state !== "";


      if (hasTransactionIdFilter && hasStateFilter) {
        console.log(1234)
        // Return rows that match BOTH filters
        return row.transactionID == filters.transactionID && row.state.toLowerCase() === filters.state.toLowerCase();
      } else if (hasTransactionIdFilter) {
        console.log(12345)
        // Return rows that match merchandId only
        return row.transactionID == filters.transactionID;
      } else if (hasStateFilter) {
        // Return rows that match state only
        console.log(123456)
        return row.state.toLowerCase() === filters.state.toLowerCase();
      } else {
        console.log(1234567)
        // No filters applied, return all rows
        return rows;
      }
    });
  };


  useEffect(() => {
    console.log(form)
    console.log(filterRows(rows, { transactionID: form.transactionID, state: form.state }))
    setFilteredRows(filterRows(rows, { transactionID: form.transactionID, state: form.state }));
  }, [form])

  // useEffect(()=>{
  //   if(form?.transactionId){
  //     setFilteredRows(rows.filter(row => (row.merchandId.toString() === form.transactionId) && (row.state !== "" && (row.state === form.state))));
  //   } else{
  //     setFilteredRows(rows)
  //   }
  // },[form])

  const handleExport = () => {
    const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows;
    const exportData = [
      columns.map((col) => col.headerName),
      // @ts-expect-error - Dynamic field access from DataGrid columns
      ...exportRows.map((row) => columns.map((col) => row[col.field] ?? "")),
    ];

    const worksheet = XLSX.utils.aoa_to_sheet(exportData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Transactions");

    if (fileType === "csv") {
      const csv = XLSX.utils.sheet_to_csv(worksheet);
      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      saveAs(blob, "transactions.csv");
    } else {
      XLSX.writeFile(workbook, `transactions.${fileType}`, {
        bookType: fileType,
      });
    }

    setOpen(false);
  };

  return (
    <StyledPaper>
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        p={2}
      >
        <TextField
          label="Search"
          variant="outlined"
          size="small"
          // value={'searchQuery'}
          onChange={(e) => console.log(`setSearchQuery(${e.target.value})`)}
          sx={{ width: 300 }}
        />
        <AdvancedSearch form={form} resetForm={resetForm} setForm={setForm} />
        {/* <RightTemporaryDrawer /> */}
        {/* <SearchFilterForm /> */}
        <Button
          variant="outlined"
          startIcon={<FileUploadIcon />}
          onClick={() => setOpen(true)}
        >
          Export
        </Button>
      </Stack>

      <DataGrid
        rows={filteredRows}
        columns={columns}
        initialState={{ pagination: { paginationModel } }}
        pageSizeOptions={[50, 100]}
        sx={{ border: 0 }}
      />

      {/* Export Dialog */}
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Export Transactions</DialogTitle>
        <DialogContent>
          <FormControl fullWidth sx={{ mt: 2 }}>
            <Select
              value={fileType}
              onChange={(e) =>
                setFileType(e.target.value as "csv" | "xls" | "xlsx")
              }
            >
              <MenuItem value="csv">CSV</MenuItem>
              <MenuItem value="xls">XLS</MenuItem>
              <MenuItem value="xlsx">XLSX</MenuItem>
            </Select>
          </FormControl>
          <FormControlLabel
            control={
              <Checkbox
                checked={onlyCurrentTable}
                onChange={(e) => setOnlyCurrentTable(e.target.checked)}
              />
            }
            label="Only export the results in the current table"
            sx={{ mt: 2 }}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="contained" onClick={handleExport}>
            Export
          </Button>
        </DialogActions>
      </Dialog>
    </StyledPaper>
  );
}

const StyledPaper = styled(Paper)(() => ({
  height: "90vh",
}));