@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/commerce/printers/devices/index.stx

@@ -0,0 +1,273 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Receipt Printers - Analytics')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Receipt Printers Dashboard" description="Monitor and manage your receipt printers across all locations" />
+
+  <!-- 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 Printers</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalPrinters() }}</dd>
+      <dd class="flex items-center mt-2 text-sm">
+        <span class="text-green-600 dark:text-green-400">{{ onlinePrinters() }} Online</span>
+        <span class="mx-2 text-gray-500 dark:text-neutral-400">•</span>
+        <span class="text-red-600 dark:text-red-400">{{ offlinePrinters() }} Offline</span>
+        <span class="mx-2 text-gray-500 dark:text-neutral-400">•</span>
+        <span class="text-yellow-600 dark:text-yellow-400">{{ warningPrinters() }} Warning</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 Prints</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalPrints().toLocaleString() }}</dd>
+      <dd class="flex items-center mt-2 text-gray-600 text-sm dark:text-neutral-400">
+        <span>Across all printers</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">Error Rate</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ errorRate() }}%</dd>
+      <dd class="flex items-center mt-2 text-gray-600 text-sm dark:text-neutral-400">
+        <span>{{ totalErrors() }} total errors</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">Printer Health</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">
+        {{ healthPercent() }}%
+      </dd>
+      <dd class="flex items-center mt-2 text-sm {{ allHealthy() ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400' }}">
+        <div class="h-4 w-4 mr-1 {{ allHealthy() ? 'i-hugeicons-check-circle' : 'i-hugeicons-alert-01' }}"></div>
+        <span>{{ allHealthy() ? 'All systems operational' : 'Attention needed' }}</span>
+      </dd>
+    </div>
+  </dl>
+
+  <!-- Charts -->
+  <div class="grid gap-5 grid-cols-1 lg:grid-cols-3 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">Printer Status</h3>
+        <div class="mt-2 h-64">
+          <canvas id="chart_1"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-hidden lg:col-span-2 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">Print Volume by Printer</h3>
+        <div class="mt-2 h-64">
+          <canvas id="chart_2"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap gap-4 mt-8">
+    <div class="w-full sm:w-auto">
+      <label for="location-filter" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Location</label>
+      <select id="location-filter" x-model="locationFilter" class="block mt-1 pl-3 pr-10 py-2 w-full text-base sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+        <template :for="location in locations">
+          <option :value="location">{{ location }}</option>
+        </template>
+      </select>
+    </div>
+    <div class="w-full sm:w-auto">
+      <label for="status-filter" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Status</label>
+      <select id="status-filter" x-model="statusFilter" class="block mt-1 pl-3 pr-10 py-2 w-full text-base sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+        <template :for="status in statuses">
+          <option :value="status">{{ status }}</option>
+        </template>
+      </select>
+    </div>
+  </div>
+
+  <!-- Printers Table -->
+  <div class="mt-4">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center justify-between px-4 py-5 sm:px-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Receipt Printers</h3>
+        <span class="text-gray-500 text-sm dark:text-neutral-400">Showing {{ filteredPrinters().length }} of {{ totalPrinters() }} printers</span>
+      </div>
+      <div class="border-gray-200 border-t dark:border-neutral-700">
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700">
+              <tr>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Name</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Mac Address</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Location</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Terminal</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Status</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Last Ping</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Print Count</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="printer in filteredPrinters">
+                <tr>
+                  <td class="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ printer.username }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ printer.macAddress }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ printer.location }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ printer.terminal }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex px-2 font-semibold leading-5 text-xs rounded-full {{ statusBadgeClass(printer.status) }}">
+                      {{ printer.status }}
+                    </span>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ printer.lastPing }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                    {{ printer.printCount.toLocaleString() }}
+                    @if(printer.errorCount > 0)
+                      <span class="ml-1 text-red-500 text-xs">({{ printer.errorCount }} errors)</span>
+                    @endif
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                    <div class="flex space-x-2">
+                      <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-refresh"></div>
+                      </button>
+                      <button class="text-gray-400 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-gray-300 duration-150 transition-colors">
+                        <div class="h-5 w-5 i-hugeicons-settings-02"></div>
+                      </button>
+                      <button class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                        <div class="h-5 w-5 i-hugeicons-electric-plugs"></div>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Error Rate Chart -->
+  <div class="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">Error Count by Printer</h3>
+        <div class="mt-2 h-64">
+          <canvas id="chart_3"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const locations = ['All Locations', 'Main Floor', 'Second Floor', 'Kitchen', 'Pickup Area'] as const
+const statuses = ['All Statuses', 'Online', 'Offline', 'Warning'] as const
+
+interface Printer {
+  id: number
+  username: string
+  macAddress: string
+  location: string
+  terminal: string
+  status: 'Online' | 'Offline' | 'Warning'
+  lastPing: string
+  printCount: number
+  errorCount: number
+}
+
+const initialPrinters: Printer[] = [
+  { id: 1, username: 'Checkout-1', macAddress: '00:1B:44:11:3A:B7', location: 'Main Floor', terminal: 'POS-1', status: 'Online', lastPing: '2 mins ago', printCount: 1245, errorCount: 3 },
+  { id: 2, username: 'Checkout-2', macAddress: '00:1B:44:11:3A:C8', location: 'Main Floor', terminal: 'POS-2', status: 'Online', lastPing: '1 min ago', printCount: 987, errorCount: 0 },
+  { id: 3, username: 'Kitchen-1', macAddress: '00:1B:44:11:3B:D9', location: 'Kitchen', terminal: 'KDS-1', status: 'Offline', lastPing: '3 hours ago', printCount: 876, errorCount: 12 },
+  { id: 4, username: 'Checkout-3', macAddress: '00:1B:44:11:3C:E0', location: 'Second Floor', terminal: 'POS-3', status: 'Online', lastPing: '5 mins ago', printCount: 765, errorCount: 1 },
+  { id: 5, username: 'Pickup-1', macAddress: '00:1B:44:11:3D:F1', location: 'Pickup Area', terminal: 'POS-4', status: 'Warning', lastPing: '10 mins ago', printCount: 654, errorCount: 5 },
+  { id: 6, username: 'Checkout-4', macAddress: '00:1B:44:11:3E:02', location: 'Main Floor', terminal: 'POS-5', status: 'Online', lastPing: '3 mins ago', printCount: 543, errorCount: 0 },
+  { id: 7, username: 'Kitchen-2', macAddress: '00:1B:44:11:3F:13', location: 'Kitchen', terminal: 'KDS-2', status: 'Online', lastPing: '4 mins ago', printCount: 432, errorCount: 2 },
+]
+
+const printers = state(initialPrinters)
+const locationFilter = state<string>('All Locations')
+const statusFilter = state<string>('All Statuses')
+
+const filteredPrinters = derived(() => {
+  const lFilter = locationFilter()
+  const sFilter = statusFilter()
+  return printers().filter(p =>
+    (lFilter === 'All Locations' || p.location === lFilter)
+    && (sFilter === 'All Statuses' || p.status === sFilter),
+  )
+})
+
+const totalPrinters = derived(() => printers().length)
+const onlinePrinters = derived(() => printers().filter(p => p.status === 'Online').length)
+const offlinePrinters = derived(() => printers().filter(p => p.status === 'Offline').length)
+const warningPrinters = derived(() => printers().filter(p => p.status === 'Warning').length)
+const totalPrints = derived(() => printers().reduce((sum, p) => sum + p.printCount, 0))
+const totalErrors = derived(() => printers().reduce((sum, p) => sum + p.errorCount, 0))
+const errorRate = derived(() => totalPrints() > 0 ? ((totalErrors() / totalPrints()) * 100).toFixed(2) : '0.00')
+const healthPercent = derived(() => totalPrinters() > 0 ? Math.round((onlinePrinters() / totalPrinters()) * 100) : 0)
+const allHealthy = derived(() => onlinePrinters() === totalPrinters() && totalPrinters() > 0)
+
+function statusBadgeClass(status: string): string {
+  switch (status) {
+    case 'Online': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+    case 'Offline': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
+    case 'Warning': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+    default: return 'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-300'
+  }
+}
+
+const statusData = {
+  labels: ['Online', 'Offline', 'Warning'],
+  datasets: [{ backgroundColor: ['#10B981', '#EF4444', '#F59E0B'], data: [5, 1, 1] }],
+}
+
+const printVolumeData = {
+  labels: ['Checkout-1', 'Checkout-2', 'Kitchen-1', 'Checkout-3', 'Pickup-1', 'Checkout-4', 'Kitchen-2'],
+  datasets: [{ label: 'Print Count', backgroundColor: 'rgba(59, 130, 246, 0.8)', data: [1245, 987, 876, 765, 654, 543, 432] }],
+}
+
+const errorRateData = {
+  labels: ['Checkout-1', 'Checkout-2', 'Kitchen-1', 'Checkout-3', 'Pickup-1', 'Checkout-4', 'Kitchen-2'],
+  datasets: [{ label: 'Error Count', backgroundColor: 'rgba(239, 68, 68, 0.8)', data: [3, 0, 12, 1, 5, 0, 2] }],
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: { legend: { display: true, position: 'bottom' } },
+}
+
+const barChartOptions = {
+  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 } },
+  },
+}
+
+const { Chart, registerables } = await import('@stacksjs/charts')
+Chart.register(...registerables)
+
+const { destroyAll } = useCharts([
+  { Chart, id: 'chart_1', type: 'pie', data: statusData, options: chartOptions },
+  { Chart, id: 'chart_2', type: 'bar', data: printVolumeData, options: barChartOptions },
+  { Chart, id: 'chart_3', type: 'bar', data: errorRateData, options: barChartOptions },
+])
+
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@endsection

