@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/commerce/gift-cards/index.stx

@@ -0,0 +1,561 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Gift Cards')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Gift Cards" description="Manage gift cards for your store" />
+        <div class="mt-4 sm:mt-0">
+          <button
+            type="button"
+            @click="openAddModal()"
+            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-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Create gift card
+          </button>
+        </div>
+      </div>
+
+      <!-- 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 gift card 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 Gift Cards</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ giftCardStats().activeGiftCards }}</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>{{ giftCardStats().totalGiftCards > 0 ? Math.round(giftCardStats().activeGiftCards / giftCardStats().totalGiftCards * 100) : 0 }}% of total</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 Value</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ Number.parseFloat(giftCardStats().totalInitialValue).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>10.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">Current Balance</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ Number.parseFloat(giftCardStats().totalCurrentBalance).toLocaleString() }}</dd>
+          <dd class="flex items-center mt-2 text-blue-600 text-sm dark:text-blue-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+            <span>${{ Number.parseFloat(giftCardStats().totalRedeemed).toLocaleString() }} redeemed</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">Redemption Rate</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ giftCardStats().redemptionRate }}%</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>5.2% increase</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">Gift Card Sales</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">Gift Card Revenue</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">
+        <div class="relative max-w-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input
+            x-model="searchQuery"
+            type="text"
+            class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 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"
+            placeholder="Search gift cards..."
+          />
+        </div>
+
+        <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 === 'all' ? 'All Statuses' : status }}</option>
+            </template>
+          </select>
+        </div>
+      </div>
+
+      <!-- Gift Cards 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 Gift Cards</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+            A list of all the gift cards in your store including their value, balance, 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">
+              <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+                <thead class="bg-gray-50 dark:bg-neutral-700">
+                  <tr>
+                    <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      Code
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Recipient</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('initial_balance')" class="inline-flex items-center group">
+                        Initial Value
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'initial_balance' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('current_balance')" class="inline-flex items-center group">
+                        Balance
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'current_balance' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('purchaseDate')" class="inline-flex items-center group">
+                        Purchase Date
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'purchaseDate' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('expiry_date')" class="inline-flex items-center group">
+                        Expiry Date
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'expiry_date' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Status</th>
+                    <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                      <span class="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                  <template :for="card in filteredGiftCards">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                        {{ card.code }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">
+                        <div>{{ card.recipient_name }}</div>
+                        <div class="text-gray-400 text-xs">{{ card.recipient_email }}</div>
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        ${{ card.initial_balance.toFixed(2) }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        ${{ card.current_balance.toFixed(2) }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        {{ card.created_at }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        {{ card.expiry_date }}
+                      </td>
+                      <td class="px-3 py-4 text-sm whitespace-nowrap">
+                        <span class="inline-flex items-center px-2 py-1 font-medium text-xs rounded-md {{ getStatusClass(card.status) }}">
+                          {{ card.status }}
+                        </span>
+                      </td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-view"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(filteredGiftCards().length === 0)
+                    <tr>
+                      <td colspan="8" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No gift cards found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Gift Card Modal — kept mounted; toggle via :show. -->
+  <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">Create New Gift Card</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="gift-card-code" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Gift Card Code</label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      id="gift-card-code"
+                      x-model="newGiftCardCode"
+                      readonly
+                      class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 bg-gray-50 dark:bg-neutral-700 dark:bg-neutral-900 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"
+                    />
+                    <p class="mt-1 text-gray-500 text-left text-xs dark:text-neutral-400">Auto-generated code</p>
+                  </div>
+                </div>
+
+                <div>
+                  <label for="gift-card-value" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Value</label>
+                  <div class="mt-2">
+                    <div class="relative rounded-md shadow-sm">
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <span class="text-gray-500 sm:text-sm">$</span>
+                      </div>
+                      <input
+                        type="number"
+                        id="gift-card-value"
+                        x-model.number="newGiftCardInitialValue"
+                        class="block pl-7 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"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <label for="recipient-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Recipient Name</label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      id="recipient-name"
+                      x-model="newGiftCardRecipient"
+                      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 recipient name"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label for="recipient-email" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Recipient Email</label>
+                  <div class="mt-2">
+                    <input
+                      type="email"
+                      id="recipient-email"
+                      x-model="newGiftCardEmail"
+                      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 recipient email"
+                    />
+                  </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="newGiftCardExpiryDate"
+                      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>
+          </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="addGiftCard()"
+            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"
+          >
+            Create
+          </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>
+</PageLayout>
+<script client>
+import { useGiftCards } from '../../../../functions/commerce/gift-cards'
+import { useAuth } from '../../../../functions/auth'
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['all', 'Active', 'Used', 'Expired'] as const
+const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year', 'All time'] as const
+
+interface GiftCard {
+  id?: number
+  code: string
+  initial_balance: number
+  current_balance: number
+  customer_id?: number
+  status: string
+  recipient_email?: string
+  recipient_name?: string
+  expiry_date: string | number
+  created_at?: string
+  is_active?: boolean
+  is_digital?: boolean
+}
+
+const { giftCards, createGiftCard, fetchGiftCards } = useGiftCards()
+const { user } = useAuth()
+
+const timeRange = state<string>('Last 30 days')
+const searchQuery = state('')
+const sortBy = state<'initial_balance' | 'current_balance' | 'purchaseDate' | 'expiry_date'>('purchaseDate')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const statusFilter = state<string>('all')
+
+// Modal + form signals.
+const oneYearFromNow = new Date()
+oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
+const futureDate = oneYearFromNow.toISOString().split('T')[0] || ''
+
+const showAddModal = state(false)
+const newGiftCardCode = state('')
+const newGiftCardInitialValue = state(50)
+const newGiftCardRecipient = state('')
+const newGiftCardEmail = state('')
+const newGiftCardExpiryDate = state(futureDate)
+
+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(): { giftCardSalesData: unknown, giftCardRevenueData: unknown } {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  const salesData = [2, 3, 5, 4, 6, 8, 7, 10, 12, 15, 18, 20]
+  const revenueData = [100, 150, 250, 200, 300, 400, 350, 500, 600, 750, 900, 1000]
+
+  return {
+    giftCardSalesData: {
+      labels: months,
+      datasets: [{
+        label: 'Gift Card Sales',
+        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: salesData,
+      }],
+    },
+    giftCardRevenueData: {
+      labels: months,
+      datasets: [{
+        label: 'Gift Card Revenue',
+        backgroundColor: 'rgba(16, 185, 129, 0.8)',
+        borderColor: 'rgba(16, 185, 129, 1)',
+        borderWidth: 1,
+        borderRadius: 4,
+        data: revenueData,
+      }],
+    },
+  }
+}
+
+function giftCardStats(): { activeGiftCards: number, totalGiftCards: number, totalInitialValue: string, totalCurrentBalance: string, totalRedeemed: string, redemptionRate: string } {
+  const list = giftCards.value as GiftCard[]
+  const activeGiftCards = list.filter(c => c.status === 'Active').length
+  const totalGiftCards = list.length
+  const totalInitialValue = list.reduce((sum, c) => sum + c.initial_balance, 0)
+  const totalCurrentBalance = list.reduce((sum, c) => sum + c.current_balance, 0)
+  const totalRedeemed = totalInitialValue - totalCurrentBalance
+  const redemptionRate = totalInitialValue > 0
+    ? ((totalRedeemed / totalInitialValue) * 100).toFixed(1)
+    : '0.0'
+
+  return {
+    activeGiftCards,
+    totalGiftCards,
+    totalInitialValue: totalInitialValue.toFixed(2),
+    totalCurrentBalance: totalCurrentBalance.toFixed(2),
+    totalRedeemed: totalRedeemed.toFixed(2),
+    redemptionRate,
+  }
+}
+
+const filteredGiftCards = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const filter = statusFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return (giftCards.value as GiftCard[])
+    .filter((c) => {
+      const matchesSearch
+        = c.code.toLowerCase().includes(q)
+          || (c.recipient_name?.toLowerCase().includes(q) ?? false)
+          || (c.recipient_email?.toLowerCase().includes(q) ?? false)
+      const matchesStatus = filter === 'all' || c.status === filter
+      return matchesSearch && matchesStatus
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'purchaseDate')
+        cmp = new Date(a.created_at ?? 0).getTime() - new Date(b.created_at ?? 0).getTime()
+      else if (by === 'expiry_date')
+        cmp = new Date(a.expiry_date).getTime() - new Date(b.expiry_date).getTime()
+      else if (by === 'initial_balance')
+        cmp = a.initial_balance - b.initial_balance
+      else if (by === 'current_balance')
+        cmp = a.current_balance - b.current_balance
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+function toggleSort(column: 'initial_balance' | 'current_balance' | 'purchaseDate' | 'expiry_date'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('desc')
+  }
+}
+
+function getStatusClass(status: string): string {
+  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 'Used':
+      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+    case 'Expired':
+      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+    default:
+      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+  }
+}
+
+function generateGiftCardCode(): string {
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  const segment = (): string => {
+    let s = ''
+    for (let i = 0; i < 4; i++)
+      s += chars.charAt(Math.floor(Math.random() * chars.length))
+    return s
+  }
+  return `GFT-${segment()}-${segment()}-${segment()}`
+}
+
+function openAddModal(): void {
+  newGiftCardCode.set(generateGiftCardCode())
+  newGiftCardInitialValue.set(50)
+  newGiftCardRecipient.set('')
+  newGiftCardEmail.set('')
+  newGiftCardExpiryDate.set(futureDate)
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+async function addGiftCard(): Promise<void> {
+  const payload = {
+    code: newGiftCardCode(),
+    initial_balance: newGiftCardInitialValue(),
+    current_balance: newGiftCardInitialValue(),
+    customer_id: (user.value as { id?: number } | null)?.id ?? 1,
+    status: 'Active',
+    recipient_email: newGiftCardEmail(),
+    recipient_name: newGiftCardRecipient(),
+    expiry_date: new Date(newGiftCardExpiryDate()).getTime(),
+    is_active: true,
+    is_digital: true,
+  }
+
+  try {
+    await createGiftCard(payload as unknown as GiftCard)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create gift card:', 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.giftCardSalesData, options: chartOptions },
+  { Chart, id: 'chart_2', type: 'bar', data: chartData.giftCardRevenueData, options: chartOptions },
+])
+
+onMount(async () => {
+  await fetchGiftCards()
+})
+
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@endsection