import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; import { DataTable } from '@admin/components/datatable'; import { SkeletonTableWithStateCard } from '@admin/components/skeleton'; import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge'; import { Package, packageTableColumns } from '@admin/components/tableColumns/packageTableColumns'; 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 { List, Plus } from 'lucide-react'; import { useEffect, useState } from 'react'; import { toast } from 'sonner'; interface PackageSummaryItem { title: string; value: number; } export default function PackagesIndexAddon() { const [clientData, setClientData] = useState({}); const [summary, setSummary] = useState([]); const [isLoading, setIsLoading] = useState(true); const [maxColumns, setMaxColumns] = useState(6); const activityLogCtl = useModelActivityLog(); useEffect(() => { refetchPackages(); 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 refetchPackages = async () => { const url = route('admin.packages-addon.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).packageSummary) { setSummary((json as any).packageSummary as any); } setIsLoading(false); }; const handleToggleStatus = (packageId: number) => { router.patch( route('admin.packages.toggle-status', packageId), {}, { preserveScroll: true, onSuccess: () => { toast.success('Add-On Package status updated'); refetchPackages(); }, onError: () => toast.error('Failed to update add-on package status'), }, ); }; const handleViewPackage = (pkg: Package) => { router.visit(route('admin.packages.show', pkg.id)); }; const handleEditPackage = (pkg: Package) => { router.visit(route('admin.packages.edit', pkg.id)); }; const handleCreateAddonPackage = () => { router.visit(route('admin.packages-addon.create')); }; const handleActivitySidebar = () => { return activityLogCtl.show({ modelClass: 'Package', title: 'Add-On Package Model Activity' }); }; const dataColumns = packageTableColumns({ handleViewPackage, handleEditPackage, handleToggleStatus, }); if (isLoading) { return ( <> ); } return (

Add On Package Management

Administration › Packages
{summary.length > 0 && (
{summary?.map((s: PackageSummaryItem, idx: number) => { const { icon: Icon } = bgColor(s?.title); return (
); })}
)}
{ const url = route('admin.packages-addon.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, }, }); if ((json as any).packageSummary) { setSummary((json as any).packageSummary as any); } }} handleActivitySidebar={handleActivitySidebar} />
); }