@stacksjs/defaults 0.70.229 → 0.70.230

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

@@ -2,534 +2,9 @@
 
 @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>
+<div class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <CommercePaymentsDashboard />
+</div>
 
 @endsection