import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; import Form from '@admin/components/form/Form'; import FormField from '@admin/components/form/FormField'; import HeadingSmall from '@admin/components/heading-small'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import AppLayout from '@admin/layouts/app-layout'; import SettingsLayout from '@admin/layouts/settings/layout'; import { Head, router, usePage } from '@inertiajs/react'; import { Activity, Save } from 'lucide-react'; import { ReactNode, useEffect, useState } from 'react'; type DashboardSetting = { id: number; module_id: number; name: string; description: string; status: number; show_on_module_dashboard: number; is_available_to_platform: number; show_on_platform: number; created_at?: string; updated_at?: string; }; // Skeleton Loader Components const SkeletonCard = () => (
{/* Header with title and toggle */}
); const SkeletonHeading = () => (
); const SkeletonButton = () =>
; const SkeletonSubmitButton = () =>
; export default function Edit() { const [isLoading, setIsLoading] = useState(true); const { dashboard_settings } = usePage().props as any; const settings = dashboard_settings as DashboardSetting[]; const activityLogCtl = useModelActivityLog(); // Show skeleton for 1 second useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); }, 500); return () => clearTimeout(timer); }, []); // Prepare default values for the form (only status now) const defaultValues = settings.reduce((acc: any, setting: DashboardSetting) => { acc[`status_${setting.id}`] = !!setting.status; return acc; }, {}); const handleSubmit = (data: any) => { // Transform form data back to expected format const payload = settings.map((setting: DashboardSetting) => ({ id: setting.id, status: data[`status_${setting.id}`] ? 1 : 0, })); router.post( route('settings.dashboard.update'), { settings: payload }, { onStart: () => { setIsLoading(true); // show skeleton while request is running }, onSuccess: () => { setTimeout(() => { setIsLoading(false); }, 500); // ✅ hide skeleton after success }, onError: () => { setIsLoading(false); // also hide if failed }, }, ); }; // Skeleton Loader if (isLoading) { return ( <>
{[...Array(6)].map((_, index) => ( ))}
); } return ( <>
{settings.map((setting: DashboardSetting) => { return (
{/* Header with title and toggle */}

{setting.name}

{setting.description}

); })}
); } Edit.layout = (page: ReactNode) => ( {page} );