@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Commerce/Delivery/DriversTable.stx

@@ -1,99 +1,103 @@
-<script>
-interface DriversTableProps {
-  drivers?: any[]
+<script client>
+type DriverStatus = 'active' | 'on_delivery' | 'on_break'
+
+interface DriverRow {
+  id: number
+  name: string
+  phone: string
+  vehicle_number: string
+  license: string
+  status: DriverStatus
+  user_id?: number | null
+  user?: { id: number, name: string, email?: string }
 }
 
-const { drivers = [] } = defineProps<DriversTableProps>()
+const drivers = useReactiveProp('drivers', [] as DriverRow[])
+const emit = defineEmits()
 
-function formatDate(date) {
-    if (!date) return 'N/A'
-    const dateObj = typeof date === 'string' ? new Date(date) : date
-    return dateObj.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric'
-    }
-  }
+function statusLabel(status: DriverStatus): string {
+  return {
+    active: 'Available',
+    on_delivery: 'On delivery',
+    on_break: 'On break',
+  }[status] || status
+}
 
-  function getStatusClass(status) {
-    switch (status) {
-      case 'Active':
-        return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
-      case 'On Delivery':
-        return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
-      case 'On Break':
-        return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
-      default:
-        return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
-    }
-  }
+function statusClass(status: DriverStatus): string {
+  if (status === 'active')
+    return 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-300'
+  if (status === 'on_delivery')
+    return 'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-300'
+  return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300'
+}
 </script>
-<div class="overflow-hidden border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-    <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-      <thead class="bg-stone-50/80 dark:bg-neutral-800">
-        <tr>
-          <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">ID</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Phone</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Vehicle</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">License</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Last Active</th>
-          <th scope="col" class="relative pl-3 pr-6 py-3.5">
-            <span class="sr-only">Actions</span>
-          </th>
+
+<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
+  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
+    <thead class="bg-stone-50/80 dark:bg-neutral-800">
+      <tr>
+        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Driver</th>
+        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Phone</th>
+        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Vehicle</th>
+        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">License</th>
+        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">User</th>
+        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
+        <th scope="col" class="relative pl-3 pr-6 py-3.5">
+          <span class="sr-only">Actions</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
+      <template :for="driver in drivers" :key="driver.id">
+        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
+          <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
+            {{ driver.name }}
+          </td>
+          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+            {{ driver.phone }}
+          </td>
+          <td class="px-4 py-3.5 font-mono text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+            {{ driver.vehicle_number }}
+          </td>
+          <td class="px-4 py-3.5 font-mono text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+            {{ driver.license }}
+          </td>
+          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
+            {{ driver.user?.name || (driver.user_id ? 'User #' + driver.user_id : 'Not linked') }}
+          </td>
+          <td class="px-4 py-3.5 text-sm whitespace-nowrap">
+            <span :class="'inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md ' + statusClass(driver.status)">
+              {{ statusLabel(driver.status) }}
+            </span>
+          </td>
+          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              @click="emit('edit', driver)"
+              :ariaLabel="'Edit driver ' + driver.name + ', record ' + driver.id"
+            >
+              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              @click="emit('delete', driver)"
+              :ariaLabel="'Delete driver ' + driver.name + ', record ' + driver.id"
+            >
+              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
+            </Button>
+          </td>
         </tr>
