Nest Branches and Team under Settings as Pro features.

Match Frontdesk: settings cards and nested routes, Pro-gated access, and legacy /admin redirects to /settings/branches and /settings/team.
2026-07-16 09:48:32 +00:00
parent 8be3eaeb4b
commit 26c9edc131
17 changed files with 629 additions and 165 deletions
@@ -51,24 +51,19 @@
        }

        $adminNav = [];
-        if ($permissions->can($member, 'admin.branches.view')) {
-            $adminNav[] = ['name' => 'Branches', 'route' => route('qms.branches.index'), 'active' => request()->routeIs('qms.branches.*'),
-             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m-1.5 3h1.5m3-9H15m-1.5 3H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />'];
-        }
        if ($permissions->can($member, 'admin.departments.view')) {
            $adminNav[] = ['name' => 'Departments', 'route' => route('qms.departments.index'), 'active' => request()->routeIs('qms.departments.*'),
             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />'];
        }
-        if ($permissions->can($member, 'admin.members.view')) {
-            $adminNav[] = ['name' => 'Team', 'route' => route('qms.members.index'), 'active' => request()->routeIs('qms.members.*'),
-             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />'];
-        }
        if ($permissions->can($member, 'audit.view')) {
            $adminNav[] = ['name' => 'Audit log', 'route' => route('qms.audit.index'), 'active' => request()->routeIs('qms.audit.*'),
             'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />'];
        }

-        $settingsActive = request()->routeIs('qms.settings.*') && ! request()->routeIs('qms.pro.*');
+        $settingsActive = (request()->routeIs('qms.settings.*')
+            || request()->routeIs('qms.branches.*')
+            || request()->routeIs('qms.members.*'))
+            && ! request()->routeIs('qms.pro.*');
    @endphp
    <nav class="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
        @foreach ($nav as $item)
@@ -1,13 +1,39 @@
-<x-app-layout title="New branch">
-    <div class="mx-auto max-w-lg">
-        <h1 class="text-2xl font-semibold">New branch</h1>
-        <form method="POST" action="{{ route('qms.branches.store') }}" class="mt-6 space-y-4 rounded-2xl bg-white p-6 shadow-sm">
-            @csrf
-            <div><label class="block text-sm font-medium">Name</label><input name="name" required class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Code</label><input name="code" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Address</label><input name="address" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Phone</label><input name="phone" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <button type="submit" class="btn-primary w-full">Create branch</button>
-        </form>
-    </div>
+<x-app-layout title="Add branch">
+    <x-settings.page title="Add branch" description="Create a new location for queues, counters, and staff.">
+        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
+            <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+            <span class="text-slate-300">/</span>
+            <a href="{{ route('qms.branches.index') }}" class="text-slate-500 hover:text-slate-800">Branches</a>
+            <span class="text-slate-300">/</span>
+            <span class="font-medium text-slate-900">Add</span>
+        </div>
+
+        @include('partials.flash')
+
+        <x-settings.card title="Branch details">
+            <form method="POST" action="{{ route('qms.branches.store') }}" class="space-y-4">
+                @csrf
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Name</label>
+                    <input type="text" name="name" value="{{ old('name') }}" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Code</label>
+                    <input type="text" name="code" value="{{ old('code') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Address</label>
+                    <input type="text" name="address" value="{{ old('address') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Phone</label>
+                    <input type="tel" name="phone" value="{{ old('phone') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div class="flex justify-end gap-3">
+                    <a href="{{ route('qms.branches.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
+                    <button type="submit" class="btn-primary">Save</button>
+                </div>
+            </form>
+        </x-settings.card>
+    </x-settings.page>
 </x-app-layout>
@@ -1,14 +1,43 @@
 <x-app-layout title="Edit branch">
-    <div class="mx-auto max-w-lg">
-        <h1 class="text-2xl font-semibold">Edit branch</h1>
-        <form method="POST" action="{{ route('qms.branches.update', $branch) }}" class="mt-6 space-y-4 rounded-2xl bg-white p-6 shadow-sm">
-            @csrf @method('PUT')
-            <div><label class="block text-sm font-medium">Name</label><input name="name" value="{{ $branch->name }}" required class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Code</label><input name="code" value="{{ $branch->code }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Address</label><input name="address" value="{{ $branch->address }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <div><label class="block text-sm font-medium">Phone</label><input name="phone" value="{{ $branch->phone }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm"></div>
-            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" @checked($branch->is_active)> Active</label>
-            <button type="submit" class="btn-primary w-full">Save changes</button>
-        </form>
-    </div>
+    <x-settings.page title="Edit branch" description="Update location details for queues, counters, and staff.">
+        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
+            <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+            <span class="text-slate-300">/</span>
+            <a href="{{ route('qms.branches.index') }}" class="text-slate-500 hover:text-slate-800">Branches</a>
+            <span class="text-slate-300">/</span>
+            <span class="font-medium text-slate-900">{{ $branch->name }}</span>
+        </div>
+
+        @include('partials.flash')
+
+        <x-settings.card title="Branch details">
+            <form method="POST" action="{{ route('qms.branches.update', $branch) }}" class="space-y-4">
+                @csrf @method('PUT')
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Name</label>
+                    <input type="text" name="name" value="{{ old('name', $branch->name) }}" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Code</label>
+                    <input type="text" name="code" value="{{ old('code', $branch->code) }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Address</label>
+                    <input type="text" name="address" value="{{ old('address', $branch->address) }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Phone</label>
+                    <input type="tel" name="phone" value="{{ old('phone', $branch->phone) }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                </div>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $branch->is_active))>
+                    Active
+                </label>
+                <div class="flex justify-end gap-3">
+                    <a href="{{ route('qms.branches.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
+                    <button type="submit" class="btn-primary">Save changes</button>
+                </div>
+            </form>
+        </x-settings.card>
+    </x-settings.page>
 </x-app-layout>
@@ -3,38 +3,48 @@
        app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
        'admin.branches.manage'
    );
+    $canViewTeam = app(\App\Services\Qms\QmsPermissions::class)->can(
+        app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
+        'admin.members.view'
+    );
@endphp

 <x-app-layout title="Branches">
-    <div class="mb-6 flex items-center justify-between">
-        <h1 class="text-2xl font-semibold text-slate-900">Branches</h1>
-        @if ($canManageBranches)
-            <a href="{{ route('qms.branches.create') }}" class="btn-primary">New branch</a>
-        @endif
-    </div>
+    <x-settings.page title="Branches" description="Organize locations and sites so queues, counters, and staff stay scoped to the right branch.">
+        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center gap-2 text-sm">
+                <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+                <span class="text-slate-300">/</span>
+                <span class="font-medium text-slate-900">Branches</span>
+                @if ($canViewTeam)
+                    <a href="{{ route('qms.members.index') }}" class="ml-3 text-indigo-600 hover:text-indigo-800">Team</a>
+                @endif
+            </div>
+            @if ($canManageBranches)
+                <a href="{{ route('qms.branches.create') }}" class="btn-primary">Add branch</a>
+            @endif
+        </div>

-    @include('partials.flash')
+        @include('partials.flash')

-    <div class="overflow-hidden rounded-2xl bg-white shadow-sm">
-        <table class="min-w-full divide-y divide-slate-200">
-            <thead class="bg-slate-50"><tr>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Name</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Code</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Departments</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
-                <th></th>
-            </tr></thead>
-            <tbody class="divide-y divide-slate-200">
-                @foreach ($branches as $branch)
-                    <tr>
-                        <td class="px-4 py-3 text-sm font-medium">{{ $branch->name }}</td>
-                        <td class="px-4 py-3 text-sm">{{ $branch->code ?? '—' }}</td>
-                        <td class="px-4 py-3 text-sm">{{ $branch->departments_count }}</td>
-                        <td class="px-4 py-3 text-sm">{{ $branch->is_active ? 'Active' : 'Inactive' }}</td>
-                        <td class="px-4 py-3 text-right"><a href="{{ route('qms.branches.edit', $branch) }}" class="text-sm text-indigo-600">Edit</a></td>
-                    </tr>
-                @endforeach
-            </tbody>
-        </table>
-    </div>
+        <x-settings.card title="All branches" description="{{ number_format($heroStats['total']) }} total · {{ number_format($heroStats['active']) }} active · {{ number_format($heroStats['departments']) }} department(s)">
+            @forelse ($branches as $branch)
+                <div class="flex items-center justify-between gap-4 border-b border-slate-50 py-3 last:border-b-0">
+                    <div>
+                        <p class="font-medium text-slate-900">{{ $branch->name }}</p>
+                        <p class="text-sm text-slate-500">
+                            {{ $branch->code ?? 'No code' }}
+                            · {{ $branch->departments_count }} department(s)
+                            · {{ $branch->is_active ? 'Active' : 'Inactive' }}
+                        </p>
+                    </div>
+                    @if ($canManageBranches)
+                        <a href="{{ route('qms.branches.edit', $branch) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Edit</a>
+                    @endif
+                </div>
+            @empty
+                <p class="text-sm text-slate-500">No branches yet.</p>
+            @endforelse
+        </x-settings.card>
+    </x-settings.page>
 </x-app-layout>
@@ -1,52 +1,66 @@
 <x-app-layout title="Add member">
-    <div class="mx-auto max-w-lg">
-        <h1 class="text-xl font-semibold text-slate-900">Invite team member</h1>
+    <x-settings.page title="Invite team member" description="They get access only to Ladill Queue (plus Mail if they already have a Ladill mailbox).">
+        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
+            <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+            <span class="text-slate-300">/</span>
+            <a href="{{ route('qms.members.index') }}" class="text-slate-500 hover:text-slate-800">Team</a>
+            <span class="text-slate-300">/</span>
+            <span class="font-medium text-slate-900">Invite</span>
+        </div>

-        <form method="POST" x-data action="{{ route('qms.members.store') }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
-            @csrf
+        <x-settings.card title="Invitation">
+            <form method="POST" action="{{ route('qms.members.store') }}" class="space-y-4" x-data>
+                @csrf
+
+                @if (! empty($mailboxOptions))
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700">From a Ladill mailbox</label>
+                        <select x-on:change="if ($event.target.value) { $refs.email.value = $event.target.value }"
+                                class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                            <option value="">Choose a mailbox…</option>
+                            @foreach ($mailboxOptions as $address)
+                                <option value="{{ $address }}">{{ $address }}</option>
+                            @endforeach
+                        </select>
+                        <p class="mt-1 text-xs text-slate-500">Or type any email below.</p>
+                    </div>
+                @endif

-            @if (! empty($mailboxOptions))
                <div>
-                    <label class="block text-sm font-medium text-slate-700">From a Ladill mailbox</label>
-                    <select x-on:change="if ($event.target.value) { $refs.email.value = $event.target.value }"
-                            class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                        <option value="">Choose a mailbox…</option>
-                        @foreach ($mailboxOptions as $address)
-                            <option value="{{ $address }}">{{ $address }}</option>
+                    <label class="block text-sm font-medium text-slate-700">Email address</label>
+                    <input type="email" name="email" x-ref="email" value="{{ old('email') }}" required
+                           class="mt-1 w-full rounded-lg border-slate-300 text-sm"
+                           placeholder="colleague@company.com">
+                    <p class="mt-1 text-xs text-slate-500">They will receive an email to accept and join your Queue organization.</p>
+                    @error('email')
+                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
+                    @enderror
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Role</label>
+                    <select name="role" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                        @foreach ($roles as $v => $l)
+                            <option value="{{ $v }}" @selected(old('role') === $v)>{{ $l }}</option>
                        @endforeach
                    </select>
-                    <p class="mt-1 text-xs text-slate-500">Or type any email below.</p>
                </div>
-            @endif

-            <div>
-                <label class="block text-sm font-medium text-slate-700">Email address</label>
-                <input type="email" name="email" x-ref="email" value="{{ old('email') }}" required
-                       class="mt-1 w-full rounded-lg border-slate-300 text-sm"
-                       placeholder="colleague@company.com">
-                <p class="mt-1 text-xs text-slate-500">They will receive an email to accept and join your Queue organization.</p>
-            </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700">Branch scope (optional)</label>
+                    <select name="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                        <option value="">Organization-wide</option>
+                        @foreach ($branches as $b)
+                            <option value="{{ $b->id }}" @selected(old('branch_id') == $b->id)>{{ $b->name }}</option>
+                        @endforeach
+                    </select>
+                </div>

-            <div>
-                <label class="block text-sm font-medium text-slate-700">Role</label>
-                <select name="role" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    @foreach ($roles as $v => $l)
-                        <option value="{{ $v }}" @selected(old('role') === $v)>{{ $l }}</option>
-                    @endforeach
-                </select>
-            </div>
-
-            <div>
-                <label class="block text-sm font-medium text-slate-700">Branch scope (optional)</label>
-                <select name="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    <option value="">Organization-wide</option>
-                    @foreach ($branches as $b)
-                        <option value="{{ $b->id }}" @selected(old('branch_id') == $b->id)>{{ $b->name }}</option>
-                    @endforeach
-                </select>
-            </div>
-
-            <button type="submit" class="btn-primary w-full">Send invitation</button>
-        </form>
-    </div>
+                <div class="flex justify-end gap-3">
+                    <a href="{{ route('qms.members.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
+                    <button type="submit" class="btn-primary">Send invitation</button>
+                </div>
+            </form>
+        </x-settings.card>
+    </x-settings.page>
 </x-app-layout>
@@ -3,56 +3,69 @@
        app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
        'admin.members.manage'
    );
+    $canViewBranches = app(\App\Services\Qms\QmsPermissions::class)->can(
+        app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
+        'admin.branches.view'
+    );
@endphp

 <x-app-layout title="Team">
-    <div class="space-y-6">
-        <x-qms.page-hero
-            badge="Roles · Access · Branch assignment"
-            title="Team"
-            description="Manage who can access Queue, their roles, and which branch each operator or admin belongs to."
-            :stats="[
-                ['value' => number_format($heroStats['total']), 'label' => 'Members'],
-                ['value' => number_format($heroStats['operators']), 'label' => 'Operators'],
-                ['value' => number_format($heroStats['branches']), 'label' => 'Branches staffed'],
-            ]">
+    <x-settings.page title="Team" description="Manage who can access Queue, their roles, and which branch each member belongs to.">
+        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex flex-wrap items-center gap-2 text-sm">
+                <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+                <span class="text-slate-300">/</span>
+                <span class="font-medium text-slate-900">Team</span>
+                @if ($canViewBranches)
+                    <a href="{{ route('qms.branches.index') }}" class="ml-3 text-indigo-600 hover:text-indigo-800">Branches</a>
+                @endif
+            </div>
            @if ($canManageMembers)
-                <x-slot name="actions">
-                    <a href="{{ route('qms.members.create') }}" class="btn-primary">Add member</a>
-                </x-slot>
+                <a href="{{ route('qms.members.create') }}" class="btn-primary">Add member</a>
            @endif
-        </x-qms.page-hero>
+        </div>

        @include('partials.flash')

-        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
-            <table class="min-w-full divide-y divide-slate-200">
-                <thead class="bg-slate-50"><tr>
-                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Member</th>
-                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Role</th>
-                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Branch</th>
-                    <th></th>
-                </tr></thead>
-                <tbody class="divide-y divide-slate-200">
-                    @foreach ($members as $member)
-                        @php
-                            $display = str_contains($member->user_ref, '@')
-                                ? $member->user_ref
-                                : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
-                        @endphp
-                        <tr>
-                            <td class="px-4 py-3 text-sm">{{ $display }}</td>
-                            <td class="px-4 py-3 text-sm">{{ $roles[$member->role] ?? $member->role }}</td>
-                            <td class="px-4 py-3 text-sm">{{ $member->branch?->name ?? 'All' }}</td>
-                            <td class="px-4 py-3 text-right">
-                                @if ($member->user_ref !== auth()->user()->public_id)
-                                    <form method="POST" action="{{ route('qms.members.destroy', $member) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm">Remove</x-btn></form>
-                                @endif
-                            </td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </table>
-        </div>
-    </div>
+        <x-settings.card title="Team members" description="{{ number_format($heroStats['total']) }} members · {{ number_format($heroStats['operators']) }} operators · {{ number_format($heroStats['branches']) }} branches staffed">
+            @if ($members->isEmpty())
+                <p class="text-sm text-slate-500">No team members yet.</p>
+            @else
+                <div class="overflow-x-auto">
+                    <table class="min-w-full text-sm">
+                        <thead class="text-left text-xs uppercase text-slate-500">
+                            <tr>
+                                <th class="pb-2 pr-4">Member</th>
+                                <th class="pb-2 pr-4">Role</th>
+                                <th class="pb-2 pr-4">Branch</th>
+                                <th class="pb-2"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-100">
+                            @foreach ($members as $member)
+                                @php
+                                    $display = str_contains($member->user_ref, '@')
+                                        ? $member->user_ref
+                                        : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
+                                @endphp
+                                <tr>
+                                    <td class="py-3 pr-4">{{ $display }}</td>
+                                    <td class="py-3 pr-4">{{ $roles[$member->role] ?? $member->role }}</td>
+                                    <td class="py-3 pr-4">{{ $member->branch?->name ?? 'All branches' }}</td>
+                                    <td class="py-3 text-right">
+                                        @if ($canManageMembers && $member->user_ref !== auth()->user()->public_id)
+                                            <form method="POST" action="{{ route('qms.members.destroy', $member) }}" class="inline">
+                                                @csrf @method('DELETE')
+                                                <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-800">Remove</button>
+                                            </form>
+                                        @endif
+                                    </td>
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            @endif
+        </x-settings.card>
+    </x-settings.page>
 </x-app-layout>
@@ -94,6 +94,8 @@
                    = {{ $currency }} <span x-text="fmt(proTotal())"></span>/mo
                </p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
+                    <li>Multi-branch locations</li>
+                    <li>Team roles & invitations</li>
                    <li>Advanced routing rules</li>
                    <li>Unlimited kiosks & displays</li>
                    <li>Ladill-provided queue kiosk, display and audio system</li>
@@ -1,5 +1,63 @@
 <x-app-layout title="Settings">
-    <x-settings.page title="Organization settings">
+    <x-settings.page title="Organization settings" description="Configure branding, queue preferences, and access for {{ $organization->name }}.">
+        @if ($canManage)
+            <x-settings.card title="Plan & usage" description="Subscription limits for {{ $organization->name }}.">
+                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                    <p class="text-sm leading-6 text-slate-600">
+                        @if ($isEnterprise)
+                            <span class="font-medium text-indigo-700">Enterprise</span> — unlimited branches, full API, advanced analytics, billed per branch.
+                        @elseif ($hasPaidPlan)
+                            <span class="font-medium text-indigo-700">Pro</span> — multi-branch, team roles, advanced routing, and Ladill-provided kiosk hardware, billed per branch.
+                        @else
+                            <span class="font-medium text-slate-900">Free</span> — one branch, five queues, owner-only access. Multi-branch and team require Pro.
+                        @endif
+                    </p>
+                    @if (! $hasPaidPlan)
+                        <a href="{{ route('qms.pro.index') }}" class="btn-primary shrink-0 text-sm">Upgrade to Pro (GHS {{ number_format($proPriceMinor / 100, 0) }}/branch/mo)</a>
+                    @else
+                        <a href="{{ route('qms.pro.index') }}" class="btn-secondary shrink-0 text-sm">Manage plan</a>
+                    @endif
+                </div>
+            </x-settings.card>
+        @endif
+
+        @if ($canViewBranches || $canViewTeam)
+            <x-settings.card title="Branches & team" description="Locations and staff access for this organization. Multi-branch and team require Queue Pro.">
+                <ul class="space-y-3">
+                    @if ($canViewBranches)
+                        <li>
+                            <a href="{{ route('qms.branches.index') }}"
+                               class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-3 text-sm text-slate-700 hover:text-indigo-700">
+                                <span>
+                                    Branches
+                                    @if (! $hasBranchesFeature)
+                                        <span class="ml-2 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">Pro</span>
+                                    @endif
+                                    <span class="mt-0.5 block text-xs text-slate-500">Locations and sites for queues and counters</span>
+                                </span>
+                                <span class="text-slate-400">&rarr;</span>
+                            </a>
+                        </li>
+                    @endif
+                    @if ($canViewTeam)
+                        <li>
+                            <a href="{{ route('qms.members.index') }}"
+                               class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-3 text-sm text-slate-700 hover:text-indigo-700">
+                                <span>
+                                    Team
+                                    @if (! $hasTeamFeature)
+                                        <span class="ml-2 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">Pro</span>
+                                    @endif
+                                    <span class="mt-0.5 block text-xs text-slate-500">Invite colleagues and assign Queue roles</span>
+                                </span>
+                                <span class="text-slate-400">&rarr;</span>
+                            </a>
+                        </li>
+                    @endif
+                </ul>
+            </x-settings.card>
+        @endif
+
        <form method="POST" action="{{ route('qms.settings.update') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf @method('PUT')

@@ -72,7 +130,5 @@
                </div>
            @endif
        </form>
-
-        <p class="text-sm text-slate-600">{{ $branchCount }} branch{{ $branchCount === 1 ? '' : 'es' }} configured.</p>
    </x-settings.page>
 </x-app-layout>
@@ -0,0 +1,20 @@
+<x-app-layout :title="$title">
+    <x-settings.page :title="$title" :description="$description">
+        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
+            <a href="{{ route('qms.settings.edit') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
+            <span class="text-slate-300">/</span>
+            <span class="font-medium text-slate-900">{{ $title }}</span>
+        </div>
+
+        <x-settings.card title="Upgrade your plan">
+            <p class="text-sm text-slate-600">
+                GHS {{ number_format($proPriceMinor / 100, 0) }} / branch / month for Pro from your Ladill wallet —
+                multi-branch locations, team roles, advanced routing, and Ladill-provided kiosk hardware.
+            </p>
+            <div class="mt-4 flex flex-wrap items-center gap-3">
+                <a href="{{ route('qms.pro.index') }}" class="btn-primary">View plans</a>
+                <a href="{{ route('qms.wallet') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Top up</a>
+            </div>
+        </x-settings.card>
+    </x-settings.page>
+</x-app-layout>