import React, { useState, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Branch, Role, User } from '@/types'; import { UserCheck, Plus, Edit3, X } from '@/Components/AnimatedIcons'; interface Props { users: { data: User[]; }; roles: Role[]; branches: Branch[]; } export default function UsersIndex({ users, roles, branches }: Props) { const [showModal, setShowModal] = useState(false); const [editingUser, setEditingUser] = useState(null); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [roleId, setRoleId] = useState(roles[0]?.id || 1); const [branchId, setBranchId] = useState(branches[0]?.id || 1); 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 openCreateModal = () => { setEditingUser(null); setName(''); setEmail(''); setPassword(''); setRoleId(roles[0]?.id || 1); setBranchId(branches[0]?.id || 1); setShowModal(true); }; const openEditModal = (u: User) => { setEditingUser(u); setName(u.name); setEmail(u.email); setPassword(''); setRoleId(u.role_id || roles[0]?.id || 1); setBranchId(u.branch_id || branches[0]?.id || 1); setShowModal(true); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const payload = { name, email, password, role_id: roleId, branch_id: branchId, }; if (editingUser) { router.put(route('admin.users.update', editingUser.id), payload, { onSuccess: () => setShowModal(false), }); } else { router.post(route('admin.users.store'), payload, { onSuccess: () => setShowModal(false), }); } }; return (

Staff Users & RBAC Management

Assign roles (Owner/Admin vs Cashier) and branch permissions to staff

{users.data.map((u) => ( ))}
Staff Name Email Address Assigned Role Assigned Branch Status Actions
{u.name} {u.email} {u.role?.label || 'Staff'} {u.branch?.name || 'Central'} Active
{showModal && (

{editingUser ? 'Edit Staff Account' : 'Create Staff Account'}

setName(e.target.value)} placeholder="Staff Name" 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 />
setEmail(e.target.value)} placeholder="email@cakesandcandles.com" 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 />
setPassword(e.target.value)} placeholder="••••••••" 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={!editingUser} />
)} ); }