@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/customers/index.stx

@@ -0,0 +1,410 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Customers')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Customers" description="Manage your store customers">
+    <template #actions>
+      <Button variant="primary" @click="openAddModal()">
+        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
+        Add Customer
+      </Button>
+    </template>
+  </PageHeader>
+
+  <div class="overflow-hidden 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 flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-4">
+          <SearchFilter
+            placeholder="Search customers..."
+            @search="handleSearch"
+            class="w-full md:w-96"
+          />
+          <div class="flex flex-col gap-4 sm:flex-row">
+            <select
+              x-model="statusFilter"
+              class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+            >
+              <template :for="status in statuses">
+                <option :value="status">{{ status }}</option>
+              </template>
+            </select>
+
+            <select
+              x-model.number="itemsPerPage"
+              class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+            >
+              <option value="5">5 per page</option>
+              <option value="10">10 per page</option>
+              <option value="25">25 per page</option>
+              <option value="50">50 per page</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Customer Tables Component -->
+      <CustomersTable
+        :customers="paginatedCustomers()"
+        :searchQuery="searchQuery()"
+        :statusFilter="statusFilter()"
+        :sortBy="sortBy()"
+        :sortOrder="sortOrder()"
+        :currentPage="currentPage()"
+        :itemsPerPage="itemsPerPage()"
+        :statuses="statuses"
+        @toggle-sort="toggleSort"
+        @change-page="handlePageChange"
+        @previous-page="handlePrevPage"
+        @next-page="handleNextPage"
+        @view-customer="viewCustomer"
+        @edit-customer="editCustomer"
+        @delete-customer="removeCustomer"
+      />
+
+      <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="filteredCustomers().length"
+          :itemsPerPage="itemsPerPage()"
+          @prev="handlePrevPage"
+          @next="handleNextPage"
+          @page="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Customer 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 Customer</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="customer-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Full Name</label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      id="customer-name"
+                      x-model="newCustomerName"
+                      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"
+                      placeholder="Enter customer name"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label for="customer-email" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Email Address</label>
+                  <div class="mt-2">
+                    <input
+                      type="email"
+                      id="customer-email"
+                      x-model="newCustomerEmail"
+                      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"
+                      placeholder="Enter email address"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label for="customer-phone" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Phone Number</label>
+                  <div class="mt-2">
+                    <input
+                      type="tel"
+                      id="customer-phone"
+                      x-model="newCustomerPhone"
+                      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"
+                      placeholder="Enter phone number"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label for="customer-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="customer-status"
+                      x-model="newCustomerStatus"
+                      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"
+                    >
+                      <template :for="status in statuses">
+                        <option :value="status">{{ status }}</option>
+                      </template>
+                    </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="addCustomer()"
+            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 Customer
+          </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>
+
+  <!-- Delete Customer Confirmation Modal -->
+  <div :show="showDeleteModal" 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="closeDeleteModal()"></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="flex items-center justify-center mx-auto h-12 w-12 bg-red-100 dark:bg-red-900 rounded-full">
+            <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-triangle"></div>
+          </div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Delete Customer</h3>
+            <div class="mt-2">
+              <p class="text-gray-500 text-sm dark:text-neutral-400">
+                Are you sure you want to delete <strong>{{ customerToDelete()?.name }}</strong>? This action cannot be undone.
+              </p>
+            </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="confirmDelete()"
+            class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 shadow-sm"
+          >
+            Delete Customer
+          </button>
+          <button
+            type="button"
+            @click="closeDeleteModal()"
+            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'
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['all', 'Active', 'Inactive'] as const
+
+interface Customer {
+  id: number
+  name: string
+  email: string
+  phone: string
+  total_spent?: number
+  last_order?: string
+  status: string
+  avatar?: string
+}
+
+// useCustomers wraps a useStorage ref + REST helpers. Keep it as the
+// single source of truth for the customers list — wrap reads in a
+// derived signal so template bindings re-render when the underlying
+// ref mutates (push / splice / replace).
+const { customers, createCustomer, fetchCustomers, deleteCustomer } = useCustomers()
+
+// Filtering + sorting + pagination state — local to this page.
+const statusFilter = state<'all' | 'Active' | 'Inactive'>('all')
+const sortBy = state<'name' | 'total_spent' | 'last_order'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+// Modal state. Splitting newCustomer into discrete signals keeps each
+// <input x-model> binding a single signal — simpler than wiring nested
+// object updates through `update(o => ({ ...o, ... }))` per field.
+const showAddModal = state(false)
+const showDeleteModal = state(false)
+const customerToDelete = state<Customer | null>(null)
+const newCustomerName = state('')
+const newCustomerEmail = state('')
+const newCustomerPhone = state('')
+const newCustomerStatus = state<'Active' | 'Inactive'>('Active')
+
+const filteredCustomers = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const filter = statusFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return (customers.value as Customer[])
+    .filter((c) => {
+      const matchesSearch
+        = c.name.toLowerCase().includes(q)
+          || c.email.toLowerCase().includes(q)
+          || c.phone.toLowerCase().includes(q)
+      const matchesStatus = filter === 'all' || c.status === filter
+      return matchesSearch && matchesStatus
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name') {
+        cmp = a.name.localeCompare(b.name)
+      }
+      else if (by === 'total_spent') {
+        cmp = (a.total_spent || 0) - (b.total_spent || 0)
+      }
+      else if (by === 'last_order') {
+        const dateA = a.last_order ? new Date(a.last_order).getTime() : 0
+        const dateB = b.last_order ? new Date(b.last_order).getTime() : 0
+        cmp = dateA - dateB
+      }
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const paginatedCustomers = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  const end = start + itemsPerPage()
+  return filteredCustomers().slice(start, end)
+})
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+function handlePrevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function handleNextPage(): void {
+  const totalPages = Math.ceil(filteredCustomers().length / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+function toggleSort(column: 'name' | 'total_spent' | 'last_order'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+// Customer actions — `navigate` is auto-imported.
+function viewCustomer(c: Customer): void {
+  navigate(`/dashboard/commerce/customers/${c.id}`)
+}
+
+function editCustomer(c: Customer): void {
+  navigate(`/dashboard/commerce/customers/${c.id}?edit=true`)
+}
+
+function removeCustomer(c: Customer): void {
+  customerToDelete.set(c)
+  showDeleteModal.set(true)
+}
+
+function openAddModal(): void {
+  newCustomerName.set('')
+  newCustomerEmail.set('')
+  newCustomerPhone.set('')
+  newCustomerStatus.set('Active')
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function closeDeleteModal(): void {
+  showDeleteModal.set(false)
+  customerToDelete.set(null)
+}
+
+async function confirmDelete(): Promise<void> {
+  const target = customerToDelete()
+  if (!target)
+    return
+
+  const id = target.id
+  const list = customers.value as Customer[]
+  customers.value = list.filter(c => c.id !== id)
+
+  try {
+    await deleteCustomer(id)
+    closeDeleteModal()
+  }
+  catch (error) {
+    customers.value = [...customers.value, target]
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete customer:', error)
+  }
+}
+
+async function addCustomer(): Promise<void> {
+  const list = customers.value as Customer[]
+  const id = list.length > 0 ? Math.max(...list.map(c => c.id || 0)) + 1 : 1
+  const today = new Date().toISOString().split('T')[0] || ''
+  const avatar = 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
+
+  const optimistic: Customer = {
+    id,
+    name: newCustomerName(),
+    email: newCustomerEmail(),
+    phone: newCustomerPhone(),
+    total_spent: 0,
+    last_order: today,
+    status: newCustomerStatus(),
+    avatar,
+  }
+  customers.value = [...list, optimistic]
+
+  try {
+    await createCustomer({
+      name: optimistic.name,
+      email: optimistic.email,
+      phone: optimistic.phone,
+      total_spent: 0,
+      last_order: today,
+      status: optimistic.status,
+      avatar,
+    })
+    closeAddModal()
+  }
+  catch (error) {
+    customers.value = (customers.value as Customer[]).filter(c => c.id !== id)
+    // eslint-disable-next-line no-console
+    console.error('Failed to create customer:', error)
+  }
+}
+
+onMount(async () => {
+  await fetchCustomers()
+})
+</script>
+
+@endsection