106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import DataTable from "@/app/features/DataTable/DataTable";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
selectFilters,
|
|
selectPagination,
|
|
selectSort,
|
|
selectStatus,
|
|
selectError,
|
|
} from "@/app/redux/advanedSearch/selectors";
|
|
import { GridColDef } from "@mui/x-data-grid";
|
|
import Spinner from "@/app/components/Spinner/Spinner";
|
|
import { AppDispatch } from "@/app/redux/store";
|
|
import {
|
|
setStatus,
|
|
setError as setAdvancedSearchError,
|
|
} from "@/app/redux/advanedSearch/advancedSearchSlice";
|
|
|
|
import {
|
|
TABLE_COLUMNS,
|
|
TABLE_SEARCH_LABELS,
|
|
} from "@/app/features/DataTable/constants";
|
|
|
|
interface TransactionRow {
|
|
id: number;
|
|
userId?: string;
|
|
transactionId: string;
|
|
type?: string;
|
|
currency?: string;
|
|
amount?: number;
|
|
status?: string;
|
|
dateTime?: string;
|
|
merchantId?: string;
|
|
pspId?: string;
|
|
methodId?: string;
|
|
modified?: string;
|
|
}
|
|
|
|
export default function AllTransactionPage() {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const filters = useSelector(selectFilters);
|
|
const pagination = useSelector(selectPagination);
|
|
const sort = useSelector(selectSort);
|
|
|
|
const [tableRows, setTableRows] = useState<TransactionRow[]>([]);
|
|
const extraColumns: string[] = []; // static for now
|
|
|
|
// Memoize rows to avoid new reference each render
|
|
const memoizedRows = useMemo(() => tableRows, [tableRows]);
|
|
|
|
// Fetch data when filters, pagination, or sort changes
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
dispatch(setStatus("loading"));
|
|
dispatch(setAdvancedSearchError(null));
|
|
try {
|
|
const response = await fetch("/api/dashboard/transactions", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ filters, pagination, sort }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
dispatch(setAdvancedSearchError("Failed to fetch transactions"));
|
|
setTableRows([]);
|
|
return;
|
|
}
|
|
|
|
const backendData = await response.json();
|
|
const transactions = backendData.transactions || [];
|
|
|
|
const rows = transactions.map((tx: any) => ({
|
|
id: tx.id,
|
|
userId: tx.customer,
|
|
transactionId: tx.external_id || tx.id,
|
|
type: tx.type,
|
|
currency: tx.currency,
|
|
amount: tx.amount,
|
|
status: tx.status,
|
|
dateTime: tx.created || tx.modified,
|
|
merchantId: tx.merchant_id,
|
|
pspId: tx.psp_id,
|
|
methodId: tx.method_id,
|
|
modified: tx.modified,
|
|
}));
|
|
|
|
setTableRows(rows);
|
|
dispatch(setStatus("succeeded"));
|
|
} catch (error) {
|
|
dispatch(
|
|
setAdvancedSearchError(
|
|
error instanceof Error ? error.message : "Unknown error"
|
|
)
|
|
);
|
|
setTableRows([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [dispatch, filters, pagination, sort]);
|
|
|
|
return <DataTable rows={memoizedRows} extraColumns={extraColumns} />;
|
|
}
|