import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, useForm } from '@inertiajs/react'; import { Button, LinkButton } from '@/Components/ui/button'; import { ChevronLeft, Building2, User, Mail, Phone, MapPin, FileText, CreditCard, StickyNote, BadgeCheck, } from 'lucide-react'; const cls = 'w-full border border-input rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-primary/30 transition-shadow'; function Section({ icon: Icon, title, children }: { icon: any; title: string; children: React.ReactNode }) { return (

{title}

{children}

); } function Field({ label, error, full, children }: { label: string; error?: string; full?: boolean; children: React.ReactNode }) { return (

{label} {children} {error &&

{error}

}

); } export default function SupplierCreate() { const { data, setData, post, processing, errors } = useForm({ name: '', contact_name: '', email: '', phone: '', address: '', address2: '', address3: '', city: '', postcode: '', state: '', country: 'Malaysia', company_reg_no: '', tax_id: '', payment_terms: '', notes: '', status: 'active', }); const inp = (key: keyof typeof data, type = 'text') => ( setData(key, e.target.value)} className={cls} /> ); const initials = data.name.trim() ? data.name.trim().split(/\s+/).slice(0, 2).map(w => w[0].toUpperCase()).join('') : '?'; return (

{/* Back + title */}

New Supplier

{/* Hero identity card */}

{initials}

{data.name.trim() || Company name…}

{data.city || 'New supplier'}

Active

{inp('name')}

{ e.preventDefault(); post('/suppliers'); }} className="space-y-5"> {/* Contact */}

{inp('contact_name')} {inp('phone', 'tel')} {inp('email', 'email')}

{/* Address */}

{inp('address')} {inp('address2')} {inp('address3')} {inp('city')} {inp('postcode')} {inp('state')} {inp('country')}

{/* Legal & Finance */}

{inp('company_reg_no')} {inp('tax_id')} {inp('payment_terms')}

{/* Notes */}