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/pos/settings.blade.php

@@ -1,14 +1,9 @@
 <x-app-layout title="Settings">
-    <div class="mx-auto max-w-2xl space-y-6">
-        <div>
-            <h1 class="text-lg font-semibold text-slate-900">Settings</h1>
-            <p class="mt-1 text-sm text-slate-500">Register location, receipt footer, and catalog imports.</p>
-        </div>
-
-        <form method="POST" action="{{ route('pos.settings.update') }}" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
+    <x-settings.page description="Register location, receipt footer, and catalog imports.">
+        <x-settings.card title="Location" description="Register name, currency, service style, and receipt footer.">
+            <form method="POST" action="{{ route('pos.settings.update') }}" class="space-y-4">
                 @csrf
                 @method('PUT')
-            <h2 class="text-sm font-semibold text-slate-900">Location</h2>
                 <div>
                     <label for="name" class="text-sm font-medium text-slate-700">Register name</label>
                     <input type="text" id="name" name="name" value="{{ old('name', $location->name) }}" required
@@ -37,12 +32,11 @@
                     <button type="submit" class="btn-primary">Save settings</button>
                 </div>
             </form>
+        </x-settings.card>
 
         @if ($location->isRestaurant())
-        <section class="rounded-2xl border border-slate-200 bg-white p-6">
-            <h2 class="text-sm font-semibold text-slate-900">Import catalog</h2>
-            <p class="mt-1 text-sm text-slate-500">Seed your local POS catalog from CRM or Merchant storefronts. (Retail mode reads products live from CRM, so no import is needed.)</p>
-            <div class="mt-4 flex flex-wrap gap-3">
+            <x-settings.card title="Import catalog" description="Seed your local POS catalog from CRM or Merchant storefronts. (Retail mode reads products live from CRM, so no import is needed.)">
+                <div class="flex flex-wrap gap-3">
                     <form method="POST" action="{{ route('pos.settings.import-crm') }}">
                         @csrf
                         <button type="submit" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
@@ -58,15 +52,10 @@
                         </form>
                     @endif
                 </div>
-        </section>
-        @endif
+            </x-settings.card>
 
-        @if ($location->isRestaurant())
-            <section class="rounded-2xl border border-slate-200 bg-white p-6">
-                <h2 class="text-sm font-semibold text-slate-900">Tables</h2>
-                <p class="mt-1 text-sm text-slate-500">Dine-in tables shown on the Floor screen.</p>
-
-                <form method="POST" action="{{ route('pos.settings.tables.store') }}" class="mt-4 grid gap-2 sm:grid-cols-[1fr_1fr_5rem_auto]">
+            <x-settings.card title="Tables" description="Dine-in tables shown on the Floor screen.">
+                <form method="POST" action="{{ route('pos.settings.tables.store') }}" class="grid gap-2 sm:grid-cols-[1fr_1fr_5rem_auto]">
                     @csrf
                     <input type="text" name="area" placeholder="Area (e.g. Patio)"
                            class="rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
@@ -98,7 +87,7 @@
                         @endforeach
                     </ul>
                 @endif
-            </section>
+            </x-settings.card>
         @endif
-    </div>
+    </x-settings.page>
 </x-app-layout>