import { DataTable } from '@admin/components/datatable'; import { SkeletonTableWithStateCard } from '@admin/components/skeleton'; import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge'; import { Subscription, subscriptionTableColumns } from '@admin/components/tableColumns/subscriptionTableColumns'; import { Button } from '@admin/components/ui/button'; 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, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useEffect, useState } from 'react'; import { toast } from 'sonner'; interface SubscriptionSummaryItem { title: string; value: number; } export default function SubscriptionsIndex() { const [clientData, setClientData] = useState({}); const [summary, setSummary] = useState([]); const [isLoading, setIsLoading] = useState(true); const [maxColumns, setMaxColumns] = useState(6); useEffect(() => { refetchSubscriptions(); 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 refetchSubscriptions = async () => { const url = route('admin.subscriptions.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).subscriptionSummary) { setSummary((json as any).subscriptionSummary as any); } setIsLoading(false); }; const handleViewSubscription = (subscription: Subscription) => { router.visit(route('admin.subscriptions.show', subscription.id)); }; const handleEditSubscription = (subscription: Subscription) => { router.visit(route('admin.subscriptions.edit', subscription.id)); }; const handlePaymentSubscription = (subscription: Subscription) => { router.visit(route('admin.transactions.payment', subscription.id)); }; const handleCreateSubscription = () => { router.visit(route('admin.subscriptions.create')); }; const dataColumns = subscriptionTableColumns({ handleViewSubscription, handleEditSubscription, handlePaymentSubscription, }); if (isLoading) { return ( <> ); } return (

Subscription Management

Administration › Subscriptions
{summary.length > 0 && (
{summary?.map((s: SubscriptionSummaryItem, idx: number) => { const { icon: Icon } = bgColor(String(s?.title)); return (
); })}
)}
{ const url = route('admin.subscriptions.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, }, }); }} />
); }