251 lines
13 KiB
TypeScript
251 lines
13 KiB
TypeScript
import { Head, useForm } from '@inertiajs/react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Field } from "@/components/ui/field"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import type { GeneralSetting } from '@/types';
|
|
import React, { useRef, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import systemRoutes from '@/routes/system';
|
|
import { ImagePlus, X } from 'lucide-react';
|
|
|
|
export default function SettingIndex({ setting }: { setting: GeneralSetting | null }) {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
name: setting?.name || '',
|
|
description: setting?.description || '',
|
|
address: setting?.address || '',
|
|
phone: setting?.phone || '',
|
|
logo: null as File | null,
|
|
icon: null as File | null,
|
|
});
|
|
|
|
const logoInputRef = useRef<HTMLInputElement>(null);
|
|
const iconInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [logoPreview, setLogoPreview] = useState<string | null>(setting?.logo_url || null);
|
|
const [iconPreview, setIconPreview] = useState<string | null>(setting?.icon_url || null);
|
|
|
|
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setData('logo', file);
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => setLogoPreview(reader.result as string);
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const removeLogo = () => {
|
|
setData('logo', null);
|
|
setLogoPreview(null);
|
|
if (logoInputRef.current) logoInputRef.current.value = '';
|
|
};
|
|
|
|
const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setData('icon', file);
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => setIconPreview(reader.result as string);
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const removeIcon = () => {
|
|
setData('icon', null);
|
|
setIconPreview(null);
|
|
if (iconInputRef.current) iconInputRef.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 (
|
|
<div className="flex flex-col gap-6 p-6">
|
|
<Head title="Pengaturan Umum" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Pengaturan Umum</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
|
<CardHeader className="border-b">
|
|
<CardTitle>Informasi Aplikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<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}
|
|
/>
|
|
{errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
|
|
</Field>
|
|
|
|
<Field>
|
|
<Label htmlFor="description" required>Deskripsi</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={data.description || ''}
|
|
onChange={(e) => setData('description', e.target.value)}
|
|
placeholder="Deskripsi singkat aplikasi"
|
|
rows={4}
|
|
/>
|
|
{errors.description && <p className="text-xs text-red-500 mt-1">{errors.description}</p>}
|
|
</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"
|
|
/>
|
|
{errors.phone && <p className="text-xs text-red-500">{errors.phone}</p>}
|
|
</Field>
|
|
</div>
|
|
|
|
<Field>
|
|
<Label htmlFor="address" required>Alamat</Label>
|
|
<Textarea
|
|
id="address"
|
|
value={data.address || ''}
|
|
onChange={(e) => setData('address', e.target.value)}
|
|
placeholder="Alamat lengkap toko"
|
|
rows={3}
|
|
/>
|
|
{errors.address && <p className="text-xs text-red-500 mt-1">{errors.address}</p>}
|
|
</Field>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
|
<CardHeader className="border-b">
|
|
<CardTitle>Logo Aplikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{logoPreview ? (
|
|
<div className="relative inline-block w-full">
|
|
<img
|
|
src={logoPreview}
|
|
alt="Logo preview"
|
|
className="w-full object-cover rounded-xl border shadow"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={removeLogo}
|
|
className="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center shadow-md transition-colors"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => logoInputRef.current?.click()}
|
|
className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-border rounded-xl hover:border-primary hover:bg-primary/5 transition-all cursor-pointer group"
|
|
>
|
|
<ImagePlus className="w-10 h-10 text-muted-foreground group-hover:text-primary transition-colors mb-2" />
|
|
<span className="text-sm text-muted-foreground group-hover:text-primary transition-colors font-medium">Klik untuk upload logo</span>
|
|
<span className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP — maks. 2MB</span>
|
|
</button>
|
|
)}
|
|
<input
|
|
ref={logoInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={handleLogoChange}
|
|
/>
|
|
{errors.logo && <p className="text-xs text-red-500 mt-2">{errors.logo}</p>}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm">
|
|
<CardHeader className="border-b">
|
|
<CardTitle>Favicon / Icon</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{iconPreview ? (
|
|
<div className="relative inline-block w-full flex justify-center">
|
|
<div className="relative">
|
|
<img
|
|
src={iconPreview}
|
|
alt="Icon preview"
|
|
className="size-24 object-contain rounded-xl border shadow p-2"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={removeIcon}
|
|
className="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center shadow-md transition-colors"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => iconInputRef.current?.click()}
|
|
className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-border rounded-xl hover:border-primary hover:bg-primary/5 transition-all cursor-pointer group"
|
|
>
|
|
<ImagePlus className="w-8 h-8 text-muted-foreground group-hover:text-primary transition-colors mb-2" />
|
|
<span className="text-sm text-muted-foreground group-hover:text-primary transition-colors font-medium">Klik untuk upload icon</span>
|
|
<span className="text-xs text-muted-foreground mt-1">ICO, PNG — maks. 1MB</span>
|
|
</button>
|
|
)}
|
|
<input
|
|
ref={iconInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={handleIconChange}
|
|
/>
|
|
{errors.icon && <p className="text-xs text-red-500 mt-2">{errors.icon}</p>}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex flex-col gap-4 p-4 rounded-xl bg-primary/5 border border-primary/10 shadow-sm">
|
|
<Button type="submit" className="w-full" disabled={processing}>
|
|
{processing ? 'Menyimpan...' : 'Simpan Perubahan'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
SettingIndex.layout = {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Sistem',
|
|
},
|
|
{
|
|
title: 'Pengaturan Umum',
|
|
}
|
|
],
|
|
};
|