From ac5e513dd26f0dac1581ff6a5fe867915376f5d1 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sun, 5 Jul 2026 21:11:48 +0000
Subject: [PATCH] Standardize settings pages on shared centered card layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/components/settings/card.blade.php  |  15 +++
 .../views/components/settings/page.blade.php  |  11 ++
 resources/views/pos/settings.blade.php        | 115 ++++++++----------
 3 files changed, 78 insertions(+), 63 deletions(-)
 create mode 100644 resources/views/components/settings/card.blade.php
 create mode 100644 resources/views/components/settings/page.blade.php

diff --git a/resources/views/components/settings/card.blade.php b/resources/views/components/settings/card.blade.php
new file mode 100644
index 0000000..939f318
--- /dev/null
+++ b/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>
diff --git a/resources/views/components/settings/page.blade.php b/resources/views/components/settings/page.blade.php
new file mode 100644
index 0000000..3bc11e8
--- /dev/null
+++ b/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>
diff --git a/resources/views/pos/settings.blade.php b/resources/views/pos/settings.blade.php
index 17c002e..1068800 100644
--- a/resources/views/pos/settings.blade.php
+++ b/resources/views/pos/settings.blade.php
@@ -1,72 +1,61 @@
 <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">
-            @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
-                       class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
-            </div>
-            <div>
-                <label for="currency" class="text-sm font-medium text-slate-700">Currency</label>
-                <input type="text" id="currency" name="currency" value="{{ old('currency', $location->currency) }}" maxlength="3" required
-                       class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm uppercase shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
-            </div>
-            <div>
-                <label for="service_style" class="text-sm font-medium text-slate-700">Service style</label>
-                <select id="service_style" name="service_style"
-                        class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
-                    <option value="retail" @selected(old('service_style', $location->service_style) === 'retail')>Retail — quick register checkout</option>
-                    <option value="restaurant" @selected(old('service_style', $location->service_style) === 'restaurant')>Restaurant / café — tables, tabs & kitchen display</option>
-                </select>
-                <p class="mt-1 text-xs text-slate-400">Restaurant mode adds the Floor and Kitchen screens to the sidebar.</p>
-            </div>
-            <div>
-                <label for="receipt_footer" class="text-sm font-medium text-slate-700">Receipt footer</label>
-                <textarea id="receipt_footer" name="receipt_footer" rows="3"
-                          class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('receipt_footer', $location->receipt_footer) }}</textarea>
-            </div>
-            <div class="flex justify-end">
-                <button type="submit" class="btn-primary">Save settings</button>
-            </div>
-        </form>
+    <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')
+                <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
+                           class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                </div>
+                <div>
+                    <label for="currency" class="text-sm font-medium text-slate-700">Currency</label>
+                    <input type="text" id="currency" name="currency" value="{{ old('currency', $location->currency) }}" maxlength="3" required
+                           class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm uppercase shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                </div>
+                <div>
+                    <label for="service_style" class="text-sm font-medium text-slate-700">Service style</label>
+                    <select id="service_style" name="service_style"
+                            class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                        <option value="retail" @selected(old('service_style', $location->service_style) === 'retail')>Retail — quick register checkout</option>
+                        <option value="restaurant" @selected(old('service_style', $location->service_style) === 'restaurant')>Restaurant / café — tables, tabs & kitchen display</option>
+                    </select>
+                    <p class="mt-1 text-xs text-slate-400">Restaurant mode adds the Floor and Kitchen screens to the sidebar.</p>
+                </div>
+                <div>
+                    <label for="receipt_footer" class="text-sm font-medium text-slate-700">Receipt footer</label>
+                    <textarea id="receipt_footer" name="receipt_footer" rows="3"
+                              class="mt-1.5 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('receipt_footer', $location->receipt_footer) }}</textarea>
+                </div>
+                <div class="flex justify-end">
+                    <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">
-                <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">
-                        Import from CRM
-                    </button>
-                </form>
-                @if ($merchantImportEnabled)
-                    <form method="POST" action="{{ route('pos.settings.import-merchant') }}">
+            <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">
-                            Import from Merchant
+                            Import from CRM
                         </button>
                     </form>
-                @endif
-            </div>
-        </section>
-        @endif
+                    @if ($merchantImportEnabled)
+                        <form method="POST" action="{{ route('pos.settings.import-merchant') }}">
+                            @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">
+                                Import from Merchant
+                            </button>
+                        </form>
+                    @endif
+                </div>
+            </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>