@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Commerce/ProductWaitlistEntryDialog.stx

@@ -101,109 +101,100 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div
-  :show="open"
-  role="dialog"
-  aria-modal="true"
-  :aria-label="mode() === 'edit' ? 'Edit product waitlist entry' : 'Add product waitlist entry'"
-  class="fixed inset-0 overflow-y-auto z-30 dashboard-modal-layer"
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit waitlist entry' : 'Add waitlist entry'"
+  description="Save this entry through the WaitlistProduct model API."
+  size="lg"
+  :closable="!busy()"
+  @close="emit('close')"
 >
-  <div class="flex items-end justify-center sm:items-center p-4 sm:p-6 min-h-full text-center">
-    <button type="button" aria-label="Close product waitlist dialog" class="fixed inset-0 bg-gray-950/50" :disabled="busy()" @click="emit('close')"></button>
-    <form class="overflow-hidden relative p-5 sm:p-6 sm:max-w-2xl sm:w-full text-left bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl" @submit.prevent="submitForm()">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit waitlist entry' : 'Add waitlist entry' }}</h2>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Save this entry through the WaitlistProduct model API.</p>
-        </div>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close dialog" :disabled="busy()" @click="emit('close')">
-          <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
-        <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
-      </ul>
-
-      <div class="grid gap-4 sm:grid-cols-2 mt-6">
-        <label class="block sm:col-span-2">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Product</span>
-          <select x-model="productId" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="">Select a product</option>
-            <option :for="option in options().products" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
-          </select>
-        </label>
-
-        <label class="block sm:col-span-2">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Existing customer</span>
-          <select x-model="customerId" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" @change="hydrateCustomer($event)">
-            <option value="">No linked customer</option>
-            <option :for="option in options().customers" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Name</span>
-          <input type="text" x-model.trim="name" required maxlength="255" autocomplete="name" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Email</span>
-          <input type="email" x-model.trim="email" required maxlength="255" autocomplete="email" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Phone</span>
-          <input type="tel" x-model.trim="phone" maxlength="100" autocomplete="tel" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Quantity</span>
-          <input type="number" x-model.number="quantity" required min="1" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notification preference</span>
-          <select x-model="notificationPreference" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="email">Email</option>
-            <option value="sms">SMS</option>
-            <option value="both">Email and SMS</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Source</span>
-          <select x-model="source" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="website">Website</option>
-            <option value="social_media">Social media</option>
-            <option value="in-store">In store</option>
-            <option value="email">Email</option>
-            <option value="app">App</option>
-            <option value="referral">Referral</option>
-            <option value="other">Other</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Status</span>
-          <select x-model="status" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="waiting">Waiting</option>
-            <option value="notified">Notified</option>
-            <option value="purchased">Purchased</option>
-            <option value="cancelled">Cancelled</option>
-          </select>
-        </label>
-
-        <label class="block sm:col-span-2">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notes</span>
-          <textarea x-model.trim="notes" maxlength="500" rows="3" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600"></textarea>
-        </label>
-      </div>
-
-      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-6">
-        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add entry' }}</Button>
-      </div>
-    </form>
-  </div>
-</div>
+  <form id="product-waitlist-entry-form" @submit.prevent="submitForm()">
+    <ul :if="errorMessages().length > 0" class="p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+      <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
+    </ul>
+
+    <div class="grid gap-4 sm:grid-cols-2 mt-6">
+      <label class="block sm:col-span-2">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Product</span>
+        <select x-model="productId" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="">Select a product</option>
+          <option :for="option in options().products" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
+        </select>
+      </label>
+
+      <label class="block sm:col-span-2">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Existing customer</span>
+        <select x-model="customerId" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" @change="hydrateCustomer($event)">
+          <option value="">No linked customer</option>
+          <option :for="option in options().customers" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Name</span>
+        <input type="text" x-model.trim="name" required maxlength="255" autocomplete="name" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Email</span>
+        <input type="email" x-model.trim="email" required maxlength="255" autocomplete="email" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Phone</span>
+        <input type="tel" x-model.trim="phone" maxlength="100" autocomplete="tel" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Quantity</span>
+        <input type="number" x-model.number="quantity" required min="1" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notification preference</span>
+        <select x-model="notificationPreference" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="email">Email</option>
+          <option value="sms">SMS</option>
+          <option value="both">Email and SMS</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Source</span>
+        <select x-model="source" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="website">Website</option>
+          <option value="social_media">Social media</option>
+          <option value="in-store">In store</option>
+          <option value="email">Email</option>
+          <option value="app">App</option>
+          <option value="referral">Referral</option>
+          <option value="other">Other</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Status</span>
+        <select x-model="status" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="waiting">Waiting</option>
+          <option value="notified">Notified</option>
+          <option value="purchased">Purchased</option>
+          <option value="cancelled">Cancelled</option>
+        </select>
+      </label>
+
+      <label class="block sm:col-span-2">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notes</span>
+        <textarea x-model.trim="notes" maxlength="500" rows="3" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600"></textarea>
+      </label>
+    </div>
+
+  </form>
+
+  <template #footer>
+    <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="product-waitlist-entry-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add entry' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Commerce/RestaurantWaitlistDeleteDialog.stx