-      </thead>
-      <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-        @foreach(drivers as driver)
-          <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-            <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
-              {{ driver.id }}
-            </td>
-            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-              <div class="flex items-center">
-                <div class="flex-shrink-0 h-10 w-10">
-                  <img
-                    src="{{ driver.avatar || 'https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg' }}"
-                    alt=""
-                    class="h-10 w-10 rounded-full"
-                  >
-                </div>
-                <div class="ml-4">
-                  <div class="font-medium text-stone-800 dark:text-white">{{ driver.name }}</div>
-                </div>
-              </div>
-            </td>
-            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-              {{ driver.phone }}
-            </td>
-            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-              {{ driver.vehicle_number }}
-            </td>
-            <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-              {{ driver.license }}
-            </td>
-            <td class="px-4 py-3.5 text-sm whitespace-nowrap">
-              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getStatusClass(driver.status) }}">
-                {{ driver.status }}
-              </span>
-            </td>
-            <td class="px-4 py-3.5 text-right text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-              {{ formatDate(driver.last_active) }}
-            </td>
-            <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" data-action="view-routes" data-driver-id="{{ driver.id }}" title="View Routes">
-                <div class="h-5 w-5 i-hugeicons-route-02"></div>
-              </button>
-              <button type="button" class="mr-2 p-2 text-stone-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 border border-transparent rounded-md hover:border-blue-200 dark:hover:border-blue-800 duration-150 transition-colors" title="Edit" data-action="edit" data-driver-id="{{ driver.id }}">
-                <div class="h-5 w-5 i-hugeicons-edit-01"></div>
-              </button>
-              <button type="button" class="p-2 text-stone-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 border border-transparent rounded-md hover:border-red-200 dark:hover:border-red-800 duration-150 transition-colors" title="Delete" data-action="delete" data-driver-id="{{ driver.id }}">
-                <div class="h-5 w-5 i-hugeicons-waste"></div>
-              </button>
-            </td>
-          </tr>
-        @endforeach
-      </tbody>
-    </table>
-  </div>
+      </template>
+
+      <tr :if="drivers().length === 0">
+        <td colspan="7" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
+          No drivers found.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeyDeleteDialog.stx

@@ -0,0 +1,28 @@
+<script client>
+interface LicenseKeyRecord {
+  id: number
+  key: string
+}
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as LicenseKeyRecord | null)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const emit = defineEmits()
+</script>
+
+<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close license key deletion" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="alertdialog" aria-modal="true" aria-labelledby="license-key-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <div class="p-6">
+      <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/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
+      <h2 id="license-key-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete license key?</h2>
+      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete <span class="font-mono">{{ record()?.key }}</span> permanently.</p>
+      <div :if="error()" 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>
+    </div>
+    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete key</Button>
+    </footer>
+  </section>
+</div>

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeyDialog.stx

