import React, { useState, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Settings, Save } from '@/Components/AnimatedIcons'; interface Props { settings: { business_name: string; business_address: string; business_phone: string; business_email: string; gst_number: string; gst_enabled: boolean; gst_percentage: string; invoice_prefix: string; invoice_footer: string; default_tax_rate: string; cashier_discount_limit: string; business_logo?: string; }; } export default function SettingsIndex({ settings }: Props) { const [form, setForm] = useState(settings); const [accentColor, setAccentColor] = useState(() => localStorage.getItem('admin_accent_color') || 'pink'); useEffect(() => { const handleAccentChange = (e: CustomEvent) => setAccentColor(e.detail); window.addEventListener('theme_accent_changed', handleAccentChange as EventListener); return () => window.removeEventListener('theme_accent_changed', handleAccentChange as EventListener); }, []); const accentBg = accentColor === 'seagreen' ? 'bg-[#0CA996] hover:bg-[#098878]' : 'bg-[#FF0D8F] hover:bg-[#d90978]'; const accentText = accentColor === 'seagreen' ? 'text-[#0CA996]' : 'text-[#FF0D8F]'; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); router.post(route('admin.settings.update'), form, { forceFormData: true }); }; return (

Business & GST Invoice Settings

Configure bakery legal information, GST numbers, receipt footers, and cashier discount limits

{settings.business_logo && typeof form.business_logo === 'string' && ( Logo )} { if (e.target.files && e.target.files[0]) { setForm({ ...form, business_logo: e.target.files[0] }); } }} className="w-full p-2 border border-slate-200 dark:border-slate-800 dark:bg-slate-950 rounded-xl text-slate-900 dark:text-white focus:outline-none file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-[#FF0D8F] file:text-white hover:file:bg-[#d90978] cursor-pointer" />

Recommended size: 200x200px or similar square ratio (PNG/JPG).

setForm({ ...form, business_name: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" required />
setForm({ ...form, gst_number: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white uppercase focus:outline-none" />
setForm({ ...form, business_phone: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" />
setForm({ ...form, business_email: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" />
setForm({ ...form, business_address: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-semibold text-slate-900 dark:text-white focus:outline-none" />
setForm({ ...form, invoice_prefix: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white uppercase focus:outline-none" required />
setForm({ ...form, gst_percentage: e.target.value })} disabled={!form.gst_enabled} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white focus:outline-none disabled:opacity-50" required={form.gst_enabled} />
setForm({ ...form, cashier_discount_limit: e.target.value })} className="w-full rounded-xl border border-slate-200 dark:border-slate-800 dark:bg-slate-950 p-2.5 text-xs font-bold text-slate-900 dark:text-white focus:outline-none" required />