import React, { useState, useEffect } from 'react'; import { Head, useForm, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Building2, Plus, Phone, MapPin, ShieldCheck, Store, Cpu, X } from '@/Components/AnimatedIcons'; interface BranchItem { id: number; code: string; name: string; short_name: string | null; address: string | null; city: string | null; phone: string | null; email: string | null; gst_number: string | null; manager_name: string | null; manager_phone: string | null; is_active: boolean; users_count?: number; pos_terminals_count?: number; invoices_count?: number; } interface Props { branches: BranchItem[]; } export default function Index({ branches }: Props) { const [showAddModal, setShowAddModal] = useState(false); const [showEditModal, setShowEditModal] = useState(false); const [selectedBranch, setSelectedBranch] = useState(null); const [selectedBranchForTerminal, setSelectedBranchForTerminal] = useState(null); 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 { data, setData, post, put, processing, errors, reset } = useForm({ name: '', code: '', short_name: '', address: '', city: '', phone: '', email: '', gst_number: '', manager_name: '', manager_phone: '', }); const terminalForm = useForm({ terminal_code: '', name: '', }); const handleSubmitBranch = (e: React.FormEvent) => { e.preventDefault(); post(route('admin.branches.store'), { onSuccess: () => { reset(); setShowAddModal(false); } }); }; const handleEditBranchSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!selectedBranch) return; put(route('admin.branches.update', selectedBranch.id), { onSuccess: () => { reset(); setShowEditModal(false); setSelectedBranch(null); } }); }; const openEditModal = (branch: BranchItem) => { setSelectedBranch(branch); setData({ name: branch.name || '', code: branch.code || '', short_name: branch.short_name || '', address: branch.address || '', city: branch.city || '', phone: branch.phone || '', email: branch.email || '', gst_number: branch.gst_number || '', manager_name: branch.manager_name || '', manager_phone: branch.manager_phone || '', }); setShowEditModal(true); }; const handleToggleStatus = (branch: BranchItem) => { router.post(route('admin.branches.toggle', branch.id)); }; const handleAddTerminal = (e: React.FormEvent) => { e.preventDefault(); if (!selectedBranchForTerminal) return; terminalForm.post(route('admin.branches.terminals.store', selectedBranchForTerminal.id), { onSuccess: () => { terminalForm.reset(); setSelectedBranchForTerminal(null); } }); }; return (
{/* Page Header */}

Multi-Branch Master Directory

Manage operational bakery branches, GST details, managers & POS terminals

{/* Branches Table */}
{branches.length === 0 ? ( ) : ( branches.map((branch) => ( )) )}
Branch Code Branch Details Manager & Contact Stats Status Actions

No Branches Found

Create your first branch to start selling.
{branch.code}

{branch.name}

{branch.address ? `${branch.address}${branch.city ? `, ${branch.city}` : ''}` : 'No address specified'}

{branch.manager_name ? (

{branch.manager_name}

) : (

No Manager

)}

{branch.phone || branch.manager_phone || 'No phone'}

{branch.users_count || 0} Users
{branch.pos_terminals_count || 0} POS
{branch.invoices_count || 0} Inv.
{/* CREATE BRANCH MODAL */} {showAddModal && (

Create New Bakery Branch

setData('code', 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" /> {errors.code && {errors.code}}
setData('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" /> {errors.name && {errors.name}}
setData('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 text-slate-900 dark:text-white focus:outline-none" />
setData('city', 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 text-slate-900 dark:text-white focus:outline-none" />
setData('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 text-slate-900 dark:text-white focus:outline-none" />
setData('manager_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 text-slate-900 dark:text-white focus:outline-none" />
setData('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 text-slate-900 dark:text-white focus:outline-none" />
)} {/* EDIT BRANCH MODAL */} {showEditModal && (

Edit Branch

setData('code', 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" /> {errors.code && {errors.code}}
setData('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" /> {errors.name && {errors.name}}