import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog';
import { Form } from '@admin/components/form';
import HeadingSmall from '@admin/components/heading-small';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import AdminLayout from '@admin/layouts/admin/admin-layout';
import { Head, router } from '@inertiajs/react';
import { BreadcrumbItem } from '@admin/types';
import { Activity, Save } from 'lucide-react';
import { ReactNode, useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import { Switch } from "@admin/components/ui/switch";
interface Module {
id: number;
name: string;
is_active: boolean;
type:string;
}
interface Props {
data: Module[];
}
// Skeleton Loader Components
const SkeletonModuleCard = () => (
);
const SkeletonHeading = () => (
);
const SkeletonButton = () => (
);
const SkeletonSubmitButton = () => (
);
// Module Card Component
const ModuleCard = ({ module }: { module: Module }) => {
const { watch, setValue } = useFormContext();
const isDefaultType = module.type === "default";
const moduleStatus = isDefaultType ? true : watch(`appSettings.${module.id}.is_active`);
return (
{module.name}
{!isDefaultType && (
setValue(`appSettings.${module.id}.is_active`, val)
}
/>
)}
);
};
// Main Index Component
export default function Index({ data }: Props) {
const [isLoading, setIsLoading] = useState(true);
const activityLogCtl = useModelActivityLog();
// Show skeleton for 1 second
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 500);
return () => clearTimeout(timer);
}, []);
// Default values for react-hook-form
const defaultValues = {
appSettings: data
.filter(mod => mod.name !== "System")
.reduce((acc: Record, mod) => {
acc[mod.id] = { is_active: mod.is_active };
return acc;
}, {}),
};
// Submit handler
const submitHandler = async (formData: any) => {
const payload = Object.entries(formData.appSettings).map(([id, module]: any) => ({
id: Number(id),
is_active: !!module.is_active,
}));
router.post(route('developer.app.management.update'), { appSettings: payload }, {
onStart: () => setIsLoading(true),
onSuccess: () => setTimeout(() => setIsLoading(false), 500),
onError: () => setIsLoading(false),
});
};
// Skeleton Loader
if (isLoading) {
return (
<>
{[...Array(3)].map((_, index) => (
))}
);
}
return (
<>