import { adminToast } from '@admin/components/ui/admin-toast'; import { CrudCreateLink } from '@admin/components/ui/crud-create-link'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { formHelpClassName } from '@admin/components/ui/field-styles'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditStatisticCounter from '@admin/pages/statistic-counters/edit-statistic-counter'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type CounterRow = { id: number; name: string; count: number; symbol: string | null; sort_order: number; status: boolean; created_at: string; }; type StatisticCountersIndexProps = { counters: CounterRow[]; }; function formatCounterDisplay(count: number, symbol: string | null): string { return symbol ? `${count}${symbol}` : String(count); } function StatisticCountersIndex({ counters }: StatisticCountersIndexProps) { const { canEdit, canDelete } = useCrudPermissions('statistic-counter'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; counter: CounterRow | null }>({ show: false, counter: null, }); const columns: DataTableColumn[] = [ { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Name', key: 'name', truncate: true }, { header: 'Value', key: 'count', render: (row) => formatCounterDisplay(row.count, row.symbol), }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: CounterRow) => { try { const response = await fetch(`/admin/edit_statistic_counter/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch statistic counter'); } const counterData = (await response.json()) as CounterRow; setInitialData(counterData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load statistic counter details'); } }; return ( <>

Counters are displayed on the public site in ascending display order.

setDeleteModal({ show: true, counter: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No statistic counters found" />

setDeleteModal({ show: false, counter: null })} itemName={deleteModal.counter?.name ?? 'this counter'} itemType="statistic counter" deleteEndpoint={`/admin/api/delete_statistic_counter/${deleteModal.counter?.id ?? ''}`} loadingMessage="Deleting statistic counter..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(StatisticCountersIndex, { layout: dashboardPersistentLayout('Statistic counters', 'Manage odometer-style stats on the site'), });