import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; import HeadingSmall from '@admin/components/heading-small'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import { Switch } from '@admin/components/ui/switch'; 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; status: number; description?: string; module?: { id: number; status: number; }; }; // Skeleton Loader Components const SkeletonCard = () => (

); const SkeletonHeading = () => (

); const SkeletonButton = () =>

; const SkeletonSubmitButton = () =>

; export default function Edit() { const [isLoading, setIsLoading] = useState(true); const { profile_settings } = usePage().props as any; const activityLogCtl = useModelActivityLog(); // Show skeleton for 1 second useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); }, 1000); return () => clearTimeout(timer); }, []); // Only include settings with module.status === 1 const activeSettings = profile_settings.filter((s: DashboardSetting) => s.module?.status === 1); // Local state const [settings, setSettings] = useState(activeSettings); // Toggle switch => update "status" const handleStatusToggle = (id: number) => { setSettings((prev) => prev.map((s) => (s.id === id ? { ...s, status: s.status ? 0 : 1 } : s))); }; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); // Only send id + status const payload = settings.map((s) => ({ id: s.id, status: s.status, })); router.post( route('settings.profile.widget.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) => { return (

{setting.name}

handleStatusToggle(setting.id)} />

); })}

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