Pour Christian

getAdminTransactions.md

export const getAdminTransactions = async (
    paginationArg: TPaginationArgs = { limit: 10, page: 1 },
    filters?: Record<string, any>,
): Promise<TGetListTransactions> => {
    const { limit, page } = paginationArg;
    const filtersToStr = getFilterPath(filters);

    try {
        const response = await axios.get<any, TGetListTransactions>(
            `/transaction/admin${filtersToStr?.path}`,
            {
                params: {
                    perPage: limit,
                    page,
                },
            },
        );

        return response;
    } catch (error) {
        throw error;
    }
};

getFilterPath.md

import dayjs from "dayjs";

export const getFilterPath = (filters?: Record<string, any>) => {
    let path = "?";
    const { date, status } = filters as any;

    if (date[0]) {
        const startDate = dayjs(date[0]).toISOString();
        path = `${path}&startDate=${startDate}`;
    }

    if (date[1]) {
        const endDate = dayjs(date[1]).toISOString();
        path = `${path}&endDate=${endDate}`;
    }

    if (status) {
        path = `${path}&status=${status}`;
    }

    if (path === "?") {
        path = "";
    }

    return { path };
};

index.md

"use client";

import ListTransactions from "../list-transactions";
import TransactionsTableFilters from "./transactions-table-filters";
import { useTable } from "@/hooks/use-table";
import { useColumn } from "@/hooks/use-column";
import { useEffect, useMemo, useState } from "react";
import { getColumns } from "./transactions-table-columns";
import { usePagination } from "@/hooks/use-pagination";
import { FiSearch } from "react-icons/fi";

import { downloadTransactions, getAdminTransactions } from "@/api/administration/transactions.api";
import { exportTransactionToExcel } from "@/utils/download-transactions";
import { $toastify } from "@/utils/toastify";
import { useQuery } from "@tanstack/react-query";
import { INITIAL_DATA } from "../../utils";
import { TTransaction } from "@/interfaces";
import { Button } from "rizzui";

const filterState = {
    date: [null, null],
    status: "",
};

export default function AllTransactions() {
    const { setCurrentPage, setPageSize, pageSize, currentPage } = usePagination();
    const [isDownloading, setIsDownloading] = useState(false);
    const pagination = { page: currentPage, limit: pageSize };
    const [data, setData] = useState<TTransaction[]>([]);
    const [newFilters, setNewFilters] = useState<Record<string, any>>(filterState);

    useEffect(() => {
        setCurrentPage(1);
    }, []);

    const {
        isFiltered,
        updateFilter,
        handleReset,
        filters,
        searchTerm,
        handleSearch,
        sortConfig,
        handleSort,
    } = useTable(data, pageSize, filterState);

    const { data: transactions, isFetching } = useQuery({
        queryKey: ["get-list-transactions", pagination, newFilters],
        queryFn: () => getAdminTransactions(pagination, newFilters),
        initialData: INITIAL_DATA,
    });

    const columns = useMemo(
        () => getColumns({ sortConfig, onHeaderCellClick }),
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [sortConfig.key, sortConfig.direction],
    );

    const { checkedColumns, setCheckedColumns } = useColumn(columns);

    function onHeaderCellClick(value: string) {
        return {
            onClick: () => {
                handleSort(value);
            },
        };
    }

    const handleDownloadTransactions = async () => {
        setIsDownloading(true);
        const response = await downloadTransactions(filters);
        setIsDownloading(false);
        if (response?.length <= 0) {
            $toastify("success", "Aucune donnée trouvée");
        } else {
            exportTransactionToExcel(response);
        }
    };

    useEffect(() => {
        setData(transactions?.data);
    }, [transactions?.data]);

    return (
        <ListTransactions
            filterElement={
                <>
                    <TransactionsTableFilters
                        isFiltered={isFiltered}
                        filters={filters}
                        updateFilter={updateFilter}
                        handleReset={handleReset}
                    />
                    <Button
                        variant="outline"
                        className="px-5"
                        onClick={() => setNewFilters(filters)}
                    >
                        <FiSearch className="mr-2" />
                        Rechercher
                    </Button>
                </>
            }
            setPageSize={setPageSize}
            setCurrentPage={setCurrentPage}
            pageSize={pageSize}
            currentPage={currentPage}
            data={transactions.data}
            totalItems={transactions.pagination.totalCount}
            isLoading={isFetching}
            enablePagination={true}
            title="Liste de toutes les transactions"
            variant="modern"
            filterOptions={{
                searchTerm,
                onSearchClear: () => {
                    handleSearch("");
                },
                onSearchChange: (event) => {
                    handleSearch(event.target.value);
                },
                hasSearched: isFiltered,
                checkedColumns,
                columns,
                setCheckedColumns,
                drawerTitle: "Filtres",
                canDownload: true,
                handleDownload: handleDownloadTransactions,
                isDownloading,
            }}
        />
    );
}