@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/analytics/commerce/sales/index.stx

@@ -0,0 +1,329 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Sales Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 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">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 mb-8 p-4 bg-black dark:bg-neutral-900 rounded-lg">
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">$1.25M</div>
+          <div class="text-gray-400 text-sm">Total Revenue</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">34.6k</div>
+          <div class="text-gray-400 text-sm">Total Orders</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">${{ salesOverview.averageOrderValue }}</div>
+          <div class="text-gray-400 text-sm">Avg Order Value</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ salesOverview.conversionRate }}</div>
+          <div class="text-gray-400 text-sm">Conversion Rate</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ salesOverview.returnRate }}</div>
+          <div class="text-gray-400 text-sm">Return Rate</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ salesOverview.repeatCustomerRate }}</div>
+          <div class="text-gray-400 text-sm">Repeat Customers</div>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Sales Overview</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Revenue and order volume over time</p>
+        </div>
+        <div class="h-80 w-full">
+          <canvas id="commerce_sales_chart"></canvas>
+        </div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+        <div>
+          <div class="mb-4">
+            <h3 class="font-medium text-gray-900 text-lg dark:text-white">Top Products</h3>
+          </div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Product</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Sales</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Revenue</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="product in productsData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-green-100/50 dark:bg-green-900/50" :style="'width: ' + product.percentage + '%'"></div>
+                      <span class="relative z-10">{{ product.name }}</span>
+                      <span class="block relative z-10 text-gray-500 text-xs dark:text-neutral-400">{{ product.sku }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ formatNumber(product.sales) }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ formatCurrency(product.revenue) }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ product.percentage }}%</span>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2">
+            <StxLink to="/dashboard/commerce/analytics/sales/products" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all products</StxLink>
+          </div>
+        </div>
+
+        <div>
+          <div class="mb-4">
+            <h3 class="font-medium text-gray-900 text-lg dark:text-white">Categories</h3>
+          </div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Category</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Sales</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Revenue</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="category in categoriesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" :style="'width: ' + category.percentage + '%'"></div>
+                      <span class="relative z-10">{{ category.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ formatNumber(category.sales) }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ formatCurrency(category.revenue) }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                      <span class="relative z-10">{{ category.percentage }}%</span>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2">
+            <StxLink to="/dashboard/commerce/analytics/sales/categories" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all categories</StxLink>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Top Customers</h3>
+        </div>
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Customer</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Orders</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Total Spent</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="customer in customersData">
+                <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <div class="absolute inset-0 bg-purple-100/50 dark:bg-purple-900/50" :style="'width: ' + customer.percentage + '%'"></div>
+                    <span class="relative z-10">{{ customer.name }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ customer.orders }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ formatCurrency(customer.spent) }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ customer.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div class="flex justify-end mt-2">
+          <StxLink to="/dashboard/commerce/analytics/sales/customers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all customers</StxLink>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+// Static analytics tables + overview — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const productsRaw = [
+  { name: 'Smartphone X Pro', sku: 'SP-X-PRO', sales: 1245, revenue: 623450 },
+  { name: 'Wireless Earbuds', sku: 'WE-200', sales: 3567, revenue: 178350 },
+  { name: 'Smart Watch Series 5', sku: 'SW-S5', sales: 2134, revenue: 149380 },
+  { name: 'Laptop Ultra Slim', sku: 'LT-US-15', sales: 876, revenue: 131400 },
+  { name: 'Bluetooth Speaker', sku: 'BS-100', sales: 1543, revenue: 61720 },
+  { name: 'Fitness Tracker', sku: 'FT-300', sales: 1876, revenue: 56280 },
+  { name: 'Tablet Pro 12', sku: 'TB-P12', sales: 654, revenue: 45780 },
+  { name: 'Gaming Mouse', sku: 'GM-RGB', sales: 1234, revenue: 43190 },
+  { name: 'Mechanical Keyboard', sku: 'KB-MECH', sales: 987, revenue: 39480 },
+  { name: 'External SSD 1TB', sku: 'SSD-1TB', sales: 765, revenue: 38250 },
+]
+
+const categoriesRaw = [
+  { name: 'Electronics', sales: 5678, revenue: 850200 },
+  { name: 'Clothing', sales: 4532, revenue: 226600 },
+  { name: 'Home & Kitchen', sales: 3210, revenue: 160500 },
+  { name: 'Beauty & Personal Care', sales: 2876, revenue: 143800 },
+  { name: 'Sports & Outdoors', sales: 1987, revenue: 99350 },
+  { name: 'Books', sales: 1654, revenue: 33080 },
+  { name: 'Toys & Games', sales: 1432, revenue: 57280 },
+  { name: 'Health & Household', sales: 1234, revenue: 61700 },
+  { name: 'Automotive', sales: 876, revenue: 43800 },
+  { name: 'Pet Supplies', sales: 765, revenue: 38250 },
+]
+
+const customersRaw = [
+  { name: 'John Smith', orders: 24, spent: 4800 },
+  { name: 'Sarah Johnson', orders: 18, spent: 3600 },
+  { name: 'Michael Brown', orders: 15, spent: 3000 },
+  { name: 'Emily Davis', orders: 12, spent: 2400 },
+  { name: 'David Wilson', orders: 10, spent: 2000 },
+]
+
+const totalProductRevenue = productsRaw.reduce((s, p) => s + p.revenue, 0)
+const totalCategoryRevenue = categoriesRaw.reduce((s, c) => s + c.revenue, 0)
+const totalCustomerSpent = customersRaw.reduce((s, c) => s + c.spent, 0)
+
+const productsData = productsRaw.map(p => ({ ...p, percentage: Math.round((p.revenue / totalProductRevenue) * 100) }))
+const categoriesData = categoriesRaw.map(c => ({ ...c, percentage: Math.round((c.revenue / totalCategoryRevenue) * 100) }))
+const customersData = customersRaw.map(c => ({ ...c, percentage: Math.round((c.spent / totalCustomerSpent) * 100) }))
+
+const salesOverview = {
+  averageOrderValue: 36.04,
+  conversionRate: '2.4%',
+  returnRate: '5.2%',
+  repeatCustomerRate: '28%',
+}
+
+function formatNumber(n) {
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+function formatCurrency(amount) {
+  return `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+}
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const salesData = state<Array<{ date: string, revenue: number, orders: number }>>([
+  { date: '2023-11-01', revenue: 25000, orders: 980 },
+  { date: '2023-12-01', revenue: 35000, orders: 1220 },
+  { date: '2024-01-01', revenue: 42000, orders: 1440 },
+  { date: '2024-02-01', revenue: 68000, orders: 2100 },
+  { date: '2024-03-01', revenue: 85000, orders: 2700 },
+  { date: '2024-04-01', revenue: 65000, orders: 1900 },
+  { date: '2024-05-01', revenue: 45000, orders: 1200 },
+  { date: '2024-06-01', revenue: 30000, orders: 800 },
+  { date: '2024-07-01', revenue: 45000, orders: 1200 },
+  { date: '2024-08-01', revenue: 30000, orders: 800 },
+  { date: '2024-09-01', revenue: 30000, orders: 800 },
+  { date: '2024-10-01', revenue: 45000, orders: 1200 },
+  { date: '2024-11-01', revenue: 24000, orders: 600 },
+  { date: '2024-12-01', revenue: 90000, orders: 2300 },
+  { date: '2025-01-01', revenue: 30000, orders: 800 },
+  { date: '2025-02-01', revenue: 18000, orders: 400 },
+])
+
+let chartHandle: { destroy: () => void } | null = null
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'commerce_sales_chart',
+    type: 'line',
+    data: {
+      labels: salesData().map(item => item.date),
+      datasets: [
+        { label: 'Revenue ($)', data: salesData().map(item => item.revenue), backgroundColor: 'rgba(16, 185, 129, 0.3)', borderColor: 'rgba(16, 185, 129, 0.8)', borderWidth: 2, tension: 0.4, fill: true, yAxisID: 'y' },
+        { label: 'Orders', data: salesData().map(item => item.orders), backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.8)', borderWidth: 2, tension: 0.4, fill: false, yAxisID: 'y1' },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 4 } },
+        y: { type: 'linear', display: true, position: 'left', beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6, callback: (value: number | string) => `$${Number(value).toLocaleString()}` } },
+        y1: { type: 'linear', display: true, position: 'right', beginAtZero: true, grid: { display: false }, ticks: { maxTicksLimit: 6 } },
+      },
+      plugins: {
+        legend: { display: true, position: 'top' },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          callbacks: {
+            label(context: { dataset: { label?: string, yAxisID?: string }, parsed: { y: number } }) {
+              let label = context.dataset.label || ''
+              if (label)
+                label += ': '
+              if (context.dataset.yAxisID === 'y')
+                label += `$${context.parsed.y.toLocaleString()}`
+              else
+                label += String(context.parsed.y)
+              return label
+            },
+          },
+        },
+      },
+    },
+  })
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection