import { DataTable } from '@admin/components/datatable'; import { SkeletonTableWithStateCard } from '@admin/components/skeleton'; import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge'; import { Transaction, transactionTableColumns } from '@admin/components/tableColumns/transactionTableColumns'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import { fetchDatatable } from '@admin/lib/datatable-fetch'; import { bgColor } from '@admin/lib/Icon-bg-Color'; import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; interface TransactionSummaryItem { title: string; value: number; } export default function TransactionsIndex() { const [clientData, setClientData] = useState({}); const [summary, setSummary] = useState([]); const [isLoading, setIsLoading] = useState(true); const [maxColumns, setMaxColumns] = useState(6); useEffect(() => { refetchTransactions(); const updateColumns = () => { const width = window.innerWidth; if (width < 640) setMaxColumns(1); else if (width < 768) setMaxColumns(2); else if (width < 1024) setMaxColumns(3); else if (width < 1280) setMaxColumns(4); else if (width < 1536) setMaxColumns(5); else setMaxColumns(6); }; updateColumns(); window.addEventListener('resize', updateColumns); return () => window.removeEventListener('resize', updateColumns); }, []); const refetchTransactions = async () => { const url = route('admin.transactions.index'); const queryParams = clientData?.queryParams || { per_page: 10, page: 1 }; const json = await fetchDatatable(url, queryParams); setClientData({ data: json.data, meta: json.meta, queryParams: queryParams, links: { prev: json.meta.current_page > 1 ? '' : null, next: json.meta.current_page < json.meta.last_page ? '' : null, }, }); if ((json as any).summary) { setSummary((json as any).summary as any); } setIsLoading(false); }; const dataColumns = transactionTableColumns(); if (isLoading) { return ( <> ); } return (

Transaction Management

Administration › Transactions
{summary.length > 0 && (
{summary?.map((s: TransactionSummaryItem, idx: number) => { const { icon: Icon } = bgColor(s?.title); return (
); })}
)}
{ const url = route('admin.transactions.index'); const json = await fetchDatatable(url, params); setClientData({ data: json.data, meta: json.meta, queryParams: params, links: { prev: json.meta.current_page > 1 ? '' : null, next: json.meta.current_page < json.meta.last_page ? '' : null, }, }); }} />
); }