@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,535 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Payments')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Payments" description="Manage payment transactions for your store" />
+        <div class="mt-4 sm:mt-0">
+          <button
+            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-1 h-5 w-5 i-hugeicons-download-04"></div>
+            Export transactions
+          </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 payment transactions
+        </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">
+            @foreach(timeRanges as range)
+              <option value="{{ range }}">{{ range }}</option>
+            @endforeach
+          </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">Total Transactions</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ paymentStats().totalTransactions }}</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">Success Rate</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ paymentStats().successRate }}%</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.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">Total Revenue</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ Number.parseFloat(paymentStats().totalAmount).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">Avg. Transaction</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">${{ paymentStats().avgTransactionValue }}</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>3.7% 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">Transaction Count</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">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 transactions..."
+          />
+        </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"
+          >
+            @foreach(statuses as status)
+              <option value="{{ status }}">{{ status === 'all' ? 'All Statuses' : status }}</option>
+            @endforeach
+          </select>
+
+          <select
+            x-model="methodFilter"
+            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"
+          >
+            @foreach(methods as method)
+              <option value="{{ method }}">{{ method === 'all' ? 'All Payment Methods' : method }}</option>
+            @endforeach
+          </select>
+        </div>
+      </div>
+
+      <!-- Transactions 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 Transactions</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+            A list of all payment transactions including order ID, customer, amount, 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">
+                      <button @click="toggleSort('orderId')" class="inline-flex items-center group">
+                        Order ID
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'orderId' ? (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('customer')" class="inline-flex items-center group">
+                        Customer
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'customer' ? (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('amount')" class="inline-flex items-center group">
+                        Amount
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'amount' ? (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">Method</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="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('date')" class="inline-flex items-center group">
+                        Date
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === '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="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="transaction in paginatedTransactions">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                        {{ transaction.orderId }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">
+                        <div>{{ transaction.customer }}</div>
+                        <div class="text-gray-400 text-xs">{{ transaction.email }}</div>
+                      </td>
+                      <td class="px-3 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                        ${{ transaction.amount.toFixed(2) }}
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        <div class="flex items-center">
+                          <div class="{{ getPaymentMethodIcon(transaction.method) }} h-5 w-5 mr-1.5 text-gray-500 dark:text-neutral-400"></div>
+                          <span>{{ transaction.method }}</span>
+                          @if(transaction.last4)
+                            <span class="ml-1 text-gray-400 text-xs">
+                              ({{ transaction.cardType }} •••• {{ transaction.last4 }})
+                            </span>
+                          @endif
+                        </div>
+                      </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(transaction.status) }}">
+                          {{ transaction.status }}
+                        </span>
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        {{ transaction.date }}
+                      </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-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">
+                            <div class="h-5 w-5 i-hugeicons-view"></div>
+                          </button>
+                          <button type="button" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">
+                            <div class="h-5 w-5 i-hugeicons-receipt-dollar"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(paginatedTransactions().length === 0)
+                    <tr>
+                      <td colspan="7" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No transactions found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div :show="totalPages() > 1" class="flex items-center justify-between mt-6">
+        <div class="flex sm:hidden flex-1 justify-between">
+          <button
+            @click="changePage(Math.max(1, currentPage() - 1))"
+            :disabled="currentPage() === 1"
+            class="{{ currentPage() === 1 ? 'cursor-not-allowed opacity-50' : '' }} relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+          >
+            Previous
+          </button>
+          <button
+            @click="changePage(Math.min(totalPages(), currentPage() + 1))"
+            :disabled="currentPage() === totalPages()"
+            class="{{ currentPage() === totalPages() ? 'cursor-not-allowed opacity-50' : '' }} relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+          >
+            Next
+          </button>
+        </div>
+        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+          <div>
+            <p class="text-gray-700 text-sm dark:text-neutral-300">
+              Showing <span class="font-medium">{{ ((currentPage() - 1) * itemsPerPage()) + 1 }}</span> to <span class="font-medium">{{ Math.min(currentPage() * itemsPerPage(), filteredTransactions().length) }}</span> of <span class="font-medium">{{ filteredTransactions().length }}</span> results
+            </p>
+          </div>
+          <div>
+            <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+              <button
+                @click="changePage(Math.max(1, currentPage() - 1))"
+                :disabled="currentPage() === 1"
+                class="inline-flex relative focus:z-20 items-center px-2 py-2 text-gray-400 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-600 focus:outline-offset-0 {{ currentPage() === 1 ? 'cursor-not-allowed opacity-50' : '' }}"
+              >
+                <span class="sr-only">Previous</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+              </button>
+
+              <template :for="page in visiblePages">
+                @if(page === '...')
+                  <span class="inline-flex relative items-center px-4 py-2 font-semibold text-gray-700 text-sm dark:text-neutral-400 ring-1 ring-gray-300 ring-inset dark:ring-neutral-600 focus:outline-offset-0">
+                    ...
+                  </span>
+                @else
+                  <button
+                    @click="changePage(page)"
+                    class="{{ page === currentPage() ? 'relative z-10 inline-flex items-center bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600' : 'relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-neutral-200 dark:ring-neutral-600 dark:hover:bg-neutral-700' }}"
+                  >
+                    {{ page }}
+                  </button>
+                @endif
+              </template>
+
+              <button
+                @click="changePage(Math.min(totalPages(), currentPage() + 1))"
+                :disabled="currentPage() === totalPages()"
+                class="inline-flex relative focus:z-20 items-center px-2 py-2 text-gray-400 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-r-md dark:ring-neutral-600 focus:outline-offset-0 {{ currentPage() === totalPages() ? 'cursor-not-allowed opacity-50' : '' }}"
+              >
+                <span class="sr-only">Next</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['all', 'Completed', 'Pending', 'Failed', 'Refunded'] as const
+const methods = ['all', 'Credit Card', 'PayPal', 'Apple Pay', 'Google Pay', 'Bank Transfer'] as const
+const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year', 'All time'] as const
+
+interface PaymentTransaction {
+  id: number
+  orderId: string
+  customer: string
+  email: string
+  amount: number
+  method: string
+  status: string
+  date: string
+  cardType?: string
+  last4?: string
+}
+
+const initialTransactions: PaymentTransaction[] = [
+  { id: 1, orderId: 'ORD-12345', customer: 'John Smith', email: 'john.smith@example.com', amount: 129.99, method: 'Credit Card', status: 'Completed', date: '2023-11-15', cardType: 'Visa', last4: '4242' },
+  { id: 2, orderId: 'ORD-12346', customer: 'Emily Davis', email: 'emily.davis@example.com', amount: 79.50, method: 'PayPal', status: 'Completed', date: '2023-11-16' },
+  { id: 3, orderId: 'ORD-12347', customer: 'Michael Johnson', email: 'mjohnson@example.com', amount: 249.99, method: 'Credit Card', status: 'Failed', date: '2023-11-17', cardType: 'Mastercard', last4: '5678' },
+  { id: 4, orderId: 'ORD-12348', customer: 'Sarah Williams', email: 'swilliams@example.com', amount: 59.99, method: 'Credit Card', status: 'Pending', date: '2023-11-18', cardType: 'Amex', last4: '9876' },
+  { id: 5, orderId: 'ORD-12349', customer: 'David Brown', email: 'dbrown@example.com', amount: 149.95, method: 'Apple Pay', status: 'Completed', date: '2023-11-19' },
+]
+
+const transactions = state(initialTransactions)
+const timeRange = state<string>('Last 30 days')
+const searchQuery = state('')
+const sortBy = state<'orderId' | 'customer' | 'amount' | 'date'>('date')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const statusFilter = state<string>('all')
+const methodFilter = state<string>('all')
+const currentPage = state(1)
+const itemsPerPage = state(10)
+
+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(): { transactionCountChartData: unknown, revenueChartData: unknown } {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  const transactionCountData = [45, 52, 49, 60, 72, 68, 80, 91, 87, 94, 102, 110]
+  const revenueData = [5500, 6200, 5900, 7500, 8800, 8200, 9600, 11000, 10500, 11800, 12500, 13800]
+
+  return {
+    transactionCountChartData: {
+      labels: months,
+      datasets: [{
+        label: 'Transaction Count',
+        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: transactionCountData,
+      }],
+    },
+    revenueChartData: {
+      labels: months,
+      datasets: [{
+        label: 'Revenue',
+        backgroundColor: 'rgba(16, 185, 129, 0.8)',
+        borderColor: 'rgba(16, 185, 129, 1)',
+        borderWidth: 1,
+        borderRadius: 4,
+        data: revenueData,
+      }],
+    },
+  }
+}
+
+function paymentStats(): { totalTransactions: number, completedTransactions: number, pendingTransactions: number, failedTransactions: number, totalAmount: string, avgTransactionValue: string, successRate: string, mostPopularMethod: string } {
+  const list = transactions()
+  const completedTransactions = list.filter(t => t.status === 'Completed').length
+  const pendingTransactions = list.filter(t => t.status === 'Pending').length
+  const failedTransactions = list.filter(t => t.status === 'Failed').length
+
+  const totalAmount = list.reduce(
+    (sum, t) => t.status === 'Completed' ? sum + t.amount : sum,
+    0,
+  )
+  const avgTransactionValue = completedTransactions > 0
+    ? (totalAmount / completedTransactions).toFixed(2)
+    : '0.00'
+  const totalProcessed = completedTransactions + failedTransactions
+  const successRate = totalProcessed > 0
+    ? ((completedTransactions / totalProcessed) * 100).toFixed(1)
+    : '0.0'
+
+  const methodCounts = list.reduce<Record<string, number>>((counts, t) => {
+    counts[t.method] = (counts[t.method] || 0) + 1
+    return counts
+  }, {})
+  let mostPopularMethod = 'Credit Card'
+  let maxCount = 0
+  for (const [method, count] of Object.entries(methodCounts)) {
+    if (count > maxCount) { maxCount = count; mostPopularMethod = method }
+  }
+
+  return {
+    totalTransactions: list.length,
+    completedTransactions,
+    pendingTransactions,
+    failedTransactions,
+    totalAmount: totalAmount.toFixed(2),
+    avgTransactionValue,
+    successRate,
+    mostPopularMethod,
+  }
+}
+
+const filteredTransactions = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const sFilter = statusFilter()
+  const mFilter = methodFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return transactions()
+    .filter((t) => {
+      const matchesSearch
+        = t.orderId.toLowerCase().includes(q)
+          || t.customer.toLowerCase().includes(q)
+          || t.email.toLowerCase().includes(q)
+      const matchesStatus = sFilter === 'all' || t.status === sFilter
+      const matchesMethod = mFilter === 'all' || t.method === mFilter
+      return matchesSearch && matchesStatus && matchesMethod
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'date')
+        cmp = new Date(a.date).getTime() - new Date(b.date).getTime()
+      else if (by === 'amount')
+        cmp = a.amount - b.amount
+      else if (by === 'orderId')
+        cmp = a.orderId.localeCompare(b.orderId)
+      else if (by === 'customer')
+        cmp = a.customer.localeCompare(b.customer)
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const totalPages = derived(() => Math.ceil(filteredTransactions().length / itemsPerPage()))
+
+const paginatedTransactions = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredTransactions().slice(start, start + itemsPerPage())
+})
+
+// Page numbers to render in the desktop pagination — first/last + a window
+// of 3 around current, with '…' ellipsis where the gap is bigger than 1.
+const visiblePages = derived<(number | '...')[]>(() => {
+  const total = totalPages()
+  const cur = currentPage()
+  const out: (number | '...')[] = []
+  for (let p = 1; p <= total; p++) {
+    if (p === cur || p === 1 || p === total || (p >= cur - 1 && p <= cur + 1)) {
+      out.push(p)
+    }
+    else if ((p === cur - 2 && cur > 3) || (p === cur + 2 && cur < total - 2)) {
+      out.push('...')
+    }
+  }
+  return out
+})
+
+function toggleSort(column: 'orderId' | 'customer' | 'amount' | 'date'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('desc')
+  }
+}
+
+function changePage(page: number): void {
+  currentPage.set(page)
+}
+
+function getStatusClass(status: string): string {
+  switch (status) {
+    case 'Completed':
+      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 'Pending':
+      return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
+    case 'Failed':
+      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+    case 'Refunded':
+      return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-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 getPaymentMethodIcon(method: string): string {
+  switch (method) {
+    case 'Credit Card': return 'i-hugeicons-credit-card'
+    case 'PayPal': return 'i-hugeicons-paypal'
+    case 'Apple Pay': return 'i-hugeicons-apple'
+    case 'Google Pay': return 'i-hugeicons-google'
+    case 'Bank Transfer': return 'i-hugeicons-bank'
+    default: return 'i-hugeicons-credit-card'
+  }
+}
+
+const { Chart, registerables } = await import('@stacksjs/charts')
+Chart.register(...registerables)
+
+const chartData = monthlyChartData()
+const { destroyAll } = useCharts([
+  { Chart, id: 'chart_1', type: 'line', data: chartData.transactionCountChartData, options: chartOptions },
+  { Chart, id: 'chart_2', type: 'bar', data: chartData.revenueChartData, options: chartOptions },
+])
+
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@endsection