import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Field, FieldError } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import systemRoutes from '@/routes/system'; import type { GeneralSetting } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { ImagePlus, Loader, Save, X } from 'lucide-react'; import React, { useRef, useState } from 'react'; import { toast } from 'sonner'; export default function SettingIndex({ setting, }: { setting: GeneralSetting | null; }) { const { data, setData, post, processing, errors } = useForm({ site_name: setting?.site_name || '', site_description: setting?.site_description || '', site_address: setting?.site_address || '', site_phone: setting?.site_phone || '', logo_light: null as File | null, logo_dark: null as File | null, icon_light: null as File | null, icon_dark: null as File | null, }); const logoLightInputRef = useRef(null); const logoDarkInputRef = useRef(null); const iconLightInputRef = useRef(null); const iconDarkInputRef = useRef(null); const [logoLightPreview, setLogoLightPreview] = useState( setting?.logo_light_url || null, ); const [logoDarkPreview, setLogoDarkPreview] = useState( setting?.logo_dark_url || null, ); const [iconLightPreview, setIconLightPreview] = useState( setting?.icon_light_url || null, ); const [iconDarkPreview, setIconDarkPreview] = useState( setting?.icon_dark_url || null, ); const handleFileChange = ( e: React.ChangeEvent, field: 'logo_light' | 'logo_dark' | 'icon_light' | 'icon_dark', setPreview: React.Dispatch>, ) => { const file = e.target.files?.[0]; if (!file) { return; } setData(field, file); const reader = new FileReader(); reader.onloadend = () => setPreview(reader.result as string); reader.readAsDataURL(file); }; const removeFile = ( field: 'logo_light' | 'logo_dark' | 'icon_light' | 'icon_dark', setPreview: React.Dispatch>, inputRef: React.RefObject, ) => { setData(field, null); setPreview(null); if (inputRef.current) { inputRef.current.value = ''; } }; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); post(systemRoutes.settings.update().url, { forceFormData: true, onSuccess: (response: any) => { toast.success(response.props.flash.success); }, }); }; return (

Pengaturan Umum

Informasi Aplikasi
setData('site_phone', e.target.value) } placeholder="0812xxxx" /> setData('site_name', e.target.value) } autoComplete="off" placeholder="Contoh: VN Grup Dress" maxLength={100} />