@@ -5,23 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as RestaurantWaitlistRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `${record()?.name || 'This party'} will be permanently removed from the WaitlistRestaurant model.`)
 </script>
 
-<div :show="open" role="alertdialog" aria-modal="true" aria-label="Delete restaurant waitlist entry" class="fixed inset-0 overflow-y-auto z-40 dashboard-modal-layer">
-  <div class="flex items-end justify-center sm:items-center p-4 min-h-full text-center">
-    <button type="button" aria-label="Close delete confirmation" class="fixed inset-0 bg-gray-950/50" :disabled="busy()" @click="emit('close')"></button>
-    <div class="relative p-5 sm:p-6 sm:max-w-md sm:w-full text-left bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/30 rounded-full">
-        <span class="h-5 w-5 i-hugeicons-waste"></span>
-      </div>
-      <h2 class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete waitlist party?</h2>
-      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">
-        {{ record()?.name || 'This party' }} will be permanently removed from the WaitlistRestaurant model.
-      </p>
-      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-6">
-        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete party</Button>
-      </div>
-    </div>
-  </div>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete waitlist party?"
+  :description="description()"
+  confirmLabel="Delete party"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

package/resources/components/Dashboard/Commerce/RestaurantWaitlistEntryDialog.stx

@@ -111,98 +111,95 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div :show="open" role="dialog" aria-modal="true" :aria-label="mode() === 'edit' ? 'Edit restaurant waitlist entry' : 'Add restaurant waitlist entry'" class="fixed inset-0 overflow-y-auto z-30 dashboard-modal-layer">
-  <div class="flex items-end justify-center sm:items-center p-4 sm:p-6 min-h-full text-center">
-    <button type="button" aria-label="Close restaurant waitlist dialog" class="fixed inset-0 bg-gray-950/50" :disabled="busy()" @click="emit('close')"></button>
-    <form class="overflow-hidden relative p-5 sm:p-6 sm:max-w-2xl sm:w-full text-left bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl" @submit.prevent="submitForm()">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit waitlist party' : 'Add waitlist party' }}</h2>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Save this party through the WaitlistRestaurant model API.</p>
-        </div>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close dialog" :disabled="busy()" @click="emit('close')">
-          <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
-        <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
-      </ul>
-
-      <div class="grid gap-4 sm:grid-cols-2 mt-6">
-        <label class="block sm:col-span-2">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Existing customer</span>
-          <select x-model="customerId" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" @change="hydrateCustomer($event)">
-            <option value="">No linked customer</option>
-            <option :for="option in options().customers" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Name</span>
-          <input type="text" x-model.trim="name" required maxlength="255" autocomplete="name" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Email</span>
-          <input type="email" x-model.trim="email" required maxlength="255" autocomplete="email" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Phone</span>
-          <input type="tel" x-model.trim="phone" maxlength="100" autocomplete="tel" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Party size</span>
-          <input type="number" x-model.number="partySize" required min="1" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Check in time</span>
-          <input type="datetime-local" x-model="checkInTime" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Quoted wait in minutes</span>
-          <input type="number" x-model.number="quotedWaitTime" required min="0" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Table preference</span>
-          <select x-model="tablePreference" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="no_preference">No preference</option>
-            <option value="indoor">Indoor</option>
-            <option value="bar">Bar</option>
-            <option value="booth">Booth</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Status</span>
-          <select x-model="status" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
-            <option value="waiting">Waiting</option>
-            <option value="seated">Seated</option>
-            <option value="cancelled">Cancelled</option>
-            <option value="no_show">No show</option>
-          </select>
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Actual wait in minutes</span>
-          <input type="number" x-model.number="actualWaitTime" min="0" step="1" placeholder="Not recorded" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-
-        <label class="block">
-          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Queue position</span>
-          <input type="number" x-model.number="queuePosition" min="1" step="1" placeholder="Not assigned" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
-        </label>
-      </div>
-
-      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-6">
-        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
-        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add party' }}</Button>
-      </div>
-    </form>
-  </div>
-</div>
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit waitlist party' : 'Add waitlist party'"
+  description="Save this party through the WaitlistRestaurant model API."
+  size="lg"
+  :closable="!busy()"
+  @close="emit('close')"
+>
+  <form id="restaurant-waitlist-entry-form" @submit.prevent="submitForm()">
+    <ul :if="errorMessages().length > 0" class="p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+      <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
+    </ul>
+
+    <div class="grid gap-4 sm:grid-cols-2 mt-6">
+      <label class="block sm:col-span-2">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Existing customer</span>
+        <select x-model="customerId" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" @change="hydrateCustomer($event)">
+          <option value="">No linked customer</option>
+          <option :for="option in options().customers" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Name</span>
+        <input type="text" x-model.trim="name" required maxlength="255" autocomplete="name" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Email</span>
+        <input type="email" x-model.trim="email" required maxlength="255" autocomplete="email" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Phone</span>
+        <input type="tel" x-model.trim="phone" maxlength="100" autocomplete="tel" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Party size</span>
+        <input type="number" x-model.number="partySize" required min="1" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Check in time</span>
+        <input type="datetime-local" x-model="checkInTime" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Quoted wait in minutes</span>
+        <input type="number" x-model.number="quotedWaitTime" required min="0" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Table preference</span>
+        <select x-model="tablePreference" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="no_preference">No preference</option>
+          <option value="indoor">Indoor</option>
+          <option value="bar">Bar</option>
+          <option value="booth">Booth</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Status</span>
+        <select x-model="status" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="waiting">Waiting</option>
+          <option value="seated">Seated</option>
+          <option value="cancelled">Cancelled</option>
+          <option value="no_show">No show</option>
+        </select>
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Actual wait in minutes</span>
+        <input type="number" x-model.number="actualWaitTime" min="0" step="1" placeholder="Not recorded" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+
+      <label class="block">
+        <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Queue position</span>
+        <input type="number" x-model.number="queuePosition" min="1" step="1" placeholder="Not assigned" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+      </label>
+    </div>
+
+  </form>
+
+  <template #footer>
+    <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
+      <Button type="submit" form="restaurant-waitlist-entry-form" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add party' }}</Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/Content/AuthorEditorDialog.stx

