// csr-settings.jsx — console settings: users & permission levels, and service agents. const { useState: useStateSet } = React; const AU_STATES = ["NSW", "VIC", "QLD", "WA", "SA", "ACT", "TAS", "NT"]; const ROLE_TONE = { admin: "brand", operator: "success", dispatch: "warn", finance: "neutral", readonly: "neutral" }; const TYPE_TONE = { brand: { bg: "var(--brand-soft)", fg: "var(--brand)" }, accent: { bg: "var(--accent-soft)", fg: "var(--accent-700)" }, warn: { bg: "var(--warn-soft)", fg: "#a36a00" }, danger: { bg: "var(--danger-soft, #fdeaea)", fg: "var(--danger)" }, }; function allWorkTypeIds() { return (window.FX.BOOKING_TYPES || []).map(t => t.id); } function userWorkTypeIds(u) { return Array.isArray(u.workTypes) ? u.workTypes : allWorkTypeIds(); } function isAllWorkTypes(list) { const all = allWorkTypeIds(); return all.length > 0 && all.every(id => list.includes(id)); } function WorkTypeSummary({ ids }) { const types = window.FX.BOOKING_TYPES || []; if (isAllWorkTypes(ids)) return All work types; const shorts = ids.map(id => (types.find(t => t.id === id) || {}).short).filter(Boolean); if (shorts.length === 0) return No access; const show = shorts.slice(0, 2); return (
{show.map(s => {s})} {shorts.length > 2 && +{shorts.length - 2}}
); } function WorkTypeChecklist({ value, onChange }) { const types = window.FX.BOOKING_TYPES || []; const allIds = types.map(t => t.id); const all = isAllWorkTypes(value); const toggle = id => onChange(value.includes(id) ? value.filter(x => x !== id) : [...value, id]); const box = on => {on && }; return (
{types.map((t, i) => { const on = value.includes(t.id); const tone = TYPE_TONE[t.tone] || TYPE_TONE.brand; return ( ); })}
); } function SettingsTabs({ tab, setTab }) { const tabs = [["users", "Users & permissions", "users"], ["agents", "Service agents", "shield"], ["rules", "Booking rules", "package"], ["announce", "Announcements", "megaphone"]]; return (
{tabs.map(([k, lbl, ic]) => ( ))}
); } /* ---------------- Users & permissions ---------------- */ function RoleLegend({ roles }) { return (
{roles.map(r => (
{r.label}
{r.desc}
{r.access.map(a => {a})}
))}
); } function UsersPanel({ users, roles, onSaveUser, onDeleteUser, onAdd, onEdit }) { const GRID = "1.25fr 0.9fr 1fr 0.62fr 0.6fr 0.55fr"; const stationLabel = st => (!st || st === "all") ? null : (window.FX.AIRPORTS[st] ? window.FX.AIRPORTS[st].code + " · " + window.FX.AIRPORTS[st].city : st); return (
Permission levels
Users · {users.length}
UserPermission levelWork visibleStationStatusActions
{users.map((u, i) => { const role = window.FX.roleById(u.roleId); return (
{u.name.split(/\s+/).map(w => w[0]).slice(0, 2).join("").toUpperCase()}
{u.name}
{u.email}
({ value: r.id, label: r.label }))} />
{window.FX.roleById(roleId).desc}
a.findIndex(x => x.tz === z.tz) === i).map(z => ({ value: z.tz, label: z.city + " · " + z.abbr }))} />
); } function AgentModal({ open, onClose, seed, onSave }) { const [name, setName] = useStateSet(""); const [city, setCity] = useStateSet(""); const [email, setEmail] = useStateSet(""); const [areas, setAreas] = useStateSet([]); const [contacts, setContacts] = useStateSet([{ name: "", phone: "" }]); const [notes, setNotes] = useStateSet(""); React.useEffect(() => { if (open) { setName(seed ? seed.name : ""); setCity(seed ? seed.city : ""); setEmail(seed ? seed.email : ""); setAreas(seed ? (seed.serviceAreas || (seed.state ? [seed.state] : [])) : ["VIC"]); setContacts(seed ? (seed.contacts && seed.contacts.length ? seed.contacts.map(c => ({ name: c.name || "", phone: c.phone || "" })) : [{ name: seed.contact || "", phone: seed.phone || "" }]) : [{ name: "", phone: "" }]); setNotes(seed ? (seed.notes || "") : ""); } }, [open, seed]); const cityByState = { NSW: "Sydney", VIC: "Melbourne", QLD: "Brisbane", WA: "Perth", SA: "Adelaide", ACT: "Canberra", TAS: "Hobart", NT: "Darwin" }; const toggleArea = s => setAreas(prev => prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]); const setContact = (i, k, v) => setContacts(prev => prev.map((c, idx) => idx === i ? { ...c, [k]: v } : c)); const addContact = () => setContacts(prev => [...prev, { name: "", phone: "" }]); const rmContact = (i) => setContacts(prev => prev.length > 1 ? prev.filter((_, idx) => idx !== i) : prev); const validEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim()); const ok = name.trim() && validEmail && city.trim() && areas.length > 0; function save() { const cleanContacts = contacts.map(c => ({ name: c.name.trim(), phone: c.phone.trim() })).filter(c => c.name || c.phone); const primary = cleanContacts[0] || { name: "", phone: "" }; onSave({ id: seed ? seed.id : "sa" + Date.now(), name: name.trim(), city: city.trim(), email: email.trim(), serviceAreas: areas, state: areas[0], contacts: cleanContacts, contact: primary.name, phone: primary.phone, notes: notes.trim(), active: seed ? seed.active : true, }); } return (
{AU_STATES.map(s => { const on = areas.includes(s); const idx = areas.indexOf(s); return ( ); })}
Contact people
{contacts.map((c, i) => (
setContact(i, "name", v)} placeholder={i === 0 ? "Contact name" : "Another contact"} /> setContact(i, "phone", v)} placeholder="+61 4XX XXX XXX" mono /> {contacts.length > 1 ? : }
))}
A mobile on the first contact triggers an SMS on allocation.