@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,485 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Coupons')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Coupons" description="Manage discount coupons for your store">
+    <template #actions>
+      <Button variant="primary" @click="openAddModal()">
+        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
+        Add Coupon
+      </Button>
+    </template>
+  </PageHeader>
+
+  <!-- Time range selector -->
+  <div class="flex items-center justify-between mt-4">
+    <p class="text-gray-500 text-sm dark:text-neutral-400">
+      Overview of your coupon performance
+    </p>
+    <div class="relative">
+      <select x-model="timeRange" 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">
+        <template :for="range in timeRanges">
+          <option :value="range">{{ range }}</option>
+        </template>
+      </select>
+    </div>
+  </div>
+
+  <!-- Stats -->
+  <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-5">
+    <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Active Coupons</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ couponStats().activeCoupons }}</dd>
+      <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+        <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+        <span>1 more than last month</span>
+      </dd>
+    </div>
+
+    <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Redemptions</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ couponStats().totalRedemptions.toLocaleString() }}</dd>
+      <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+        <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+        <span>12.5% increase</span>
+      </dd>
+    </div>
+
+    <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Discount Amount</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ couponStats().totalDiscountAmount.toLocaleString() }}</dd>
+      <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+        <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+        <span>8.2% increase</span>
+      </dd>
+    </div>
+
+    <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Avg. Discount per Order</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ couponStats().avgDiscountPerOrder }}</dd>
+      <dd class="flex items-center mt-2 text-red-600 text-sm dark:text-red-400">
+        <div class="mr-1 h-4 w-4 i-hugeicons-analytics-down"></div>
+        <span>3.2% decrease</span>
+      </dd>
+    </div>
+  </dl>
+
+  <!-- Charts -->
+  <div class="grid gap-5 grid-cols-1 lg:grid-cols-2 mt-8">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Coupon Redemptions</h3>
+        <div class="mt-2 h-80">
+          <canvas id="chart_1"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="p-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Discount Amount</h3>
+        <div class="mt-2 h-80">
+          <canvas id="chart_2"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-8">
+    <SearchFilter
+      placeholder="Search coupons..."
+      @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>
+
+  <!-- Coupons table -->
+  <div class="flow-root mt-6">
+    <div class="sm:flex sm:items-center sm:justify-between mb-4">
+      <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">All Coupons</h3>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+        A list of all the coupons in your store including their code, value, and status.
+      </p>
+    </div>
+    <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+      <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <CouponsTable
+            :coupons="paginatedCoupons"
+            :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-coupon="viewCoupon"
+            @edit-coupon="editCoupon"
+            @delete-coupon="removeCoupon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Pagination -->
+  <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>
+
+  <!-- Coupons Form Modal -->
+  <CouponsForm
+    :show="showFormModal"
+    :mode="formMode"
+    :coupon="couponToEdit"
+    @close="closeFormModal"
+    @submit="handleFormSubmit"
+  />
+
+  <!-- Delete Coupon 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 Coupon</h3>
+            <div class="mt-2">
+              <p class="text-gray-500 text-sm dark:text-neutral-400">
+                Are you sure you want to delete <strong>{{ couponToDelete()?.code }}</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 Coupon
+          </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 { useCoupons } from '../../../../functions/commerce/coupons'
+import type { Coupons, NewCoupon } from '../../../../types/defaults'
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['all', 'Active', 'Expired', 'Scheduled'] as const
+const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year', 'All time'] as const
+
+const { coupons, createCoupon, fetchCoupons, deleteCoupon, updateCoupon } = useCoupons()
+
+const timeRange = state<string>('Last 30 days')
+const searchQuery = state('')
+const sortBy = state<'code' | 'discount_value' | 'usage_count' | 'end_date'>('code')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const statusFilter = state<string>('all')
+const currentPage = state(1)
+const itemsPerPage = state(10)
+
+const showFormModal = state(false)
+const formMode = state<'add' | 'edit'>('add')
+const couponToEdit = state<Coupons | null>(null)
+const showDeleteModal = state(false)
+const couponToDelete = state<Coupons | null>(null)
+
+// Static chart options + monthly sample data — keep them in client
+// scope so derived chart data can pick up signal-driven inputs later
+// (timeRange, etc. when wired through to a real source).
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: { legend: { display: false } },
+  scales: {
+    y: { beginAtZero: true, grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' } },
+    x: { grid: { display: false } },
+  },
+}
+
+function monthlyChartData(): { couponUsageData: unknown, discountAmountData: unknown } {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  const redemptionsData = [120, 145, 132, 160, 185, 170, 210, 230, 245, 220, 260, 280]
+  const discountData = [2500, 3200, 2800, 3600, 4100, 3800, 4500, 5200, 5800, 5400, 6200, 6800]
+
+  return {
+    couponUsageData: {
+      labels: months,
+      datasets: [{
+        label: 'Coupon Redemptions',
+        backgroundColor: 'rgba(59, 130, 246, 0.2)',
+        borderColor: 'rgba(59, 130, 246, 1)',
+        borderWidth: 2,
+        pointBackgroundColor: 'rgba(59, 130, 246, 1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(59, 130, 246, 1)',
+        fill: true,
+        tension: 0.4,
+        data: redemptionsData,
+      }],
+    },
+    discountAmountData: {
+      labels: months,
+      datasets: [{
+        label: 'Discount Amount',
+        backgroundColor: 'rgba(16, 185, 129, 0.8)',
+        borderColor: 'rgba(16, 185, 129, 1)',
+        borderWidth: 1,
+        borderRadius: 4,
+        data: discountData,
+      }],
+    },
+  }
+}
+
+function couponStats(): { activeCoupons: number, totalRedemptions: number, totalDiscountAmount: string, avgDiscountPerOrder: string } {
+  const list = coupons.value as Coupons[]
+  const activeCoupons = list.filter(c => c.status === 'Active').length
+  const totalRedemptions = list.reduce((sum, c) => sum + (c.usage_count || 0), 0)
+
+  const totalDiscountAmount = list.reduce((sum, c) => {
+    const avgOrderValue = 100
+    const discountPerUse = c.discount_type === 'Percentage'
+      ? avgOrderValue * (c.discount_value / 100)
+      : c.discount_value
+    return sum + (discountPerUse * (c.usage_count || 0))
+  }, 0)
+
+  const avgDiscountPerOrder = totalRedemptions > 0
+    ? (totalDiscountAmount / totalRedemptions).toFixed(2)
+    : '0.00'
+
+  return {
+    activeCoupons,
+    totalRedemptions,
+    totalDiscountAmount: totalDiscountAmount.toFixed(0),
+    avgDiscountPerOrder,
+  }
+}
+
+const filteredCoupons = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const filter = statusFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return (coupons.value as Coupons[])
+    .filter((c) => {
+      const matchesSearch = c.code?.toLowerCase().includes(q) || false
+      const matchesStatus = filter === 'all' || c.status === filter
+      return matchesSearch && matchesStatus
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'code')
+        cmp = a.code.localeCompare(b.code)
+      else if (by === 'discount_value')
+        cmp = a.discount_value - b.discount_value
+      else if (by === 'usage_count')
+        cmp = (a.usage_count || 0) - (b.usage_count || 0)
+      else if (by === 'end_date')
+        cmp = new Date(a.end_date).getTime() - new Date(b.end_date).getTime()
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const paginatedCoupons = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredCoupons().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredCoupons().length)
+
+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(totalItems() / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+function toggleSort(column: 'code' | 'discount_value' | 'usage_count' | 'end_date'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function openAddModal(): void {
+  formMode.set('add')
+  couponToEdit.set(null)
+  showFormModal.set(true)
+}
+
+function closeFormModal(): void {
+  showFormModal.set(false)
+  couponToEdit.set(null)
+}
+
+function editCoupon(coupon: Coupons): void {
+  formMode.set('edit')
+  couponToEdit.set({ ...coupon })
+  showFormModal.set(true)
+}
+
+function viewCoupon(coupon: Coupons): void {
+  navigate(`/dashboard/commerce/coupons/${coupon.id}`)
+}
+
+function removeCoupon(coupon: Coupons): void {
+  couponToDelete.set(coupon)
+  showDeleteModal.set(true)
+}
+
+function closeDeleteModal(): void {
+  showDeleteModal.set(false)
+  couponToDelete.set(null)
+}
+
+async function handleFormSubmit(couponData: NewCoupon): Promise<void> {
+  if (formMode() === 'add')
+    await addCoupon(couponData)
+  else
+    await doUpdateCoupon(couponData)
+}
+
+async function addCoupon(couponData: NewCoupon): Promise<void> {
+  const list = coupons.value as Coupons[]
+  const id = list.length > 0 ? Math.max(...list.map(c => c.id || 0)) + 1 : 1
+  const optimistic = { id, ...couponData, usage_count: 0 } as unknown as Coupons
+  coupons.value = [...list, optimistic]
+
+  try {
+    await createCoupon(couponData as unknown as Coupons)
+    closeFormModal()
+  }
+  catch (error) {
+    coupons.value = (coupons.value as Coupons[]).filter(c => c.id !== id)
+    // eslint-disable-next-line no-console
+    console.error('Failed to create coupon:', error)
+  }
+}
+
+async function doUpdateCoupon(couponData: NewCoupon): Promise<void> {
+  const target = couponToEdit()
+  if (!target)
+    return
+  const couponId = target.id
+  const list = coupons.value as Coupons[]
+  coupons.value = list.map(c => c.id === couponId ? { ...c, ...couponData } : c)
+
+  try {
+    await updateCoupon(couponId as number, couponData)
+    closeFormModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update coupon:', error)
+  }
+}
+
+async function confirmDelete(): Promise<void> {
+  const target = couponToDelete()
+  if (!target)
+    return
+  const couponId = target.id
+  const list = coupons.value as Coupons[]
+  coupons.value = list.filter(c => c.id !== couponId)
+
+  try {
+    await deleteCoupon(couponId as number)
+    closeDeleteModal()
+  }
+  catch (error) {
+    coupons.value = [...coupons.value, target]
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete coupon:', error)
+  }
+}
+
+const { Chart, registerables } = await import('@stacksjs/charts')
+Chart.register(...registerables)
+
+const chartData = monthlyChartData()
+const { destroyAll } = useCharts([
+  { Chart, id: 'chart_1', type: 'line', data: chartData.couponUsageData, options: chartOptions },
+  { Chart, id: 'chart_2', type: 'bar', data: chartData.discountAmountData, options: chartOptions },
+])
+
+onMount(async () => {
+  await fetchCoupons()
+})
+
+// Tear charts down on SPA navigation so chart.js doesn't leak canvases.
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@endsection