@@ -0,0 +1,94 @@
+<script client>
+interface AuthorRecord {
+  id: string
+  name: string
+  email: string
+  bio: string
+  avatar: string
+}
+
+interface AuthorDraft {
+  name: string
+  email: string
+  bio: string
+  avatar: string
+}
+
+const open = useReactiveProp('open', false)
+const author = useReactiveProp('author', null as AuthorRecord | null)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const name = state('')
+const email = state('')
+const bio = state('')
+const avatar = state('')
+const emit = defineEmits()
+let wasOpen = false
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    const record = author()
+    name.set(record?.name || '')
+    email.set(record?.email || '')
+    bio.set(record?.bio || '')
+    avatar.set(record?.avatar || '')
+  }
+  wasOpen = isOpen
+})
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  const draft: AuthorDraft = {
+    name: name().trim(),
+    email: email().trim(),
+    bio: bio().trim(),
+    avatar: avatar().trim(),
+  }
+  emit('submit', draft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="author() ? 'Edit author' : 'New author'"
+  description="Keep author identity and publishing attribution up to date."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="author-editor-form" class="grid gap-4" @submit.prevent="submit">
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span>
+      <input x-model="name" name="name" required minlength="5" maxlength="255" autocomplete="name" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Email</span>
+      <input x-model="email" name="email" type="email" required autocomplete="email" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Bio</span>
+      <textarea x-model="bio" name="bio" maxlength="500" rows="3" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea>
+    </label>
+    <label>
+      <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Avatar URL</span>
+      <input x-model="avatar" name="avatar" type="url" inputmode="url" placeholder="https://example.com/avatar.jpg" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+    </label>
+  </form>
+
+  <div :if="error()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+    {{ error() }}
+  </div>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="author-editor-form" :disabled="name().trim().length < 5 || !email().trim()" :loading="busy()">
+        {{ author() ? 'Save changes' : 'Create author' }}
+      </Button>
+    </div>
+  </template>
+</Modal>