root
696 lines
27 KiB
TypeScript
696 lines
27 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import { ADMIN_API_BASE } from '@/lib/api'
|
|
|
|
type EmployeeRole = 'OWNER' | 'MANAGER' | 'AGENT'
|
|
type Plan = 'STARTER' | 'GROWTH' | 'PRO'
|
|
type MenuItemType = 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
|
|
|
|
type CompanyOption = {
|
|
id: string
|
|
name: string
|
|
subscription?: { plan?: string | null } | null
|
|
status: string
|
|
}
|
|
|
|
type MenuItem = {
|
|
id: string
|
|
systemKey: string | null
|
|
label: string
|
|
itemType: MenuItemType
|
|
routeOrUrl: string | null
|
|
icon: string | null
|
|
parentId: string | null
|
|
displayOrder: number
|
|
openInNewTab: boolean
|
|
isRequired: boolean
|
|
isActive: boolean
|
|
parent?: { id: string; label: string } | null
|
|
roleVisibilities: Array<{ role: EmployeeRole }>
|
|
subscriptionAssignments: Array<{ plan: Plan; displayOrder: number; isActive: boolean }>
|
|
companyAssignments: Array<{
|
|
companyId: string
|
|
displayOrder: number
|
|
isActive: boolean
|
|
company: { id: string; name: string }
|
|
}>
|
|
}
|
|
|
|
type AuditLog = {
|
|
id: string
|
|
action: string
|
|
resource: string
|
|
resourceId: string | null
|
|
createdAt: string
|
|
adminUser: { firstName: string; lastName: string; email: string } | null
|
|
}
|
|
|
|
type PreviewItem = {
|
|
id: string
|
|
label: string
|
|
systemKey: string | null
|
|
itemType: MenuItemType
|
|
routeOrUrl: string | null
|
|
displayOrder: number
|
|
visible: boolean
|
|
source: 'subscription' | 'company' | 'none'
|
|
reasons: string[]
|
|
}
|
|
|
|
type PreviewResponse = {
|
|
company: { id: string; name: string; status: string; subscription: { plan: Plan; status: string } | null }
|
|
role: EmployeeRole
|
|
subscriptionPlan: Plan | null
|
|
items: PreviewItem[]
|
|
}
|
|
|
|
type FormState = {
|
|
label: string
|
|
systemKey: string
|
|
itemType: MenuItemType
|
|
routeOrUrl: string
|
|
icon: string
|
|
parentId: string
|
|
displayOrder: string
|
|
openInNewTab: boolean
|
|
isRequired: boolean
|
|
isActive: boolean
|
|
roles: EmployeeRole[]
|
|
plans: Plan[]
|
|
companyIds: string[]
|
|
}
|
|
|
|
const ROLES: EmployeeRole[] = ['OWNER', 'MANAGER', 'AGENT']
|
|
const PLANS: Plan[] = ['STARTER', 'GROWTH', 'PRO']
|
|
const ITEM_TYPES: MenuItemType[] = ['INTERNAL_PAGE', 'EXTERNAL_LINK', 'PARENT_MENU', 'SECTION_LABEL', 'DIVIDER']
|
|
|
|
const INPUT =
|
|
'mt-1 w-full rounded-xl border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:ring-2 focus:ring-orange-500'
|
|
const LABEL = 'text-xs font-medium uppercase tracking-wider text-zinc-500'
|
|
|
|
async function api<T>(path: string, options?: RequestInit): Promise<T> {
|
|
const res = await fetch(`${ADMIN_API_BASE}${path}`, {
|
|
...options,
|
|
credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(options?.headers ?? {}),
|
|
},
|
|
})
|
|
|
|
const json = await res.json()
|
|
if (!res.ok) throw new Error(json?.message ?? 'Request failed')
|
|
return (json?.data ?? json) as T
|
|
}
|
|
|
|
function emptyForm(): FormState {
|
|
return {
|
|
label: '',
|
|
systemKey: '',
|
|
itemType: 'INTERNAL_PAGE',
|
|
routeOrUrl: '',
|
|
icon: '',
|
|
parentId: '',
|
|
displayOrder: '0',
|
|
openInNewTab: false,
|
|
isRequired: false,
|
|
isActive: true,
|
|
roles: ['OWNER', 'MANAGER', 'AGENT'],
|
|
plans: ['STARTER', 'GROWTH', 'PRO'],
|
|
companyIds: [],
|
|
}
|
|
}
|
|
|
|
function formFromItem(item: MenuItem): FormState {
|
|
return {
|
|
label: item.label,
|
|
systemKey: item.systemKey ?? '',
|
|
itemType: item.itemType,
|
|
routeOrUrl: item.routeOrUrl ?? '',
|
|
icon: item.icon ?? '',
|
|
parentId: item.parentId ?? '',
|
|
displayOrder: String(item.displayOrder),
|
|
openInNewTab: item.openInNewTab,
|
|
isRequired: item.isRequired,
|
|
isActive: item.isActive,
|
|
roles: item.roleVisibilities.map((entry) => entry.role),
|
|
plans: item.subscriptionAssignments.map((entry) => entry.plan),
|
|
companyIds: item.companyAssignments.map((entry) => entry.companyId),
|
|
}
|
|
}
|
|
|
|
function chip(text: string, tone = 'default') {
|
|
const toneClass =
|
|
tone === 'success'
|
|
? 'bg-emerald-950/40 text-emerald-400'
|
|
: tone === 'warn'
|
|
? 'bg-orange-950/40 text-orange-400'
|
|
: 'bg-zinc-800 text-zinc-300'
|
|
|
|
return (
|
|
<span className={`inline-flex rounded-full px-2.5 py-1 text-[11px] font-medium ${toneClass}`}>
|
|
{text}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default function MenuManagementPage() {
|
|
const [items, setItems] = useState<MenuItem[]>([])
|
|
const [companies, setCompanies] = useState<CompanyOption[]>([])
|
|
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
|
|
const [preview, setPreview] = useState<PreviewResponse | null>(null)
|
|
const [previewCompanyId, setPreviewCompanyId] = useState('')
|
|
const [previewRole, setPreviewRole] = useState<EmployeeRole>('OWNER')
|
|
const [editingId, setEditingId] = useState<string | null>(null)
|
|
const [form, setForm] = useState<FormState>(emptyForm())
|
|
const [loading, setLoading] = useState(true)
|
|
const [saving, setSaving] = useState(false)
|
|
const [previewing, setPreviewing] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState<string | null>(null)
|
|
|
|
const parentOptions = useMemo(
|
|
() => items.filter((item) => item.itemType === 'PARENT_MENU' && item.id !== editingId),
|
|
[items, editingId],
|
|
)
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
setLoading(true)
|
|
setError(null)
|
|
const [menuItems, companiesPage, auditPage] = await Promise.all([
|
|
api<MenuItem[]>('/admin/menu-items'),
|
|
api<{ data: CompanyOption[] }>('/admin/companies?page=1&pageSize=100'),
|
|
api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
|
|
])
|
|
setItems(menuItems)
|
|
setCompanies(companiesPage.data)
|
|
setAuditLogs(auditPage.data)
|
|
if (!previewCompanyId && companiesPage.data[0]?.id) {
|
|
setPreviewCompanyId(companiesPage.data[0].id)
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message ?? 'Failed to load menu management data.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
load()
|
|
}, [])
|
|
|
|
function updateForm<K extends keyof FormState>(key: K, value: FormState[K]) {
|
|
setForm((prev) => ({ ...prev, [key]: value }))
|
|
}
|
|
|
|
function toggleArrayValue<K extends 'roles' | 'plans' | 'companyIds'>(key: K, value: FormState[K][number]) {
|
|
setForm((prev) => {
|
|
const values = prev[key] as string[]
|
|
return {
|
|
...prev,
|
|
[key]: values.includes(value as string)
|
|
? values.filter((entry) => entry !== value)
|
|
: [...values, value as string],
|
|
}
|
|
})
|
|
}
|
|
|
|
async function refreshLists() {
|
|
const [menuItems, auditPage] = await Promise.all([
|
|
api<MenuItem[]>('/admin/menu-items'),
|
|
api<{ data: AuditLog[] }>('/admin/menu-audit-logs?page=1&pageSize=20'),
|
|
])
|
|
setItems(menuItems)
|
|
setAuditLogs(auditPage.data)
|
|
}
|
|
|
|
async function submitForm(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
try {
|
|
setSaving(true)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const payload = {
|
|
label: form.label,
|
|
systemKey: form.systemKey || null,
|
|
itemType: form.itemType,
|
|
routeOrUrl: form.routeOrUrl || null,
|
|
icon: form.icon || null,
|
|
parentId: form.parentId || null,
|
|
displayOrder: Number(form.displayOrder || 0),
|
|
openInNewTab: form.openInNewTab,
|
|
isRequired: form.isRequired,
|
|
isActive: form.isActive,
|
|
roles: form.roles,
|
|
subscriptionPlans: form.plans.map((plan) => ({
|
|
plan,
|
|
displayOrder: Number(form.displayOrder || 0),
|
|
isActive: true,
|
|
})),
|
|
companyAssignments: form.companyIds.map((companyId) => ({
|
|
companyId,
|
|
displayOrder: Number(form.displayOrder || 0),
|
|
isActive: true,
|
|
})),
|
|
}
|
|
|
|
if (editingId) {
|
|
await api(`/admin/menu-items/${editingId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload),
|
|
})
|
|
setSuccess('Menu item updated.')
|
|
} else {
|
|
await api('/admin/menu-items', {
|
|
method: 'POST',
|
|
body: JSON.stringify(payload),
|
|
})
|
|
setSuccess('Menu item created.')
|
|
}
|
|
|
|
setEditingId(null)
|
|
setForm(emptyForm())
|
|
await refreshLists()
|
|
} catch (err: any) {
|
|
setError(err.message ?? 'Failed to save menu item.')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
function startCreate() {
|
|
setEditingId(null)
|
|
setForm(emptyForm())
|
|
setSuccess(null)
|
|
setError(null)
|
|
}
|
|
|
|
function startEdit(item: MenuItem) {
|
|
setEditingId(item.id)
|
|
setForm(formFromItem(item))
|
|
setSuccess(null)
|
|
setError(null)
|
|
}
|
|
|
|
async function toggleStatus(item: MenuItem) {
|
|
try {
|
|
setError(null)
|
|
await api(`/admin/menu-items/${item.id}/status`, {
|
|
method: 'PATCH',
|
|
body: JSON.stringify({ isActive: !item.isActive }),
|
|
})
|
|
await refreshLists()
|
|
} catch (err: any) {
|
|
setError(err.message ?? 'Failed to update status.')
|
|
}
|
|
}
|
|
|
|
async function removeItem(item: MenuItem) {
|
|
if (!window.confirm(`Delete "${item.label}"?`)) return
|
|
try {
|
|
setError(null)
|
|
await api(`/admin/menu-items/${item.id}`, { method: 'DELETE' })
|
|
if (editingId === item.id) {
|
|
setEditingId(null)
|
|
setForm(emptyForm())
|
|
}
|
|
await refreshLists()
|
|
} catch (err: any) {
|
|
setError(err.message ?? 'Failed to delete menu item.')
|
|
}
|
|
}
|
|
|
|
async function runPreview() {
|
|
if (!previewCompanyId) return
|
|
try {
|
|
setPreviewing(true)
|
|
setError(null)
|
|
const result = await api<PreviewResponse>('/admin/menu-preview', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ companyId: previewCompanyId, role: previewRole }),
|
|
})
|
|
setPreview(result)
|
|
} catch (err: any) {
|
|
setError(err.message ?? 'Failed to load menu preview.')
|
|
} finally {
|
|
setPreviewing(false)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="shell py-8">
|
|
<div className="panel p-8 text-sm text-zinc-500">
|
|
Loading menu management…
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="shell py-8 space-y-6 text-zinc-100">
|
|
<section className="panel p-8">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-orange-400">Platform</p>
|
|
<h1 className="mt-1 text-3xl font-black">Menu Management</h1>
|
|
<p className="mt-1 max-w-3xl text-sm text-zinc-400">
|
|
Control company dashboard navigation by plan, role, and company-specific exceptions from one admin surface.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={startCreate}
|
|
className="rounded-lg bg-orange-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-400"
|
|
>
|
|
Create menu item
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{(error || success) && (
|
|
<section className="space-y-3">
|
|
{error && <div className="panel p-4 text-sm text-red-400">{error}</div>}
|
|
{success && <div className="panel p-4 text-sm text-emerald-400">{success}</div>}
|
|
</section>
|
|
)}
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[1.4fr,0.95fr]">
|
|
<section className="panel overflow-hidden">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="px-5 pt-5 text-xl font-semibold text-zinc-100">Menu items</h2>
|
|
<p className="px-5 pb-1 pt-1 text-sm text-zinc-400">{items.length} configured items</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-zinc-800">
|
|
<th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Item</th>
|
|
<th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Type</th>
|
|
<th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Assignments</th>
|
|
<th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Status</th>
|
|
<th className="px-5 py-3 text-xs font-medium uppercase tracking-wider text-zinc-500">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-800/60">
|
|
{items.map((item) => (
|
|
<tr key={item.id} className="align-top transition-colors hover:bg-zinc-800/30">
|
|
<td className="px-5 py-4">
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="font-semibold text-zinc-100">{item.label}</span>
|
|
{item.isRequired && chip('Required', 'warn')}
|
|
{item.systemKey && chip(item.systemKey)}
|
|
</div>
|
|
<p className="text-xs text-zinc-500">
|
|
{item.routeOrUrl || 'No route'} • order {item.displayOrder}
|
|
{item.parent ? ` • child of ${item.parent.label}` : ''}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-4 text-xs text-zinc-300">{item.itemType}</td>
|
|
<td className="px-5 py-4">
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap gap-2">
|
|
{item.subscriptionAssignments.length > 0
|
|
? item.subscriptionAssignments.map((assignment) => (
|
|
<span key={`${item.id}-${assignment.plan}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
|
|
{assignment.plan}
|
|
</span>
|
|
))
|
|
: <span className="text-xs text-zinc-500">No plan assignments</span>}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{item.companyAssignments.slice(0, 3).map((assignment) => (
|
|
<span key={`${item.id}-${assignment.companyId}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
|
|
{assignment.company.name}
|
|
</span>
|
|
))}
|
|
{item.companyAssignments.length > 3 && chip(`+${item.companyAssignments.length - 3} more`)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{item.roleVisibilities.map((entry) => (
|
|
<span key={`${item.id}-${entry.role}`} className="inline-flex rounded-full bg-zinc-800 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
|
|
{entry.role}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
{item.isActive ? chip('Active', 'success') : chip('Inactive')}
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
<button type="button" onClick={() => startEdit(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
|
|
Edit
|
|
</button>
|
|
<button type="button" onClick={() => toggleStatus(item)} className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700">
|
|
{item.isActive ? 'Disable' : 'Enable'}
|
|
</button>
|
|
<button type="button" onClick={() => removeItem(item)} className="rounded-lg border border-red-900/60 bg-red-950/20 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-900/30">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="panel p-6">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-zinc-100">{editingId ? 'Edit menu item' : 'New menu item'}</h2>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Configure menu metadata, role visibility, plan defaults, and company-specific overrides.
|
|
</p>
|
|
</div>
|
|
{editingId && (
|
|
<button type="button" onClick={startCreate} className="text-sm font-medium text-orange-400 hover:text-orange-300">
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<form className="mt-6 space-y-5" onSubmit={submitForm}>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label>
|
|
<span className={LABEL}>Label</span>
|
|
<input className={INPUT} value={form.label} onChange={(e) => updateForm('label', e.target.value)} />
|
|
</label>
|
|
|
|
<label>
|
|
<span className={LABEL}>System key</span>
|
|
<input className={INPUT} value={form.systemKey} onChange={(e) => updateForm('systemKey', e.target.value)} placeholder="dashboard" />
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label>
|
|
<span className={LABEL}>Type</span>
|
|
<select className={INPUT} value={form.itemType} onChange={(e) => updateForm('itemType', e.target.value as MenuItemType)}>
|
|
{ITEM_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
<span className={LABEL}>Icon</span>
|
|
<input className={INPUT} value={form.icon} onChange={(e) => updateForm('icon', e.target.value)} placeholder="LayoutDashboard" />
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label>
|
|
<span className={LABEL}>Route or URL</span>
|
|
<input className={INPUT} value={form.routeOrUrl} onChange={(e) => updateForm('routeOrUrl', e.target.value)} placeholder="/reports or https://…" />
|
|
</label>
|
|
|
|
<label>
|
|
<span className={LABEL}>Parent menu</span>
|
|
<select className={INPUT} value={form.parentId} onChange={(e) => updateForm('parentId', e.target.value)}>
|
|
<option value="">No parent</option>
|
|
{parentOptions.map((item) => (
|
|
<option key={item.id} value={item.id}>{item.label}</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<label>
|
|
<span className={LABEL}>Display order</span>
|
|
<input className={INPUT} type="number" min="0" value={form.displayOrder} onChange={(e) => updateForm('displayOrder', e.target.value)} />
|
|
</label>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
|
|
<input type="checkbox" checked={form.isActive} onChange={(e) => updateForm('isActive', e.target.checked)} />
|
|
Active
|
|
</label>
|
|
<label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
|
|
<input type="checkbox" checked={form.openInNewTab} onChange={(e) => updateForm('openInNewTab', e.target.checked)} />
|
|
New tab
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
|
|
<input type="checkbox" checked={form.isRequired} onChange={(e) => updateForm('isRequired', e.target.checked)} />
|
|
Required system item
|
|
</label>
|
|
|
|
<div>
|
|
<p className={LABEL}>Role visibility</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{ROLES.map((role) => (
|
|
<label key={role} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
|
|
<input type="checkbox" checked={form.roles.includes(role)} onChange={() => toggleArrayValue('roles', role)} />
|
|
{role}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className={LABEL}>Subscription plans</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{PLANS.map((plan) => (
|
|
<label key={plan} className="flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-200">
|
|
<input type="checkbox" checked={form.plans.includes(plan)} onChange={() => toggleArrayValue('plans', plan)} />
|
|
{plan}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className={LABEL}>Company-specific assignments</p>
|
|
<div className="mt-2 max-h-56 space-y-2 overflow-y-auto rounded-2xl border border-zinc-700 bg-zinc-900/30 p-3">
|
|
{companies.map((company) => (
|
|
<label key={company.id} className="flex items-center justify-between gap-3 rounded-xl px-2 py-2 text-sm text-zinc-200 transition-colors hover:bg-zinc-800/40">
|
|
<span className="flex items-center gap-2">
|
|
<input type="checkbox" checked={form.companyIds.includes(company.id)} onChange={() => toggleArrayValue('companyIds', company.id)} />
|
|
<span>{company.name}</span>
|
|
</span>
|
|
<span className="text-xs text-zinc-500">
|
|
{company.subscription?.plan ?? 'No plan'} • {company.status}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="w-full rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-orange-400 disabled:opacity-60"
|
|
>
|
|
{saving ? 'Saving…' : editingId ? 'Update menu item' : 'Create menu item'}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[1.1fr,0.9fr]">
|
|
<section className="panel p-6">
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<div className="flex-1">
|
|
<h2 className="text-xl font-semibold text-zinc-100">Preview company menu</h2>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Test the generated menu for a company and role before troubleshooting or saving follow-up changes.
|
|
</p>
|
|
</div>
|
|
<div className="min-w-[220px]">
|
|
<label className={LABEL}>Company</label>
|
|
<select className={INPUT} value={previewCompanyId} onChange={(e) => setPreviewCompanyId(e.target.value)}>
|
|
{companies.map((company) => (
|
|
<option key={company.id} value={company.id}>{company.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="min-w-[160px]">
|
|
<label className={LABEL}>Role</label>
|
|
<select className={INPUT} value={previewRole} onChange={(e) => setPreviewRole(e.target.value as EmployeeRole)}>
|
|
{ROLES.map((role) => <option key={role} value={role}>{role}</option>)}
|
|
</select>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={runPreview}
|
|
disabled={previewing || !previewCompanyId}
|
|
className="rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-orange-400 disabled:opacity-60"
|
|
>
|
|
{previewing ? 'Previewing…' : 'Run preview'}
|
|
</button>
|
|
</div>
|
|
|
|
{preview && (
|
|
<div className="mt-6 space-y-4">
|
|
<div className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
|
|
<p className="text-sm font-semibold text-zinc-100">{preview.company.name}</p>
|
|
<p className="mt-1 text-xs text-zinc-500">
|
|
Plan: {preview.subscriptionPlan ?? 'None'} • Role: {preview.role} • Company status: {preview.company.status}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{preview.items.map((item) => (
|
|
<div key={item.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="font-semibold text-zinc-100">{item.label}</span>
|
|
{item.visible ? chip('Visible', 'success') : chip('Hidden')}
|
|
{chip(item.source === 'none' ? 'unassigned' : item.source)}
|
|
</div>
|
|
<p className="mt-1 text-xs text-zinc-500">
|
|
{item.routeOrUrl || 'No route'} • order {item.displayOrder}
|
|
</p>
|
|
<ul className="mt-3 space-y-1 text-sm text-zinc-300">
|
|
{item.reasons.map((reason, index) => (
|
|
<li key={`${item.id}-${index}`}>{reason}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="panel p-6">
|
|
<h2 className="text-xl font-semibold text-zinc-100">Recent menu audit activity</h2>
|
|
<p className="mt-1 text-sm text-zinc-400">
|
|
Recent platform-side changes to menu items and assignments.
|
|
</p>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
{auditLogs.map((entry) => (
|
|
<div key={entry.id} className="rounded-2xl border border-zinc-700 bg-zinc-900/30 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm font-semibold text-zinc-100">{entry.action}</p>
|
|
<span className="text-xs text-zinc-500">
|
|
{new Date(entry.createdAt).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<p className="mt-1 text-xs text-zinc-500">
|
|
{entry.adminUser
|
|
? `${entry.adminUser.firstName} ${entry.adminUser.lastName} • ${entry.adminUser.email}`
|
|
: 'Unknown admin'}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|