Standardize settings pages on shared centered card layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/components/settings/card.blade.php

@@ -0,0 +1,15 @@
+@props(['title' => null, 'description' => null])
+
+<div {{ $attributes->merge(['class' => 'rounded-xl border border-slate-200 bg-white shadow-sm']) }}>
+    @if ($title)
+        <div class="border-b border-slate-100 px-6 py-4">
+            <h2 class="text-base font-semibold text-slate-900">{{ $title }}</h2>
+            @if ($description)
+                <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
+            @endif
+        </div>
+    @endif
+    <div class="px-6 py-5">
+        {{ $slot }}
+    </div>
+</div>

resources/views/components/settings/page.blade.php

@@ -0,0 +1,11 @@
+@props(['title' => 'Settings', 'description' => null])
+
+<div {{ $attributes->merge(['class' => 'mx-auto max-w-3xl space-y-6']) }}>
+    <div>
+        <h1 class="text-2xl font-semibold text-slate-900">{{ $title }}</h1>
+        @if ($description)
+            <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
+        @endif
+    </div>
+    {{ $slot }}
+</div>

resources/views/qms/settings/edit.blade.php

@@ -1,37 +1,43 @@
 <x-app-layout title="Settings">
-    <div class="mx-auto max-w-lg">
+    <x-settings.page title="Organization settings">
-        <h1 class="text-2xl font-semibold">Organization settings</h1>
+        <form method="POST" action="{{ route('qms.settings.update') }}" class="space-y-6">
-        <form method="POST" action="{{ route('qms.settings.update') }}" class="mt-6 space-y-4 rounded-2xl border bg-white p-6 dark:border-slate-700 dark:bg-slate-900">
             @csrf @method('PUT')
-            <div><label class="block text-sm font-medium">Organization name</label>
-                <input name="name" value="{{ $organization->name }}" @disabled(! $canManage) required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-            </div>
-            <div><label class="block text-sm font-medium">Timezone</label>
-                <input name="timezone" value="{{ $organization->timezone }}" @disabled(! $canManage) required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-            </div>
-            <div><label class="block text-sm font-medium">Appointment mode</label>
-                <select name="appointment_mode" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    @foreach ($appointmentModes as $v => $l)
-                        <option value="{{ $v }}" @selected(($organization->settings['appointment_mode'] ?? 'hybrid') === $v)>{{ $l }}</option>
-                    @endforeach
-                </select>
-            </div>
-            <div><label class="block text-sm font-medium">Industry</label>
-                <select name="industry" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
-                    @foreach ($industries as $v => $l)
-                        <option value="{{ $v }}" @selected(($organization->settings['industry'] ?? '') === $v)>{{ $l }}</option>
-                    @endforeach
-                </select>
-            </div>
-            <label class="flex items-center gap-2 text-sm">
-                <input type="checkbox" name="notifications_enabled" value="1" @checked($organization->settings['notifications_enabled'] ?? true) @disabled(! $canManage)>
-                Enable SMS/email queue notifications
-            </label>
 
-            <div class="rounded-xl border border-slate-200 p-4">
+            <x-settings.card title="Organization" description="Name, timezone, appointment mode, and notification preferences.">
-                <h2 class="text-sm font-semibold text-slate-900">Sibling app integrations</h2>
+                <div class="space-y-4">
-                <p class="mt-1 text-xs text-slate-500">Allow Ladill Care and Frontdesk to manage queues in-app via the Queue API. Both apps must also enable integration in their settings.</p>
+                    <div>
-                <div class="mt-3 space-y-2">
+                        <label class="block text-sm font-medium text-slate-700">Organization name</label>
+                        <input name="name" value="{{ $organization->name }}" @disabled(! $canManage) 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">Timezone</label>
+                        <input name="timezone" value="{{ $organization->timezone }}" @disabled(! $canManage) 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">Appointment mode</label>
+                        <select name="appointment_mode" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                            @foreach ($appointmentModes as $v => $l)
+                                <option value="{{ $v }}" @selected(($organization->settings['appointment_mode'] ?? 'hybrid') === $v)>{{ $l }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-700">Industry</label>
+                        <select name="industry" @disabled(! $canManage) class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                            @foreach ($industries as $v => $l)
+                                <option value="{{ $v }}" @selected(($organization->settings['industry'] ?? '') === $v)>{{ $l }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <label class="flex items-center gap-2 text-sm">
+                        <input type="checkbox" name="notifications_enabled" value="1" @checked($organization->settings['notifications_enabled'] ?? true) @disabled(! $canManage)>
+                        Enable SMS/email queue notifications
+                    </label>
+                </div>
+            </x-settings.card>
+
+            <x-settings.card title="Integrations" description="Allow Ladill Care and Frontdesk to manage queues in-app via the Queue API. Both apps must also enable integration in their settings.">
+                <div class="space-y-2">
                     <label class="flex items-center gap-2 text-sm">
                         <input type="checkbox" name="care_integration_enabled" value="1" @checked(data_get($organization->settings, 'integrations.care_enabled')) @disabled(! $canManage)>
                         Ladill Care can manage queues
@@ -41,11 +47,15 @@
                         Ladill Frontdesk can manage queues
                     </label>
                 </div>
-            </div>
+            </x-settings.card>
+
             @if ($canManage)
-                <button type="submit" class="btn-primary w-full">Save settings</button>
+                <div class="flex justify-end">
+                    <button type="submit" class="btn-primary">Save settings</button>
+                </div>
             @endif
         </form>
-        <p class="mt-4 text-sm text-slate-600">{{ $branchCount }} branch{{ $branchCount === 1 ? '' : 'es' }} configured.</p>
+
-    </div>
+        <p class="text-sm text-slate-600">{{ $branchCount }} branch{{ $branchCount === 1 ? '' : 'es' }} configured.</p>
+    </x-settings.page>
 </x-app-layout>