import { Form, FormField } 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 AdminSettingsLayout from '@admin/layouts/admin/admin-settings-layout'; import { Head, router, usePage } from '@inertiajs/react'; import { Save } from 'lucide-react'; import { ReactNode, useEffect } from 'react'; import { useFormContext } from 'react-hook-form'; interface Props { settings: { app_name?: string; app_slug?: string; app_description?: string; app_email?: string; app_phone?: string; app_country?: string; app_address?: string; app_city?: string; app_state?: string; app_zip_code?: string; app_timezone?: string; }; } /* slug generator */ /* ----------------------------------- Slug Generator ----------------------------------- */ const generateSlug = (text: string) => text .toLowerCase() .trim() .replace(/[^\w\s-]/g, '') .replace(/[\s_-]+/g, '-') .replace(/^-+|-+$/g, ''); /* ----------------------------------- Slug Sync Component ----------------------------------- */ function SlugSync() { const { watch, setValue } = useFormContext(); const app_name = watch('app_name'); // Always auto-generate app_slug from app_name useEffect(() => { if (app_name?.trim()) { setValue('app_slug', generateSlug(app_name), { shouldValidate: true }); } }, [app_name, setValue]); return null; } /* slug generator */ export default function General({ settings }: Props) { const { props } = usePage(); const externalErrors = (props as any)?.errors || {}; const defaultValues = { app_name: settings?.app_name || '', app_slug: settings?.app_slug || '', app_description: settings?.app_description || '', app_email: settings?.app_email || '', app_phone: settings?.app_phone || '', app_country: settings?.app_country || '', app_address: settings?.app_address || '', app_city: settings?.app_city || '', app_state: settings?.app_state || '', app_zip_code: settings?.app_zip_code || '', app_timezone: settings?.app_timezone || 'UTC', }; const handleSubmit = (data: any) => { const payload: any = { ...data }; router.post( '/admin/settings/general', { ...payload, _method: 'put' }, { forceFormData: true, preserveScroll: true, }, ); }; return ( <>
{/* Main Form Fields */}
{/* Slug Auto Sync */}
); } General.layout = (page: ReactNode) => ( {page} );