refactor: reorder settings form fields and improve code formatting

This commit is contained in:
Yoga Pangestu 2026-04-24 21:17:37 +07:00
parent d0ee05a148
commit abeff9963a

View File

@ -1,15 +1,15 @@
import { Head, useForm } from '@inertiajs/react';
import { ImagePlus, X, Save, Loader } from 'lucide-react';
import React, { useRef, useState } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Field, FieldError } from "@/components/ui/field" import { Field, FieldError } from "@/components/ui/field";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label";
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import systemRoutes from '@/routes/system'; import systemRoutes from '@/routes/system';
import type { GeneralSetting } from '@/types'; 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 }) { export default function SettingIndex({ setting }: { setting: GeneralSetting | null }) {
const { data, setData, post, processing, errors } = useForm({ const { data, setData, post, processing, errors } = useForm({
@ -31,8 +31,8 @@ export default function SettingIndex({ setting }: { setting: GeneralSetting | nu
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) { if (!file) {
return; return;
} }
setData('logo', file); setData('logo', file);
const reader = new FileReader(); const reader = new FileReader();
@ -45,16 +45,16 @@ return;
setLogoPreview(null); setLogoPreview(null);
if (logoInputRef.current) { if (logoInputRef.current) {
logoInputRef.current.value = ''; logoInputRef.current.value = '';
} }
}; };
const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) { if (!file) {
return; return;
} }
setData('icon', file); setData('icon', file);
const reader = new FileReader(); const reader = new FileReader();
@ -67,8 +67,8 @@ return;
setIconPreview(null); setIconPreview(null);
if (iconInputRef.current) { if (iconInputRef.current) {
iconInputRef.current.value = ''; iconInputRef.current.value = '';
} }
}; };
const onSubmit = (e: React.FormEvent) => { const onSubmit = (e: React.FormEvent) => {
@ -99,19 +99,32 @@ iconInputRef.current.value = '';
<CardTitle>Informasi Aplikasi</CardTitle> <CardTitle>Informasi Aplikasi</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Label htmlFor="name" required>Nama Aplikasi</Label> <Field>
<Input <Label htmlFor="phone" required>No. Telepon</Label>
id="name" <Input
name="name" id="phone"
value={data.name} value={data.phone || ''}
onChange={e => setData('name', e.target.value)} onChange={(e) => setData('phone', e.target.value)}
autoComplete='off' placeholder="0812xxxx"
placeholder='Contoh: VN Grup Dress' />
maxLength={100} <FieldError error={errors.phone} label="No. Telepon" className="text-xs" />
/> </Field>
<FieldError error={errors.name} label="Nama Aplikasi" className="text-xs" />
</Field> <Field>
<Label htmlFor="name" required>Nama Aplikasi</Label>
<Input
id="name"
name="name"
value={data.name}
onChange={e => setData('name', e.target.value)}
autoComplete='off'
placeholder='Contoh: VN Grup Dress'
maxLength={100}
/>
<FieldError error={errors.name} label="Nama Aplikasi" className="text-xs" />
</Field>
</div>
<Field> <Field>
<Label htmlFor="description" required>Deskripsi</Label> <Label htmlFor="description" required>Deskripsi</Label>
@ -125,19 +138,6 @@ iconInputRef.current.value = '';
<FieldError error={errors.description} label="Deskripsi" className="text-xs mt-1" /> <FieldError error={errors.description} label="Deskripsi" className="text-xs mt-1" />
</Field> </Field>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Field>
<Label htmlFor="phone" required>No. Telepon</Label>
<Input
id="phone"
value={data.phone || ''}
onChange={(e) => setData('phone', e.target.value)}
placeholder="0812xxxx"
/>
<FieldError error={errors.phone} label="No. Telepon" className="text-xs" />
</Field>
</div>
<Field> <Field>
<Label htmlFor="address" required>Alamat</Label> <Label htmlFor="address" required>Alamat</Label>
<Textarea <Textarea