package/views/dashboard/commerce/printers/receipts/index.stx

@@ -0,0 +1,308 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Printer Logs - Analytics')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Print Logs" description="View and analyze all print jobs across your receipt printers" />
+
+  <!-- Stats — sample summary numbers used by all four cards. -->
+  <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 Print Jobs</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalPrintsSummary }}</dd>
+      <dd class="flex items-center mt-2 text-sm">
+        <span class="text-green-600 dark:text-green-400">{{ successfulPrints }} Successful</span>
+        <span class="mx-2 text-gray-500 dark:text-neutral-400">•</span>
+        <span class="text-red-600 dark:text-red-400">{{ failedPrints }} Failed</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">{{ successRate }}%</dd>
+      <dd class="flex items-center mt-2 text-gray-600 text-sm dark:text-neutral-400">
+        <span>{{ warningPrints }} prints with warnings</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 Pages</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalPages }}</dd>
+      <dd class="flex items-center mt-2 text-gray-600 text-sm dark:text-neutral-400">
+        <span>Avg. {{ pagesPerPrint }} pages per print</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">Average Print Time</dt>
+      <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ averagePrintTime }}</dd>
+      <dd class="flex items-center mt-2 text-gray-600 text-sm dark:text-neutral-400">
+        <span>For successful prints</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">Hourly Print Volume</h3>
+        <div class="mt-2 h-64">
+          <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">Print Volume by Printer</h3>
+        <div class="mt-2 h-64">
+          <canvas id="chart_2"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap gap-4 mt-8">
+    <div class="w-full sm:w-auto">
+      <label for="printer-filter" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Printer</label>
+      <select id="printer-filter" x-model="printerFilter" class="block mt-1 pl-3 pr-10 py-2 w-full text-base sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+        <template :for="printer in printerOptions">
+          <option :value="printer">{{ printer }}</option>
+        </template>
+      </select>
+    </div>
+    <div class="w-full sm:w-auto">
+      <label for="status-filter" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Status</label>
+      <select id="status-filter" x-model="statusFilter" class="block mt-1 pl-3 pr-10 py-2 w-full text-base sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+        <template :for="status in statuses">
+          <option :value="status">{{ status }}</option>
+        </template>
+      </select>
+    </div>
+    <div class="w-full sm:w-auto">
+      <label for="date-filter" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Date Range</label>
+      <select id="date-filter" x-model="dateFilter" class="block mt-1 pl-3 pr-10 py-2 w-full text-base sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+        <template :for="range in dateRanges">
+          <option :value="range">{{ range }}</option>
+        </template>
+      </select>
+    </div>
+  </div>
+
+  <!-- Print Logs Table -->
+  <div class="mt-4">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="flex items-center justify-between px-4 py-5 sm:px-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Print Logs</h3>
+        <span class="text-gray-500 text-sm dark:text-neutral-400">Showing {{ filteredPrints().length }} of {{ totalPrints() }} prints</span>
+      </div>
+      <div class="border-gray-200 border-t dark:border-neutral-700">
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700">
+              <tr>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">ID</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Printer</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Document</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Timestamp</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Status</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Duration</th>
+                <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="print in filteredPrints">
+                <tr>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">#{{ print.id.toString().padStart(6, '0') }}</td>
+                  <td class="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ print.printer }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ print.document }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ print.timestamp }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex px-2 font-semibold leading-5 text-xs rounded-full {{ statusBadgeClass(print.status) }}">
+                      {{ print.status }}
+                    </span>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ print.duration }}</td>
+                  <td class="px-6 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <div class="flex space-x-2">
+                      <button class="text-gray-400 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-gray-300 duration-150 transition-colors" title="View Details">
+                        <div class="h-5 w-5 i-hugeicons-view"></div>
+                      </button>
+                      <button class="text-gray-400 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-gray-300 duration-150 transition-colors" title="Reprint">
+                        <div class="h-5 w-5 i-hugeicons-refresh"></div>
+                      </button>
+                      <button class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors" title="Delete">
+                        <div class="h-5 w-5 i-hugeicons-waste"></div>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Pagination — static skeleton; no live wiring yet. -->
+  <div class="flex items-center justify-between mt-4 px-4 py-3 sm:px-6 border-gray-200 border-t dark:border-neutral-700">
+    <div class="flex sm:hidden flex-1 justify-between">
+      <a href="#" class="inline-flex relative items-center px-4 py-2 font-medium text-gray-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">Previous</a>
+      <a href="#" class="inline-flex relative items-center ml-3 px-4 py-2 font-medium text-gray-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">Next</a>
+    </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">1</span> to <span class="font-medium">15</span> of <span class="font-medium">755</span> results
+        </p>
+      </div>
+      <div>
+        <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+          <a href="#" 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">
+            <span class="sr-only">Previous</span>
+            <div class="h-5 w-5 i-hugeicons-arrow-left-01" aria-hidden="true"></div>
+          </a>
+          <a href="#" aria-current="page" class="inline-flex relative z-10 focus:z-20 items-center px-4 py-2 font-semibold text-sm text-white bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2">1</a>
+          <a href="#" class="inline-flex relative focus:z-20 items-center px-4 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset dark:ring-neutral-600 focus:outline-offset-0">2</a>
+          <a href="#" class="hidden md:inline-flex relative focus:z-20 items-center px-4 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset dark:ring-neutral-600 focus:outline-offset-0">3</a>
+          <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>
+          <a href="#" class="hidden md:inline-flex relative focus:z-20 items-center px-4 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-200 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset dark:ring-neutral-600 focus:outline-offset-0">50</a>
+          <a href="#" 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">
+            <span class="sr-only">Next</span>
+            <div class="h-5 w-5 i-hugeicons-arrow-right-01" aria-hidden="true"></div>
+          </a>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const printerOptions = ['All Printers', 'Checkout-1', 'Checkout-2', 'Checkout-3', 'Checkout-4', 'Kitchen-1', 'Kitchen-2', 'Pickup-1'] as const
+const statuses = ['All Statuses', 'Success', 'Warning', 'Failed'] as const
+const dateRanges = ['Today', 'Yesterday', 'Last 7 days', 'Last 30 days', 'This month', 'Last month'] as const
+
+interface PrintLog {
+  id: number
+  printer: string
+  document: string
+  timestamp: string
+  status: 'Success' | 'Warning' | 'Failed'
+  size: string
+  pages: number
+  duration: string
+}
+
+const initialPrints: PrintLog[] = [
+  { id: 1, printer: 'Checkout-1', document: 'Receipt #5432', timestamp: '2023-12-01 14:32:45', status: 'Success', size: '8.5KB', pages: 1, duration: '1.2s' },
+  { id: 2, printer: 'Checkout-2', document: 'Receipt #5431', timestamp: '2023-12-01 14:30:12', status: 'Success', size: '9.1KB', pages: 1, duration: '1.3s' },
+  { id: 3, printer: 'Kitchen-1', document: 'Order #5430', timestamp: '2023-12-01 14:28:55', status: 'Failed', size: '12.3KB', pages: 2, duration: '0.0s' },
+  { id: 4, printer: 'Checkout-3', document: 'Receipt #5429', timestamp: '2023-12-01 14:25:33', status: 'Success', size: '8.7KB', pages: 1, duration: '1.1s' },
+  { id: 5, printer: 'Pickup-1', document: 'Pickup #5428', timestamp: '2023-12-01 14:22:18', status: 'Success', size: '10.2KB', pages: 1, duration: '1.4s' },
+  { id: 6, printer: 'Kitchen-1', document: 'Order #5427', timestamp: '2023-12-01 14:20:05', status: 'Success', size: '11.8KB', pages: 2, duration: '2.1s' },
+  { id: 7, printer: 'Checkout-1', document: 'Receipt #5426', timestamp: '2023-12-01 14:18:42', status: 'Success', size: '8.3KB', pages: 1, duration: '1.2s' },
+  { id: 8, printer: 'Kitchen-2', document: 'Order #5425', timestamp: '2023-12-01 14:15:30', status: 'Warning', size: '12.5KB', pages: 2, duration: '3.5s' },
+  { id: 9, printer: 'Checkout-4', document: 'Receipt #5424', timestamp: '2023-12-01 14:12:22', status: 'Success', size: '8.9KB', pages: 1, duration: '1.3s' },
+  { id: 10, printer: 'Checkout-2', document: 'Receipt #5423', timestamp: '2023-12-01 14:10:15', status: 'Success', size: '9.0KB', pages: 1, duration: '1.2s' },
+  { id: 11, printer: 'Kitchen-1', document: 'Order #5422', timestamp: '2023-12-01 14:08:03', status: 'Success', size: '11.7KB', pages: 2, duration: '2.0s' },
+  { id: 12, printer: 'Checkout-3', document: 'Receipt #5421', timestamp: '2023-12-01 14:05:48', status: 'Success', size: '8.6KB', pages: 1, duration: '1.1s' },
+  { id: 13, printer: 'Pickup-1', document: 'Pickup #5420', timestamp: '2023-12-01 14:02:35', status: 'Failed', size: '10.1KB', pages: 1, duration: '0.0s' },
+  { id: 14, printer: 'Kitchen-2', document: 'Order #5419', timestamp: '2023-12-01 14:00:20', status: 'Success', size: '12.0KB', pages: 2, duration: '2.2s' },
+  { id: 15, printer: 'Checkout-1', document: 'Receipt #5418', timestamp: '2023-12-01 13:58:05', status: 'Success', size: '8.4KB', pages: 1, duration: '1.2s' },
+]
+
+const prints = state(initialPrints)
+const printerFilter = state<string>('All Printers')
+const statusFilter = state<string>('All Statuses')
+const dateFilter = state<string>('Today')
+
+const filteredPrints = derived(() => {
+  const pFilter = printerFilter()
+  const sFilter = statusFilter()
+  return prints().filter(p =>
+    (pFilter === 'All Printers' || p.printer === pFilter)
+    && (sFilter === 'All Statuses' || p.status === sFilter),
+  )
+})
+
+const totalPrints = derived(() => prints().length)
+
+// Summary cards use canned numbers — these are the page-wide rollup
+// values, not derived from `prints[]` (which is just the log slice).
+const totalPrintsSummary = 755
+const successfulPrints = 732
+const failedPrints = 15
+const warningPrints = 8
+const successRate = ((successfulPrints / totalPrintsSummary) * 100).toFixed(1)
+const averagePrintTime = '1.4s'
+const totalPages = 1105
+const pagesPerPrint = (totalPages / totalPrintsSummary).toFixed(1)
+
+function statusBadgeClass(status: string): string {
+  switch (status) {
+    case 'Success': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+    case 'Failed': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
+    case 'Warning': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+    default: return 'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-300'
+  }
+}
+
+const hourlyPrintData = {
+  labels: ['9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM'],
+  datasets: [{
+    label: 'Print Volume',
+    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: [25, 38, 45, 56, 48, 52, 45, 42, 38, 30, 22, 15],
+  }],
+}
+
+const printerVolumeData = {
+  labels: ['Checkout-1', 'Checkout-2', 'Checkout-3', 'Checkout-4', 'Kitchen-1', 'Kitchen-2', 'Pickup-1'],
+  datasets: [{
+    label: 'Print Count',
+    backgroundColor: 'rgba(16, 185, 129, 0.8)',
+    borderColor: 'rgba(16, 185, 129, 1)',
+    borderWidth: 1,
+    borderRadius: 4,
+    data: [120, 105, 95, 85, 150, 130, 70],
+  }],
+}
+
+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 } },
+  },
+}
+
+const { Chart, registerables } = await import('@stacksjs/charts')
+Chart.register(...registerables)
+
+const { destroyAll } = useCharts([
+  { Chart, id: 'chart_1', type: 'line', data: hourlyPrintData, options: chartOptions },
+  { Chart, id: 'chart_2', type: 'bar', data: printerVolumeData, options: chartOptions },
+])
+
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@endsection