@@ -0,0 +1,159 @@
+<script client>
+type LicenseKeyStatus = 'active' | 'inactive' | 'unassigned'
+
+interface LicenseKeyOption {
+  id: number
+  label: string
+  detail?: string
+}
+
+interface LicenseKeyOptions {
+  customers: LicenseKeyOption[]
+  products: LicenseKeyOption[]
+  orders: LicenseKeyOption[]
+}
+
+interface LicenseKeyRecord {
+  id: number
+  key: string
+  template: string
+  customer_id?: number | null
+  product_id?: number | null
+  order_id?: number | null
+  expiry_date: string
+  status: LicenseKeyStatus
+}
+
+const open = useReactiveProp('open', false)
+const mode = useReactiveProp('mode', 'create')
+const record = useReactiveProp('record', null as LicenseKeyRecord | null)
+const options = useReactiveProp('options', {
+  customers: [],
+  products: [],
+  orders: [],
+} as LicenseKeyOptions)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const emit = defineEmits()
+const keyValue = state('')
+const templateValue = state('Standard License')
+const customerId = state('')
+const productId = state('')
+const orderId = state('')
+const expiryDate = state('')
+const status = state<LicenseKeyStatus>('unassigned')
+let hydrationKey = ''
+
+function toDateTimeLocal(value?: string): string {
+  if (!value)
+    return ''
+  const timestamp = /^\d{10,13}$/.test(value)
+    ? Number(value) * (value.length === 10 ? 1000 : 1)
+    : value.replace(' ', 'T')
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime()))
+    return ''
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000).toISOString().slice(0, 16)
+}
+
+function toUnixTimestamp(value: string): number {
+  return Math.floor(new Date(value).getTime() / 1000)
+}
+
+function defaultExpiry(): string {
+  const date = new Date()
+  date.setFullYear(date.getFullYear() + 1)
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000).toISOString().slice(0, 16)
+}
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+  const current = record()
+  const nextKey = `${mode()}:${current?.id || 'new'}`
+  if (hydrationKey === nextKey)
+    return
+  hydrationKey = nextKey
+  keyValue.set(current?.key || '')
+  templateValue.set(current?.template || 'Standard License')
+  customerId.set(current?.customer_id ? String(current.customer_id) : '')
+  productId.set(current?.product_id ? String(current.product_id) : '')
+  orderId.set(current?.order_id ? String(current.order_id) : '')
+  expiryDate.set(toDateTimeLocal(current?.expiry_date) || defaultExpiry())
+  status.set(current?.status || 'unassigned')
+})
+
+function relationId(value: string): number | null {
+  const id = Number(value)
+  return value && Number.isInteger(id) && id > 0 ? id : null
+}
+
+function generateKey(): void {
+  const bytes = new Uint8Array(20)
+  crypto.getRandomValues(bytes)
+  const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
+  const characters = Array.from(bytes, value => alphabet[value % alphabet.length])
+  keyValue.set(Array.from({ length: 5 }, (_, index) => characters.slice(index * 4, index * 4 + 4).join('')).join('-'))
+}
+
+function submit(): void {
+  const normalizedKey = keyValue().trim().toUpperCase()
+  if (!/^[A-Z0-9]{4}(?:-[A-Z0-9]{4}){4}$/.test(normalizedKey)) {
+    emit('invalid', 'License key must use five groups of four uppercase letters or numbers.')
+    return
+  }
+  if (!expiryDate()) {
+    emit('invalid', 'Expiry date is required.')
+    return
+  }
+
+  emit('submit', {
+    key: normalizedKey,
+    template: templateValue(),
+    customerId: relationId(customerId()),
+    productId: relationId(productId()),
+    orderId: relationId(orderId()),
+    expiryDate: toUnixTimestamp(expiryDate()),
+    status: status(),
+  })
+}
+</script>
+
+<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close license key dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="license-key-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <form @submit.prevent="submit()">
+      <div class="p-6">
+        <h2 id="license-key-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit license key' : 'Add license key' }}</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Generate a unique key and optionally assign its customer, product, and order relationships.</p>
+        <div :if="error()" 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>
+
+        <div class="mt-5 space-y-4">
+          <div>
+            <label for="license-key-value" class="font-medium text-gray-700 text-sm dark:text-neutral-200">License key</label>
+            <span class="flex gap-2 mt-1">
+              <input id="license-key-value" x-model="keyValue" type="text" required maxlength="24" autocomplete="off" placeholder="XXXX-XXXX-XXXX-XXXX-XXXX" class="flex-1 px-3 py-2 min-w-0 font-mono text-gray-900 text-sm uppercase dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" />
+              <Button variant="secondary" @click="generateKey()">Generate</Button>
+            </span>
+          </div>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Template</span><select x-model="templateValue" 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"><option value="Standard License">Standard License</option><option value="Premium License">Premium License</option><option value="Enterprise License">Enterprise License</option></select></label>
+          <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Customer</span><select x-model="customerId" 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"><option value="">Unassigned</option><template :for="option in options().customers" :key="option.id"><option :value="option.id">{{ option.label }}{{ option.detail ? ' - ' + option.detail : '' }}</option></template></select></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Product</span><select x-model="productId" 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"><option value="">Unassigned</option><template :for="option in options().products" :key="option.id"><option :value="option.id">{{ option.label }}</option></template></select></label>
+          </div>
+          <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Order</span><select x-model="orderId" 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"><option value="">Unassigned</option><template :for="option in options().orders" :key="option.id"><option :value="option.id">{{ option.label }}{{ option.detail ? ' - ' + option.detail : '' }}</option></template></select></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Expiry date</span><input x-model="expiryDate" type="datetime-local" required 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>
+          </div>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" 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"><option value="unassigned">Unassigned</option><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
+        </div>
+      </div>
+      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add key' }}</Button>
+      </footer>
+    </form>
+  </section>
+</div>