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.

resources/views/qms/admin/branches/create.blade.php

@@ -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>

resources/views/qms/admin/branches/edit.blade.php

@@ -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>

resources/views/qms/admin/branches/index.blade.php

@@ -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>