@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/delivery/license-keys.stx

@@ -0,0 +1,380 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - License Keys')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="license" :tabs="tabs" />
+
+    <div class="overflow-hidden mt-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-neutral-700">
+        <div class="flex items-center justify-between">
+          <h2 class="font-medium text-gray-900 text-lg dark:text-white">License Keys</h2>
+          <button @click="openAddModal()" type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+            <div class="mr-2 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add License Key
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search license keys..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <LicenseKeysTable :licenseKeys="paginatedLicenseKeys" @edit="openEditModal" @delete="handleDeleteLicenseKey" />
+
+      <div class="px-4 py-3 bg-gray-50 dark:bg-neutral-900 border-gray-200 border-t dark:border-neutral-700">
+        <Pagination :currentPage="currentPage" :totalItems="totalItems" :itemsPerPage="itemsPerPage" @prev="handlePrevPage" @next="handleNextPage" @page="handlePageChange" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Add License Key Modal -->
+  <div :show="showAddModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeAddModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Add New License Key</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="license-key" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">License Key</label>
+                  <div class="mt-2">
+                    <input type="text" id="license-key" x-model="newKey" placeholder="Enter license key" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="license-template" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Template</label>
+                  <div class="mt-2">
+                    <input type="text" id="license-template" x-model="newTemplate" placeholder="Enter template name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="license-customer" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Customer</label>
+                  <div class="mt-2">
+                    <select id="license-customer" x-model.number="newCustomerId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="0">Select a customer</option>
+                      <template :for="customer in customerOptions">
+                        <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.email }})</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label for="product" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Product</label>
+                  <div class="mt-2">
+                    <input type="text" id="product" x-model="newProduct" placeholder="Product name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="order-id" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Order ID</label>
+                    <div class="mt-2">
+                      <input type="number" id="order-id" x-model.number="newOrderId" placeholder="Order ID" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                  <div>
+                    <label for="expiry-date" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Expiry Date</label>
+                    <div class="mt-2">
+                      <input type="date" id="expiry-date" x-model="newExpiryDate" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="license-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="license-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                      <option value="Expired">Expired</option>
+                      <option value="Revoked">Revoked</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="addLicenseKey()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add License Key</button>
+          <button type="button" @click="closeAddModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit License Key Modal -->
+  <div :show="showEditModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeEditModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Edit License Key</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-license-key" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">License Key</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-license-key" x-model="newKey" placeholder="Enter license key" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-license-template" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Template</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-license-template" x-model="newTemplate" placeholder="Enter template name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-license-customer" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Customer</label>
+                  <div class="mt-2">
+                    <select id="edit-license-customer" x-model.number="newCustomerId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="0">Select a customer</option>
+                      <template :for="customer in customerOptions">
+                        <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.email }})</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-product" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Product</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-product" x-model="newProduct" placeholder="Product name" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="edit-order-id" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Order ID</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-order-id" x-model.number="newOrderId" placeholder="Order ID" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                  <div>
+                    <label for="edit-expiry-date" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Expiry Date</label>
+                    <div class="mt-2">
+                      <input type="date" id="edit-expiry-date" x-model="newExpiryDate" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-license-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="edit-license-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                      <option value="Expired">Expired</option>
+                      <option value="Revoked">Revoked</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="saveLicenseKey()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Save Changes</button>
+          <button type="button" @click="closeEditModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+import { useCustomers } from '../../../../functions/commerce/customers'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+import { useLicenseKeys } from '../../../../functions/commerce/shippings/license-keys'
+
+interface LicenseKey {
+  id?: number
+  key: string
+  template: string
+  customer_id: number
+  product: string
+  order_id: number
+  expiry_date: string | Date
+  status: string
+  customer?: { name: string, email: string }
+}
+
+interface CustomerOption {
+  id: number
+  name: string
+  email: string
+}
+
+const { licenseKeys, createLicenseKey, fetchLicenseKeys, updateLicenseKey, deleteLicenseKey } = useLicenseKeys()
+const { customers, fetchCustomers } = useCustomers()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingLicenseKey = state<LicenseKey | null>(null)
+
+const newKey = state('')
+const newTemplate = state('')
+const newCustomerId = state(0)
+const newProduct = state('')
+const newOrderId = state(0)
+const newExpiryDate = state('')
+const newStatus = state('Active')
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+function customerOptions(): CustomerOption[] {
+  return ((customers.value as CustomerOption[]) || [])
+}
+
+function formatExpiryDate(value: string | Date): string {
+  if (!value)
+    return ''
+  if (typeof value === 'string')
+    return value
+  return new Date(value).toISOString().split('T')[0] || ''
+}
+
+const filteredLicenseKeys = derived(() => {
+  const list = (licenseKeys.value as LicenseKey[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(k =>
+    k.key.toLowerCase().includes(q)
+    || (k.customer?.name?.toLowerCase().includes(q) ?? false)
+    || (k.customer?.email?.toLowerCase().includes(q) ?? false)
+    || k.product.toLowerCase().includes(q)
+    || k.status.toLowerCase().includes(q),
+  )
+})
+
+const paginatedLicenseKeys = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredLicenseKeys().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredLicenseKeys().length)
+
+function resetForm(): void {
+  newKey.set('')
+  newTemplate.set('')
+  newCustomerId.set(0)
+  newProduct.set('')
+  newOrderId.set(0)
+  newExpiryDate.set('')
+  newStatus.set('Active')
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(licenseKey: LicenseKey): void {
+  editingLicenseKey.set(licenseKey)
+  newKey.set(licenseKey.key)
+  newTemplate.set(licenseKey.template)
+  newCustomerId.set(licenseKey.customer_id)
+  newProduct.set(licenseKey.product)
+  newOrderId.set(licenseKey.order_id)
+  newExpiryDate.set(formatExpiryDate(licenseKey.expiry_date))
+  newStatus.set(licenseKey.status)
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingLicenseKey.set(null)
+}
+
+async function addLicenseKey(): Promise<void> {
+  try {
+    await createLicenseKey({
+      key: newKey(),
+      template: newTemplate(),
+      customer_id: newCustomerId(),
+      product: newProduct(),
+      order_id: newOrderId(),
+      expiry_date: newExpiryDate(),
+      status: newStatus(),
+    } as LicenseKey)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create license key:', error)
+  }
+}
+
+async function saveLicenseKey(): Promise<void> {
+  const target = editingLicenseKey()
+  if (!target)
+    return
+  try {
+    await updateLicenseKey({
+      ...target,
+      key: newKey(),
+      template: newTemplate(),
+      customer_id: newCustomerId(),
+      product: newProduct(),
+      order_id: newOrderId(),
+      expiry_date: newExpiryDate(),
+      status: newStatus(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update license key:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteLicenseKey(licenseKey: LicenseKey): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this license key?'))
+    return
+  try {
+    await deleteLicenseKey(licenseKey.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete license key:', error)
+  }
+}
+
+function handlePrevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function handleNextPage(): void {
+  const totalPages = Math.ceil(totalItems() / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+onMount(async () => {
+  await Promise.all([
+    fetchLicenseKeys(),
+    fetchCustomers(),
+  ])
+})
+</script>
+
+@endsection