# StoreDashboard

> Store admin home with sales, orders, average order value, conversion and returning customers against the previous period, a sales chart, conversion funnel, top products, categories, channels and cities, low stock alerts, recent orders and live visitors on a customisable board.

Source: https://docs.nasaqui.com/components/store-dashboard

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/store-dashboard.json
```

The first screen of a store admin. Five KPI tiles (sales, orders, average order value, conversion, returning customers) each show the change against the previous period, then a `DashboardBoard` holds the sales chart, the conversion funnel, top products, categories, sales by channel and by city, low stock alerts and recent orders. Live visitors sit beside the KPIs. It is presentational: you pass totals and series in minor units, it does the maths and the layout.

The KPI maths is a pure module, also exported: `storeSafeDivide`, `storePeriodChange`, `storeAverageOrderValue`, `storeConversionRate`, `storeReturningRate`, `storeKpis`, `storeSeriesTotals`, `storeFunnelCounts`, `storeLowStock`, `storeTopN`, `storeMinorFactor`, `storeToMajor`.

## When to use

- The home page of a store or marketplace admin.

## When not to use

- A single deep report: use `report-filter-bar` with the charts directly.
- Storefront pages: this is for the merchant.

## Import

```tsx
import { StoreDashboard } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { StoreDashboard } from "@fadymondy/nasaq/web";

<StoreDashboard
  currency="USD"
  totals={totals}
  previousTotals={previousTotals}
  series={series}
  previousSeries={previousSeries}
  topProducts={topProducts}
  categories={categories}
  channels={channels}
  cities={cities}
  products={products}
  recentOrders={orders}
  liveVisitors={{ count: 74, history }}
  toolbar={<ReportFilterBar {...filters} comparison />}
/>
```

## Anatomy

```
StoreDashboard
├─ toolbar                    your ReportFilterBar
├─ StatGrid                   sales, orders, AOV, conversion, returning, live visitors
└─ DashboardBoard             Customise, drag, resize, reset
   ├─ sales                   TimeSeriesPanel with compare
   ├─ funnel                  FunnelChart: sessions, add to cart, checkout, purchase
   ├─ top-products            image, units, revenue, change
   ├─ categories, cities      BreakdownTable
   ├─ channels                SegmentBar and BreakdownTable
   ├─ low-stock               Badge and Restock button
   └─ recent-orders           DataTable
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `currency` | `string` | `"USD"` (`"SAR"` in Arabic) | ISO code. Money is in minor units. |
| `totals, previousTotals` | `StorePeriodTotals` | `required, none` | Sales, orders, sessions, customers, returning, add to cart, checkouts. No previous means no change shown. |
| `series, previousSeries` | `StoreSalesPoint[]` | `required, none` | Date, sales, orders and sessions per point. |
| `topProducts` | `StoreTopProduct[]` | `required` | With units, revenue and previous revenue. |
| `categories, channels, cities` | `StoreBreakdownRow[]` | `required` | Value and previous value in minor units. |
| `products, lowStockThreshold` | `CommerceProduct[], number` | `required, 5` | Low stock is worked out from tracked, active variants. |
| `recentOrders` | `CommerceOrder[]` | `required` | Latest orders. |
| `liveVisitors` | `StoreLiveVisitors` |  | Count and a per minute history. |
| `toolbar, comparisonLabel` | `ReactNode, string` |  | Filter bar; the words next to each change. |
| `onOpenOrder, onOpenProduct, onRestock` | `callbacks` |  | Row clicks and the Restock button. |
| `layout, onLayoutChange, rowHeight` | `BoardItem[]` | `default, none, 160` | Saved board layout. |
| `loading, empty, error, onRetry` |  |  | Skeletons, empty state, error state with retry. |
| `labels` | `Partial<StoreDashboardLabels>` |  | Replace any string. |

## Examples

**Save the board layout**

```tsx
<StoreDashboard {...data} layout={saved} onLayoutChange={(next) => save(next)} />
```

## Accessibility

- A change is shown with an arrow and a signed number, never by colour alone.
- Stock status is a word ("Out of stock", "3 left"), not just a colour.
- Chart data is also in the tables beside it; decorative product thumbnails have empty alt text because the name is next to them.
- Row actions are in a context menu and a visible button, so they work with the keyboard.

## RTL & i18n

- The board mirrors. Numbers use the active locale's digits; order numbers and SKUs stay left to right.
- Strings live in a `STRINGS = { en, ar }` object and any of them can be replaced with `labels`. The locale comes from `NasaqProvider`.

## Styling & tokens

- Colours, radii and type come from `--nq-*` tokens; charts use `CHART_COLORS`.
- Target `[data-slot="store-dashboard"]` if present, and the inner parts of the reused components.

## Do / Don't

- Do send money as integer minor units and the ISO currency.
- Do pass `previousTotals` only when you have them: a missing comparison hides the change instead of showing +Infinity.
- Don't fetch in the component; pass data and callbacks.
- Don't pass different period lengths for current and previous and expect a fair comparison.

## Related

- [`stat-card`](https://docs.nasaqui.com/components/stat-card)
- [`funnel-chart`](https://docs.nasaqui.com/components/funnel-chart)
- [`dashboard-board`](https://docs.nasaqui.com/components/dashboard-board)
- [`report-filter-bar`](https://docs.nasaqui.com/components/report-filter-bar)
- [`time-range-picker`](https://docs.nasaqui.com/components/time-range-picker)

## Lab

https://docs.nasaqui.com/?path=/docs/components-store-admin-store-dashboard--docs

## Code

### React

```tsx
import { StoreDashboard } from "@fadymondy/nasaq/web";

<StoreDashboard
  currency="USD"
  totals={totals}
  previousTotals={previousTotals}
  series={series}
  previousSeries={previousSeries}
  topProducts={topProducts}
  categories={categories}
  channels={channels}
  cities={cities}
  products={products}
  recentOrders={orders}
  liveVisitors={{ count: 74, history }}
  toolbar={<ReportFilterBar {...filters} comparison />}
/>
```

### shadcn

```tsx
import { StoreDashboard } from "@/components/ui/store-dashboard";

<StoreDashboard
  currency="USD"
  totals={totals}
  previousTotals={previousTotals}
  series={series}
  previousSeries={previousSeries}
  topProducts={topProducts}
  categories={categories}
  channels={channels}
  cities={cities}
  products={products}
  recentOrders={orders}
  liveVisitors={{ count: 74, history }}
  toolbar={<ReportFilterBar {...filters} comparison />}
/>
```

### Vue

```vue
<script setup lang="ts">
import { NqStoreDashboard } from "@fadymondy/nasaq/vue";

// Money is integer minor units (cents), so 4_820_000 is $48,200.
const totals = { sales: 4_820_000, orders: 312, sessions: 9_400, customers: 280, returningCustomers: 96, addToCart: 1_320, checkouts: 540 };
const previousTotals = { sales: 4_210_000, orders: 288, sessions: 8_900, customers: 262, returningCustomers: 80, addToCart: 1_190, checkouts: 500 };
const series = [
  { date: "2026-09-27", sales: 1_520_000, orders: 98, sessions: 3_000 },
  { date: "2026-09-28", sales: 1_610_000, orders: 104, sessions: 3_100 },
  { date: "2026-09-29", sales: 1_690_000, orders: 110, sessions: 3_300 },
];
const previousSeries = [
  { date: "2026-09-20", sales: 1_300_000, orders: 90, sessions: 2_900 },
  { date: "2026-09-21", sales: 1_400_000, orders: 96, sessions: 3_000 },
  { date: "2026-09-22", sales: 1_510_000, orders: 102, sessions: 3_000 },
];
const topProducts = [
  { id: "p1", name: "Linen shirt", units: 120, revenue: 960_000, previousRevenue: 800_000 },
  { id: "p2", name: "Canvas tote", units: 90, revenue: 450_000 },
];
const categories = [
  { id: "c1", label: "Shirts", value: 2_100_000, previous: 1_900_000 },
  { id: "c2", label: "Bags", value: 1_300_000 },
];
const channels = [
  { id: "web", label: "Website", value: 3_000_000 },
  { id: "app", label: "App", value: 1_200_000 },
  { id: "pos", label: "Store", value: 620_000 },
];
const cities = [
  { id: "ny", label: "New York", value: 1_800_000 },
  { id: "la", label: "Los Angeles", value: 1_100_000 },
];
const products = [
  {
    id: "p1",
    name: "Linen shirt",
    status: "active",
    images: [],
    options: [{ id: "size", values: [{ id: "m", label: "M" }] }],
    variants: [
      { id: "v1", sku: "LS-M", options: { size: "m" }, stock: 2 },
      { id: "v2", sku: "LS-L", options: { size: "m" }, stock: 0 },
    ],
  },
];
const orders = [
  { id: "o1", number: "#1042", placedAt: "2026-09-29T08:12:00Z", status: "paid" as const, customer: { name: "Sara Ali" }, totals: { total: 18_500 } },
  { id: "o2", number: "#1041", placedAt: "2026-09-29T07:40:00Z", status: "shipped" as const, customer: { name: "Omar Khan" }, totals: { total: 9_900 } },
];
const history = [60, 64, 70, 68, 74];
const open = (id: string) => console.log("open product", id);
</script>

<template>
  <NqStoreDashboard
    currency="USD"
    :totals="totals"
    :previous-totals="previousTotals"
    :series="series"
    :previous-series="previousSeries"
    :top-products="topProducts"
    :categories="categories"
    :channels="channels"
    :cities="cities"
    :products="products"
    :recent-orders="orders"
    :live-visitors="{ count: 74, history }"
    :on-open-product="open"
    :on-restock="(item) => console.log('restock', item.variantId)"
  />
</template>
```

### Blade

```blade
@php
    $totals = ['sales' => 4820000, 'orders' => 312, 'sessions' => 9400, 'customers' => 280, 'returningCustomers' => 96, 'addToCart' => 1320, 'checkouts' => 540];
    $previousTotals = ['sales' => 4210000, 'orders' => 288, 'sessions' => 8900, 'customers' => 262, 'returningCustomers' => 80, 'addToCart' => 1190, 'checkouts' => 500];
    $series = [
        ['date' => '2026-09-27', 'sales' => 1520000, 'orders' => 98, 'sessions' => 3000],
        ['date' => '2026-09-28', 'sales' => 1610000, 'orders' => 104, 'sessions' => 3100],
        ['date' => '2026-09-29', 'sales' => 1690000, 'orders' => 110, 'sessions' => 3300],
    ];
    $previousSeries = [
        ['date' => '2026-09-20', 'sales' => 1300000, 'orders' => 90, 'sessions' => 2900],
        ['date' => '2026-09-21', 'sales' => 1400000, 'orders' => 96, 'sessions' => 3000],
        ['date' => '2026-09-22', 'sales' => 1510000, 'orders' => 102, 'sessions' => 3000],
    ];
    $products = [[
        'id' => 'p1', 'name' => 'Linen shirt', 'status' => 'active', 'images' => [],
        'options' => [['id' => 'size', 'values' => [['id' => 'm', 'label' => 'M']]]],
        'variants' => [['id' => 'v1', 'sku' => 'LS-M', 'options' => ['size' => 'm'], 'stock' => 2], ['id' => 'v2', 'sku' => 'LS-L', 'options' => ['size' => 'm'], 'stock' => 0]],
    ]];
    $orders = [
        ['id' => 'o1', 'number' => '#1042', 'placedAt' => '2026-09-29T08:12:00Z', 'status' => 'paid', 'customer' => ['name' => 'Sara Ali'], 'totals' => ['total' => 18500]],
        ['id' => 'o2', 'number' => '#1041', 'placedAt' => '2026-09-29T07:40:00Z', 'status' => 'shipped', 'customer' => ['name' => 'Omar Khan'], 'totals' => ['total' => 9900]],
    ];
@endphp
<x-nq::store-dashboard currency="USD" :totals="$totals" :previous-totals="$previousTotals" :series="$series" :previous-series="$previousSeries"
    :top-products="[['id' => 'p1', 'name' => 'Linen shirt', 'units' => 120, 'revenue' => 960000, 'previousRevenue' => 800000], ['id' => 'p2', 'name' => 'Canvas tote', 'units' => 90, 'revenue' => 450000]]"
    :categories="[['id' => 'c1', 'label' => 'Shirts', 'value' => 2100000, 'previous' => 1900000], ['id' => 'c2', 'label' => 'Bags', 'value' => 1300000]]"
    :channels="[['id' => 'web', 'label' => 'Website', 'value' => 3000000], ['id' => 'app', 'label' => 'App', 'value' => 1200000], ['id' => 'pos', 'label' => 'Store', 'value' => 620000]]"
    :cities="[['id' => 'ny', 'label' => 'New York', 'value' => 1800000], ['id' => 'la', 'label' => 'Los Angeles', 'value' => 1100000]]"
    :products="$products" :recent-orders="$orders" :live-visitors="['count' => 74, 'history' => [60, 64, 70, 68, 74]]"
    can-open-product can-open-order can-restock />
```

### HTML + Alpine

```html
<section data-slot="store-dashboard" aria-label="Store dashboard"  class="flex w-full min-w-0 flex-col gap-4">
                <div data-slot="store-dashboard-kpis" role="group" aria-label="Key figures" class="grid gap-3 grid-cols-[repeat(auto-fit,minmax(min(100%,12.5rem),1fr))]"><div data-slot="stat-card"  data-trend="up" data-tone="positive"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="12" x="2" y="6" rx="2"/>
  <circle cx="12" cy="12" r="2"/>
  <path d="M6 12h.01M18 12h.01"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Sales</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$48,200</bdi>
                                    </div>
                                    <div data-slot="stat-card-delta" class="flex flex-wrap items-center gap-x-1.5 text-caption">
                        <span class="inline-flex items-center gap-1 text-label text-nq-success-text">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>                            <bdi data-slot="num" data-numeric="" class="tabular-nums">+14.5%</bdi>
                        </span>
                        <span class="text-muted-foreground">vs previous period</span>                    </div>
                            </div>
                            <div data-slot="sparkline"  role="img" aria-label="Sales, trend over the period"  class="h-8 shrink-0 w-24">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-22bb0be9" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-success)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-success)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,4.82C22.67,4.32,43.33,3.79,64,3.33C84.67,2.86,105.33,2.44,126,2L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-22bb0be9)" stroke="none" />        <path d="M2,4.82C22.67,4.32,43.33,3.79,64,3.33C84.67,2.86,105.33,2.44,126,2" fill="none" stroke="var(--nq-success)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
                    </div>
    </div>
                            <div data-slot="stat-card"  data-trend="up" data-tone="positive"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 10a4 4 0 0 1-8 0"/>
  <path d="M3.103 6.034h17.794"/>
  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Orders</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">312</bdi>
                                    </div>
                                    <div data-slot="stat-card-delta" class="flex flex-wrap items-center gap-x-1.5 text-caption">
                        <span class="inline-flex items-center gap-1 text-label text-nq-success-text">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>                            <bdi data-slot="num" data-numeric="" class="tabular-nums">+8.3%</bdi>
                        </span>
                        <span class="text-muted-foreground">vs previous period</span>                    </div>
                            </div>
                            <div data-slot="sparkline"  role="img" aria-label="Orders, trend over the period"  class="h-8 shrink-0 w-24">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-462f28b7" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-success)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-success)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,5.05C22.67,4.55,43.33,4.04,64,3.53C84.67,3.02,105.33,2.51,126,2L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-462f28b7)" stroke="none" />        <path d="M2,5.05C22.67,4.55,43.33,4.04,64,3.53C84.67,3.02,105.33,2.51,126,2" fill="none" stroke="var(--nq-success)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
                    </div>
    </div>
                            <div data-slot="stat-card"  data-trend="up" data-tone="positive"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17V7"/>
  <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8"/>
  <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Average order value</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$154</bdi>
                                    </div>
                                    <div data-slot="stat-card-delta" class="flex flex-wrap items-center gap-x-1.5 text-caption">
                        <span class="inline-flex items-center gap-1 text-label text-nq-success-text">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>                            <bdi data-slot="num" data-numeric="" class="tabular-nums">+5.7%</bdi>
                        </span>
                        <span class="text-muted-foreground">vs previous period</span>                    </div>
                            </div>
                            <div data-slot="sparkline"  role="img" aria-label="Average order value, trend over the period"  class="h-8 shrink-0 w-24">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-4f0cb097" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-success)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-success)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,2C22.67,2.02,43.33,2.01,64,2.05C84.67,2.1,105.33,2.19,126,2.26L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-4f0cb097)" stroke="none" />        <path d="M2,2C22.67,2.02,43.33,2.01,64,2.05C84.67,2.1,105.33,2.19,126,2.26" fill="none" stroke="var(--nq-success)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
                    </div>
    </div>
                            <div data-slot="stat-card"  data-trend="up" data-tone="positive"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="19" x2="5" y1="5" y2="19"/>
  <circle cx="6.5" cy="6.5" r="2.5"/>
  <circle cx="17.5" cy="17.5" r="2.5"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Conversion rate</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">3.3%</bdi>
                                    </div>
                                    <div data-slot="stat-card-delta" class="flex flex-wrap items-center gap-x-1.5 text-caption">
                        <span class="inline-flex items-center gap-1 text-label text-nq-success-text">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>                            <bdi data-slot="num" data-numeric="" class="tabular-nums">+2.6%</bdi>
                        </span>
                        <span class="text-muted-foreground">vs previous period</span>                    </div>
                            </div>
                            <div data-slot="sparkline"  role="img" aria-label="Conversion rate, trend over the period"  class="h-8 shrink-0 w-24">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-00aa8527" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-success)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-success)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,2.74C22.67,2.49,43.33,2,64,2C84.67,2,105.33,2.12,126,2.18L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-00aa8527)" stroke="none" />        <path d="M2,2.74C22.67,2.49,43.33,2,64,2C84.67,2,105.33,2.12,126,2.18" fill="none" stroke="var(--nq-success)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
                    </div>
    </div>
                            <div data-slot="stat-card"  data-trend="up" data-tone="positive"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m17 2 4 4-4 4"/>
  <path d="M3 11v-1a4 4 0 0 1 4-4h14"/>
  <path d="m7 22-4-4 4-4"/>
  <path d="M21 13v1a4 4 0 0 1-4 4H3"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Returning customers</div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <bdi data-slot="num" data-numeric="" class="tabular-nums">34%</bdi>
                                    </div>
                                    <div data-slot="stat-card-delta" class="flex flex-wrap items-center gap-x-1.5 text-caption">
                        <span class="inline-flex items-center gap-1 text-label text-nq-success-text">
                            <svg aria-hidden="true" class="size-3.5 shrink-0 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 7h6v6"/>
  <path d="m22 7-8.5 8.5-5-5L2 17"/>
</svg>                            <bdi data-slot="num" data-numeric="" class="tabular-nums">+12.3%</bdi>
                        </span>
                        <span class="text-muted-foreground">vs previous period</span>                    </div>
                            </div>
                    </div>
    </div>
                                        <div data-slot="store-dashboard-live"   class="flex flex-col gap-3 rounded-card border border-border bg-card px-4 py-4 text-card-foreground">
            <div class="flex items-center gap-2">
                            <span data-slot="stat-card-icon" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-control bg-secondary text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
  <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
  <circle cx="9" cy="7" r="4"/>
</svg></span>
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground"><span class="flex items-center gap-2">Live visitors <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text"><span aria-hidden="true" class="size-1.5 rounded-full bg-current motion-safe:animate-pulse"></span>Live</span>
</span></div>
        </div>
        <div class="flex items-end justify-between gap-3">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="stat-card-value" class="text-h2 leading-tight text-foreground tabular-nums">
                                            <span class="flex flex-col">
                        <bdi data-slot="num" data-numeric="" class="tabular-nums">74</bdi>
                        <span class="text-caption font-normal text-muted-foreground">on the site right now</span>
                    </span>
                                    </div>
                            </div>
                            <div data-slot="sparkline"  role="img" aria-label="Live visitors"  class="h-8 shrink-0 w-24">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-70afb3a7" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--primary)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--primary)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,7.3C12.33,6.79,22.67,6.41,33,5.78C43.33,5.15,53.67,3.51,64,3.51C74.33,3.51,84.67,4.27,95,4.27C105.33,4.27,115.67,2.76,126,2L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-70afb3a7)" stroke="none" />        <path d="M2,7.3C12.33,6.79,22.67,6.41,33,5.78C43.33,5.15,53.67,3.51,64,3.51C74.33,3.51,84.67,4.27,95,4.27C105.33,4.27,115.67,2.76,126,2" fill="none" stroke="var(--primary)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
                    </div>
    </div></div>
        <section data-slot="dashboard-board" aria-label="Dashboard"
    x-data="nqDashboardBoard(JSON.parse('[{\u0022type\u0022:\u0022sales\u0022,\u0022title\u0022:\u0022Sales over time\u0022,\u0022description\u0022:\u0022Sales, orders and sessions with the previous period behind them\u0022,\u0022unique\u0022:true,\u0022minCols\u0022:2,\u0022minRows\u0022:3,\u0022defaultCols\u0022:4,\u0022defaultRows\u0022:3},{\u0022type\u0022:\u0022funnel\u0022,\u0022title\u0022:\u0022Conversion funnel\u0022,\u0022description\u0022:\u0022Sessions to purchase, and where shoppers leave\u0022,\u0022unique\u0022:true,\u0022minCols\u0022:2,\u0022minRows\u0022:4,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:4},{\u0022type\u0022:\u0022top-products\u0022,\u0022title\u0022:\u0022Top products\u0022,\u0022description\u0022:\u0022Best sellers by revenue\u0022,\u0022fields\u0022:[{\u0022key\u0022:\u0022limit\u0022,\u0022label\u0022:\u0022Top products\u0022,\u0022type\u0022:\u0022number\u0022,\u0022min\u0022:3,\u0022max\u0022:10}],\u0022defaultSettings\u0022:{\u0022limit\u0022:5},\u0022minCols\u0022:1,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2},{\u0022type\u0022:\u0022categories\u0022,\u0022title\u0022:\u0022Top categories\u0022,\u0022description\u0022:\u0022Revenue by product category\u0022,\u0022minCols\u0022:1,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2},{\u0022type\u0022:\u0022channels\u0022,\u0022title\u0022:\u0022Sales by channel\u0022,\u0022description\u0022:\u0022Where the sales came from\u0022,\u0022minCols\u0022:1,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2},{\u0022type\u0022:\u0022cities\u0022,\u0022title\u0022:\u0022Sales by city\u0022,\u0022description\u0022:\u0022Where the orders were delivered\u0022,\u0022minCols\u0022:1,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2},{\u0022type\u0022:\u0022low-stock\u0022,\u0022title\u0022:\u0022Low stock\u0022,\u0022description\u0022:\u0022Variants at or under the stock threshold\u0022,\u0022unique\u0022:true,\u0022minCols\u0022:1,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2},{\u0022type\u0022:\u0022recent-orders\u0022,\u0022title\u0022:\u0022Recent orders\u0022,\u0022description\u0022:\u0022The latest orders placed\u0022,\u0022unique\u0022:true,\u0022minCols\u0022:2,\u0022minRows\u0022:2,\u0022defaultCols\u0022:2,\u0022defaultRows\u0022:2}]'), JSON.parse('[{\u0022id\u0022:\u0022sales\u0022,\u0022type\u0022:\u0022sales\u0022,\u0022cols\u0022:4,\u0022rows\u0022:3},{\u0022id\u0022:\u0022funnel\u0022,\u0022type\u0022:\u0022funnel\u0022,\u0022cols\u0022:2,\u0022rows\u0022:4},{\u0022id\u0022:\u0022top-products\u0022,\u0022type\u0022:\u0022top-products\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022categories\u0022,\u0022type\u0022:\u0022categories\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022channels\u0022,\u0022type\u0022:\u0022channels\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022cities\u0022,\u0022type\u0022:\u0022cities\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022low-stock\u0022,\u0022type\u0022:\u0022low-stock\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022recent-orders\u0022,\u0022type\u0022:\u0022recent-orders\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2}]'), JSON.parse('{\u0022defaultLayout\u0022:[{\u0022id\u0022:\u0022sales\u0022,\u0022type\u0022:\u0022sales\u0022,\u0022cols\u0022:4,\u0022rows\u0022:3},{\u0022id\u0022:\u0022funnel\u0022,\u0022type\u0022:\u0022funnel\u0022,\u0022cols\u0022:2,\u0022rows\u0022:4},{\u0022id\u0022:\u0022top-products\u0022,\u0022type\u0022:\u0022top-products\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022categories\u0022,\u0022type\u0022:\u0022categories\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022channels\u0022,\u0022type\u0022:\u0022channels\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022cities\u0022,\u0022type\u0022:\u0022cities\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022low-stock\u0022,\u0022type\u0022:\u0022low-stock\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2},{\u0022id\u0022:\u0022recent-orders\u0022,\u0022type\u0022:\u0022recent-orders\u0022,\u0022cols\u0022:2,\u0022rows\u0022:2}],\u0022rowHeight\u0022:160,\u0022locale\u0022:\u0022en\u0022}'))" x-modelable="layout"
    class="flex w-full min-w-0 flex-col gap-4">
    <div hidden data-slot="dashboard-board-widgets"><template data-board-widget="sales"><div data-slot="time-series-panel"  x-data="nqTimeSeriesPanel('sales', true)"
    class="flex flex-col gap-4 rounded-card border-border bg-card text-card-foreground h-full border-0 py-0 shadow-none">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="max-w-full overflow-x-auto">
                    <div role="group" data-slot="toggle-group" data-variant="segmented" data-orientation="horizontal"
    x-data="nqToggleGroup(JSON.parse('[\u0022sales\u0022]'), false)" x-modelable="value" x-bind="root"
            aria-label="Metric" x-model="pressed" class="flex w-fit max-w-full gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="toggle" aria-pressed="true"
     x-bind="toggle('sales')"      data-pressed         class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Sales</button>
                                                    <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('orders')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Orders</button>
                                                    <button type="button" data-slot="toggle" aria-pressed="false"
     x-bind="toggle('sessions')"             class="inline-flex h-7 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-3 text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 rounded-[calc(var(--radius-control)-2px)] data-pressed:bg-card data-pressed:text-foreground data-pressed:shadow-xs">Sessions</button>
</div>
                </div>
                                        <label class="flex items-center gap-2 text-body-sm text-muted-foreground">
                    <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(true)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="compare" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50">
    <span data-slot="switch-thumb"  data-checked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
                    vs previous period
                </label>
                    </div>
                                                    <div class="contents" data-metric="sales" x-show="metric === 'sales'" >
                    <div data-slot="time-series-total" class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="text-caption text-muted-foreground">Total</span>
                        <span class="text-h2 text-foreground tabular-nums">
                            <bdi data-slot="num" data-numeric="" class="tabular-nums">$48,200</bdi>
                        </span>
                                                    <span class="text-label text-nq-success-text" x-show="compare" >
                                <bdi data-slot="num" data-numeric="" class="tabular-nums">+14.5%</bdi>
                            </span>
                                            </div>
                    <div data-slot="chart"  role="img" aria-label="Sales, Sep 27 to Sep 29"   style="--color-current: var(--primary); --color-previous: var(--muted-foreground)"     class="flex w-full text-caption [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-dot]:stroke-card [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector]:stroke-card [&_.recharts-surface]:outline-hidden aspect-auto flex-col justify-start gap-2 h-56">
    <div class="flex min-h-0 flex-1 gap-2">
                            <div aria-hidden="true" class="relative w-11 shrink-0 text-end text-muted-foreground">
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 100%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">0</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 75%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">5K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 50%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">10K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 25%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">15K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 0%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">20K</bdi>
                                                                            </span>
                                                            </div>
                            <div data-slot="time-series-plot" class="relative min-w-0 flex-1" x-data="nqTimeSeriesChart(JSON.parse('[{\u0022x\u0022:0,\u0022y\u0022:24,\u0022date\u0022:\u0022Sep 27\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sales\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u0022$15,200\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u0022$13,000\u0022}]},{\u0022x\u0022:50,\u0022y\u0022:19.5,\u0022date\u0022:\u0022Sep 28\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sales\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u0022$16,100\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u0022$14,000\u0022}]},{\u0022x\u0022:100,\u0022y\u0022:15.5,\u0022date\u0022:\u0022Sep 29\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sales\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u0022$16,900\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u0022$15,100\u0022}]}]'))" x-on:pointermove="move($event)" x-on:pointerleave="leave()">
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 100%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 75%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 50%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 25%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 0%"></span>
                                                                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                    <defs>
                                        <linearGradient id="nq-ts-dc81ba46" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" style="stop-color: var(--color-current); stop-opacity: 0.28" />
                                            <stop offset="100%" style="stop-color: var(--color-current); stop-opacity: 0.02" />
                                        </linearGradient>
                                    </defs>
                                                                                                                <path data-slot="time-series-previous" x-show="compare"  d="M0,35C16.67,33.33,33.33,31.75,50,30C66.67,28.25,83.33,26.33,100,24.5" fill="none" stroke="var(--color-previous)" stroke-dasharray="4 4" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" />
                                                                        <path d="M0,24C16.67,22.5,33.33,20.92,50,19.5C66.67,18.08,83.33,16.83,100,15.5L100,100L0,100Z" fill="url(#nq-ts-dc81ba46)" stroke="none" />
                                    <path data-slot="time-series-current" d="M0,24C16.67,22.5,33.33,20.92,50,19.5C66.67,18.08,83.33,16.83,100,15.5" fill="none" stroke="var(--color-current)" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                                </svg>
                                                                <div class="contents" x-show="hover !== null" style="display: none">
                                    <span aria-hidden="true" class="pointer-events-none absolute inset-y-0 w-px bg-border" x-bind:style="lineStyle"></span>
                                    <span aria-hidden="true" data-slot="chart-dot" class="pointer-events-none absolute size-2 -translate-y-1/2 rounded-full bg-[var(--color-current)] ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="dotStyle"></span>
                                    <div class="pointer-events-none absolute top-0 z-10 ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="tipStyle">
                                        <div data-slot="chart-tooltip" dir="ltr" class="grid min-w-32 gap-1.5 rounded-control border border-border bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md">
                                            <div class="text-label" x-text="tip.date"></div>
                                            <div class="grid gap-1">
                                                <template x-for="row in tip.rows" x-bind:key="row.k">
                                                    <div class="flex items-center gap-2" x-show="row.k === 'current' || compare">
                                                        <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" x-bind:style="{ backgroundColor: row.color }"></span>
                                                        <span class="text-muted-foreground" x-text="row.label"></span>
                                                        <span class="ms-auto ps-3 text-label tabular-nums" x-text="row.text"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="relative h-4 ms-[3.25rem]">
                                                                                            <span class="absolute top-0 whitespace-nowrap start-0"
                                    >Sep 27</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 50%" >Sep 28</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap end-0"
                                    >Sep 29</span>
                                                    </div>
</div>
                </div>
                                            <div class="contents" data-metric="orders" x-show="metric === 'orders'"  style="display: none" >
                    <div data-slot="time-series-total" class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="text-caption text-muted-foreground">Total</span>
                        <span class="text-h2 text-foreground tabular-nums">
                            <bdi data-slot="num" data-numeric="" class="tabular-nums">312</bdi>
                        </span>
                                                    <span class="text-label text-nq-success-text" x-show="compare" >
                                <bdi data-slot="num" data-numeric="" class="tabular-nums">+8.3%</bdi>
                            </span>
                                            </div>
                    <div data-slot="chart"  role="img" aria-label="Orders, Sep 27 to Sep 29"   style="--color-current: var(--nq-tag-teal); --color-previous: var(--muted-foreground)"     class="flex w-full text-caption [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-dot]:stroke-card [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector]:stroke-card [&_.recharts-surface]:outline-hidden aspect-auto flex-col justify-start gap-2 h-56">
    <div class="flex min-h-0 flex-1 gap-2">
                            <div aria-hidden="true" class="relative w-11 shrink-0 text-end text-muted-foreground">
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 100%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">0</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 66.67%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">50</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 33.33%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">100</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 0%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">150</bdi>
                                                                            </span>
                                                            </div>
                            <div data-slot="time-series-plot" class="relative min-w-0 flex-1" x-data="nqTimeSeriesChart(JSON.parse('[{\u0022x\u0022:0,\u0022y\u0022:34.67,\u0022date\u0022:\u0022Sep 27\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Orders\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u002298\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u002290\u0022}]},{\u0022x\u0022:50,\u0022y\u0022:30.67,\u0022date\u0022:\u0022Sep 28\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Orders\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u0022104\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u002296\u0022}]},{\u0022x\u0022:100,\u0022y\u0022:26.67,\u0022date\u0022:\u0022Sep 29\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Orders\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u0022110\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u0022102\u0022}]}]'))" x-on:pointermove="move($event)" x-on:pointerleave="leave()">
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 100%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 66.67%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 33.33%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 0%"></span>
                                                                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                    <defs>
                                        <linearGradient id="nq-ts-16859bd5" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" style="stop-color: var(--color-current); stop-opacity: 0.28" />
                                            <stop offset="100%" style="stop-color: var(--color-current); stop-opacity: 0.02" />
                                        </linearGradient>
                                    </defs>
                                                                                                                <path data-slot="time-series-previous" x-show="compare"  d="M0,40C16.67,38.67,33.33,37.33,50,36C66.67,34.67,83.33,33.33,100,32" fill="none" stroke="var(--color-previous)" stroke-dasharray="4 4" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" />
                                                                        <path d="M0,34.67C16.67,33.34,33.33,32,50,30.67C66.67,29.34,83.33,28,100,26.67L100,100L0,100Z" fill="url(#nq-ts-16859bd5)" stroke="none" />
                                    <path data-slot="time-series-current" d="M0,34.67C16.67,33.34,33.33,32,50,30.67C66.67,29.34,83.33,28,100,26.67" fill="none" stroke="var(--color-current)" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                                </svg>
                                                                <div class="contents" x-show="hover !== null" style="display: none">
                                    <span aria-hidden="true" class="pointer-events-none absolute inset-y-0 w-px bg-border" x-bind:style="lineStyle"></span>
                                    <span aria-hidden="true" data-slot="chart-dot" class="pointer-events-none absolute size-2 -translate-y-1/2 rounded-full bg-[var(--color-current)] ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="dotStyle"></span>
                                    <div class="pointer-events-none absolute top-0 z-10 ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="tipStyle">
                                        <div data-slot="chart-tooltip" dir="ltr" class="grid min-w-32 gap-1.5 rounded-control border border-border bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md">
                                            <div class="text-label" x-text="tip.date"></div>
                                            <div class="grid gap-1">
                                                <template x-for="row in tip.rows" x-bind:key="row.k">
                                                    <div class="flex items-center gap-2" x-show="row.k === 'current' || compare">
                                                        <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" x-bind:style="{ backgroundColor: row.color }"></span>
                                                        <span class="text-muted-foreground" x-text="row.label"></span>
                                                        <span class="ms-auto ps-3 text-label tabular-nums" x-text="row.text"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="relative h-4 ms-[3.25rem]">
                                                                                            <span class="absolute top-0 whitespace-nowrap start-0"
                                    >Sep 27</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 50%" >Sep 28</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap end-0"
                                    >Sep 29</span>
                                                    </div>
</div>
                </div>
                                            <div class="contents" data-metric="sessions" x-show="metric === 'sessions'"  style="display: none" >
                    <div data-slot="time-series-total" class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                        <span class="text-caption text-muted-foreground">Total</span>
                        <span class="text-h2 text-foreground tabular-nums">
                            <bdi data-slot="num" data-numeric="" class="tabular-nums">9,400</bdi>
                        </span>
                                                    <span class="text-label text-nq-success-text" x-show="compare" >
                                <bdi data-slot="num" data-numeric="" class="tabular-nums">+5.6%</bdi>
                            </span>
                                            </div>
                    <div data-slot="chart"  role="img" aria-label="Sessions, Sep 27 to Sep 29"   style="--color-current: var(--nq-tag-violet); --color-previous: var(--muted-foreground)"     class="flex w-full text-caption [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-dot]:stroke-card [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector]:stroke-card [&_.recharts-surface]:outline-hidden aspect-auto flex-col justify-start gap-2 h-56">
    <div class="flex min-h-0 flex-1 gap-2">
                            <div aria-hidden="true" class="relative w-11 shrink-0 text-end text-muted-foreground">
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 100%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">0</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 75%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">1K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 50%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">2K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 25%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">3K</bdi>
                                                                            </span>
                                                                    <span class="absolute inset-x-0 -translate-y-1/2 truncate" style="top: 0%">
                                                                                    <bdi data-slot="num" data-numeric="" class="tabular-nums">4K</bdi>
                                                                            </span>
                                                            </div>
                            <div data-slot="time-series-plot" class="relative min-w-0 flex-1" x-data="nqTimeSeriesChart(JSON.parse('[{\u0022x\u0022:0,\u0022y\u0022:25,\u0022date\u0022:\u0022Sep 27\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sessions\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223,000\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u00222,900\u0022}]},{\u0022x\u0022:50,\u0022y\u0022:22.5,\u0022date\u0022:\u0022Sep 28\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sessions\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223,100\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u00223,000\u0022}]},{\u0022x\u0022:100,\u0022y\u0022:17.5,\u0022date\u0022:\u0022Sep 29\u0022,\u0022rows\u0022:[{\u0022k\u0022:\u0022current\u0022,\u0022label\u0022:\u0022Sessions\u0022,\u0022color\u0022:\u0022var(--color-current)\u0022,\u0022text\u0022:\u00223,300\u0022},{\u0022k\u0022:\u0022previous\u0022,\u0022label\u0022:\u0022Previous period\u0022,\u0022color\u0022:\u0022var(--color-previous)\u0022,\u0022text\u0022:\u00223,000\u0022}]}]'))" x-on:pointermove="move($event)" x-on:pointerleave="leave()">
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 100%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 75%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 50%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 25%"></span>
                                                                    <span aria-hidden="true" class="absolute inset-x-0 border-t border-border" style="top: 0%"></span>
                                                                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false" class="absolute inset-0 size-full overflow-visible rtl:-scale-x-100">
                                    <defs>
                                        <linearGradient id="nq-ts-2da66ea5" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" style="stop-color: var(--color-current); stop-opacity: 0.28" />
                                            <stop offset="100%" style="stop-color: var(--color-current); stop-opacity: 0.02" />
                                        </linearGradient>
                                    </defs>
                                                                                                                <path data-slot="time-series-previous" x-show="compare"  d="M0,27.5C16.67,26.67,33.33,25,50,25C66.67,25,83.33,25,100,25" fill="none" stroke="var(--color-previous)" stroke-dasharray="4 4" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" />
                                                                        <path d="M0,25C16.67,24.17,33.33,23.75,50,22.5C66.67,21.25,83.33,19.17,100,17.5L100,100L0,100Z" fill="url(#nq-ts-2da66ea5)" stroke="none" />
                                    <path data-slot="time-series-current" d="M0,25C16.67,24.17,33.33,23.75,50,22.5C66.67,21.25,83.33,19.17,100,17.5" fill="none" stroke="var(--color-current)" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                                </svg>
                                                                <div class="contents" x-show="hover !== null" style="display: none">
                                    <span aria-hidden="true" class="pointer-events-none absolute inset-y-0 w-px bg-border" x-bind:style="lineStyle"></span>
                                    <span aria-hidden="true" data-slot="chart-dot" class="pointer-events-none absolute size-2 -translate-y-1/2 rounded-full bg-[var(--color-current)] ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="dotStyle"></span>
                                    <div class="pointer-events-none absolute top-0 z-10 ltr:-translate-x-1/2 rtl:translate-x-1/2" x-bind:style="tipStyle">
                                        <div data-slot="chart-tooltip" dir="ltr" class="grid min-w-32 gap-1.5 rounded-control border border-border bg-popover px-2.5 py-1.5 text-caption text-popover-foreground shadow-md">
                                            <div class="text-label" x-text="tip.date"></div>
                                            <div class="grid gap-1">
                                                <template x-for="row in tip.rows" x-bind:key="row.k">
                                                    <div class="flex items-center gap-2" x-show="row.k === 'current' || compare">
                                                        <span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" x-bind:style="{ backgroundColor: row.color }"></span>
                                                        <span class="text-muted-foreground" x-text="row.label"></span>
                                                        <span class="ms-auto ps-3 text-label tabular-nums" x-text="row.text"></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="relative h-4 ms-[3.25rem]">
                                                                                            <span class="absolute top-0 whitespace-nowrap start-0"
                                    >Sep 27</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap ltr:-translate-x-1/2 rtl:translate-x-1/2"
                                     style="inset-inline-start: 50%" >Sep 28</span>
                                                                                            <span class="absolute top-0 whitespace-nowrap end-0"
                                    >Sep 29</span>
                                                    </div>
</div>
                </div></div>
</div></template>
            <template data-board-widget="funnel"><div class="[&_[data-slot=card-header]]:hidden [&_[data-slot=card]]:border-0 [&_[data-slot=card]]:py-0 [&_[data-slot=card]]:shadow-none [&_[data-slot=card-content]]:px-0">
                    <div data-slot="funnel-chart" class="flex w-full flex-col gap-4">
    <div data-slot="card" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground"><div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><h3 data-slot="card-title" class="text-label text-foreground">Conversion funnel</h3>
            <div data-slot="card-description" class="text-body-sm text-muted-foreground">How many people reach each step, and where they leave.</div></div>
        <div data-slot="card-content" class="px-4 flex flex-col gap-4"><div class="flex flex-wrap items-baseline gap-x-6 gap-y-1">
                    <div class="flex flex-col">
                        <span class="text-caption text-muted-foreground">Overall conversion</span>
                        <span class="text-heading-sm text-foreground" data-slot="funnel-overall"><bdi data-slot="num" data-numeric="" class="tabular-nums">3.3%</bdi>
</span>
                    </div>
                    <span class="text-body-sm text-muted-foreground">
                        Entered <bdi data-slot="num" data-numeric="" class="tabular-nums">9,400</bdi>
 · Completed <bdi data-slot="num" data-numeric="" class="tabular-nums">312</bdi>
                    </span>
                </div>
                <ol aria-label="Funnel steps" class="flex flex-col">
                                            <li data-slot="funnel-step" class="flex flex-col">
                                                        <div class="flex flex-col gap-1.5 rounded-card border border-border p-3">
                                <div class="flex items-baseline justify-between gap-3">
                                    <span class="flex min-w-0 flex-col">
                                        <span dir="auto" class="truncate text-label text-foreground">Sessions</span>
                                        <bdi dir="ltr" class="truncate text-caption text-muted-foreground">session_start</bdi>                                    </span>
                                    <span class="flex shrink-0 flex-col items-end">
                                        <span class="text-label text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">9,400</bdi>
</span>
                                        <span class="text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">100%</bdi>
 of first step</span>
                                    </span>
                                </div>
                                <div role="img" aria-label="Sessions: 9,400 (100%)" class="h-3 w-full overflow-hidden rounded-full bg-muted">
                                    <div class="h-full rounded-full bg-primary" style="inline-size: 100%"></div>
                                </div>
                            </div>
                        </li>
                                            <li data-slot="funnel-step" class="flex flex-col">
                                                            <div class="flex items-center gap-2 py-1.5 ps-3 text-caption text-muted-foreground" data-slot="funnel-gap">
                                    <svg aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                    <span>14% continued</span>
                                    <span aria-hidden="true">·</span>
                                    <span class="text-nq-danger-text">8,080 left (86%)</span>
                                                                            <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>Biggest drop</span>
                                                                    </div>
                                                        <div class="flex flex-col gap-1.5 rounded-card border border-border p-3">
                                <div class="flex items-baseline justify-between gap-3">
                                    <span class="flex min-w-0 flex-col">
                                        <span dir="auto" class="truncate text-label text-foreground">Added to cart</span>
                                        <bdi dir="ltr" class="truncate text-caption text-muted-foreground">add_to_cart</bdi>                                    </span>
                                    <span class="flex shrink-0 flex-col items-end">
                                        <span class="text-label text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1,320</bdi>
</span>
                                        <span class="text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">14%</bdi>
 of first step</span>
                                    </span>
                                </div>
                                <div role="img" aria-label="Added to cart: 1,320 (14%)" class="h-3 w-full overflow-hidden rounded-full bg-muted">
                                    <div class="h-full rounded-full bg-primary" style="inline-size: 14.04%"></div>
                                </div>
                            </div>
                        </li>
                                            <li data-slot="funnel-step" class="flex flex-col">
                                                            <div class="flex items-center gap-2 py-1.5 ps-3 text-caption text-muted-foreground" data-slot="funnel-gap">
                                    <svg aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                    <span>41% continued</span>
                                    <span aria-hidden="true">·</span>
                                    <span class="">780 left (59%)</span>
                                                                    </div>
                                                        <div class="flex flex-col gap-1.5 rounded-card border border-border p-3">
                                <div class="flex items-baseline justify-between gap-3">
                                    <span class="flex min-w-0 flex-col">
                                        <span dir="auto" class="truncate text-label text-foreground">Started checkout</span>
                                        <bdi dir="ltr" class="truncate text-caption text-muted-foreground">begin_checkout</bdi>                                    </span>
                                    <span class="flex shrink-0 flex-col items-end">
                                        <span class="text-label text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">540</bdi>
</span>
                                        <span class="text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">5.7%</bdi>
 of first step</span>
                                    </span>
                                </div>
                                <div role="img" aria-label="Started checkout: 540 (5.7%)" class="h-3 w-full overflow-hidden rounded-full bg-muted">
                                    <div class="h-full rounded-full bg-primary" style="inline-size: 5.74%"></div>
                                </div>
                            </div>
                        </li>
                                            <li data-slot="funnel-step" class="flex flex-col">
                                                            <div class="flex items-center gap-2 py-1.5 ps-3 text-caption text-muted-foreground" data-slot="funnel-gap">
                                    <svg aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg>                                    <span>58% continued</span>
                                    <span aria-hidden="true">·</span>
                                    <span class="">228 left (42%)</span>
                                                                    </div>
                                                        <div class="flex flex-col gap-1.5 rounded-card border border-border p-3">
                                <div class="flex items-baseline justify-between gap-3">
                                    <span class="flex min-w-0 flex-col">
                                        <span dir="auto" class="truncate text-label text-foreground">Purchased</span>
                                        <bdi dir="ltr" class="truncate text-caption text-muted-foreground">purchase</bdi>                                    </span>
                                    <span class="flex shrink-0 flex-col items-end">
                                        <span class="text-label text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">312</bdi>
</span>
                                        <span class="text-caption text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">3.3%</bdi>
 of first step</span>
                                    </span>
                                </div>
                                <div role="img" aria-label="Purchased: 312 (3.3%)" class="h-3 w-full overflow-hidden rounded-full bg-muted">
                                    <div class="h-full rounded-full bg-primary" style="inline-size: 3.32%"></div>
                                </div>
                            </div>
                        </li>
                                    </ol></div></div>
    </div>
                </div></template>
            <template data-board-widget="top-products"><ol data-slot="store-dashboard-top-products" class="flex flex-col divide-y divide-border">
                                                    <li x-show="Number(setting(card, `limit`) ?? 5) > 0" >
                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex items-center gap-3 py-2" data-id="p1"><span data-slot="store-dashboard-thumb" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-control bg-muted text-muted-foreground">
                                            <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>                                        </span>
                                        <div class="min-w-0 flex-1">
                                                                                            <button type="button" dir="auto" data-id="p1" x-on:click="$el.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $el.dataset.id } }))"
                                                    class="block max-w-full truncate rounded-control text-start text-label text-foreground outline-none hover:underline focus-visible:outline-2 focus-visible:outline-nq-focus">Linen shirt</button>
                                                                                        <span class="text-caption text-muted-foreground">120 sold</span>
                                        </div>
                                        <div class="flex shrink-0 flex-col items-end">
                                            <span data-slot="price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-foreground text-body-sm">
        <span>
            <bdi class="tabular-nums font-medium">$9,600</bdi>
                    </span>
            </span>
                                                                                                                                        <span class="text-caption tabular-nums text-nq-success-text"><bdi data-slot="num" data-numeric class="tabular-nums">+20%</bdi></span>
                                                                                    </div></div>
                                                                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $refs.trigger.dataset.id } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open product</div></div>
</template></div>
                            </li>
                                                    <li x-show="Number(setting(card, `limit`) ?? 5) > 1" >
                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex items-center gap-3 py-2" data-id="p2"><span data-slot="store-dashboard-thumb" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-control bg-muted text-muted-foreground">
                                            <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>                                        </span>
                                        <div class="min-w-0 flex-1">
                                                                                            <button type="button" dir="auto" data-id="p2" x-on:click="$el.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $el.dataset.id } }))"
                                                    class="block max-w-full truncate rounded-control text-start text-label text-foreground outline-none hover:underline focus-visible:outline-2 focus-visible:outline-nq-focus">Canvas tote</button>
                                                                                        <span class="text-caption text-muted-foreground">90 sold</span>
                                        </div>
                                        <div class="flex shrink-0 flex-col items-end">
                                            <span data-slot="price" class="inline-flex flex-wrap items-baseline gap-x-1.5 text-foreground text-body-sm">
        <span>
            <bdi class="tabular-nums font-medium">$4,500</bdi>
                    </span>
            </span>
                                                                                                                                </div></div>
                                                                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $refs.trigger.dataset.id } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open product</div></div>
</template></div>
                            </li>
                                            </ol></template>
            <template data-board-widget="categories"><div data-slot="breakdown-table"      class="flex flex-col gap-4 rounded-card border-border bg-card text-card-foreground h-full border-0 py-0 shadow-none">
        <div data-slot="card-content" class="px-0"><div data-slot="table-container" role="region" tabindex="0"  aria-label="Top categories"     class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
    <table data-slot="table" data-density="default"
                  class="w-full caption-bottom border-collapse text-body-sm">
        <thead data-slot="table-header" class="[&_tr]:border-b [&_tr]:hover:bg-transparent [&_tr]:even:bg-transparent"><tr data-slot="table-row"     class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><th data-slot="table-head" scope="col" class="h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3">Category</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Revenue</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 hidden text-end sm:table-cell">Share</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Change</th></tr></thead>
                <tbody data-slot="table-body" class="[&_tr:last-child]:border-0"><tr data-slot="table-row"     data-row="c1" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">Shirts</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 100%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$21,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">61.8%</bdi></td>
                                                                                        <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums text-nq-success-text"><bdi data-slot="num" data-numeric="">+10.5%</bdi></td></tr>
                                                                    <tr data-slot="table-row"     data-row="c2" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">Bags</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 61.9048%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$13,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">38.2%</bdi></td>
                                                                                        <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums text-muted-foreground">–</td></tr></tbody>
    </table>
</div></div>
</div></template>
            <template data-board-widget="channels"><div class="flex flex-col gap-3">
                                            <div data-slot="segment-bar" class="flex min-w-0 flex-col gap-3">
    <div role="img" aria-label="Sales by channel" class="flex w-full gap-0.5 overflow-hidden rounded-full bg-nq-surface-soft h-4">
                                    <span data-slot="segment-bar-segment" title="Website: 3,000,000 (62.2%)" style="flex-grow: 3000000; flex-basis: 0; background-color: var(--nq-chart-1);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                                    </span>
                                                <span data-slot="segment-bar-segment" title="App: 1,200,000 (24.9%)" style="flex-grow: 1200000; flex-basis: 0; background-color: var(--nq-chart-2);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                                    </span>
                                                <span data-slot="segment-bar-segment" title="Store: 620,000 (12.9%)" style="flex-grow: 620000; flex-basis: 0; background-color: var(--nq-chart-3);" class="flex min-w-1 items-center justify-center overflow-hidden text-caption text-primary-foreground first:rounded-s-full last:rounded-e-full">
                                    </span>
                                </div>
    </div>
                        <ul data-slot="segment-bar-legend" class="flex flex-wrap gap-x-4 gap-y-1 text-body-sm">
                                                            <li class="flex min-w-0 items-center gap-2"><span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-chart-1)"></span><span dir="auto" class="truncate text-muted-foreground">Website</span></li>
                                                            <li class="flex min-w-0 items-center gap-2"><span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-chart-2)"></span><span dir="auto" class="truncate text-muted-foreground">App</span></li>
                                                            <li class="flex min-w-0 items-center gap-2"><span aria-hidden="true" class="size-2.5 shrink-0 rounded-[2px]" style="background-color: var(--nq-chart-3)"></span><span dir="auto" class="truncate text-muted-foreground">Store</span></li>
                                                    </ul>
                                        <div data-slot="breakdown-table"      class="flex flex-col gap-4 rounded-card border-border bg-card text-card-foreground h-full border-0 py-0 shadow-none">
        <div data-slot="card-content" class="px-0"><div data-slot="table-container" role="region" tabindex="0"  aria-label="Sales by channel"     class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
    <table data-slot="table" data-density="default"
                  class="w-full caption-bottom border-collapse text-body-sm">
        <thead data-slot="table-header" class="[&_tr]:border-b [&_tr]:hover:bg-transparent [&_tr]:even:bg-transparent"><tr data-slot="table-row"     class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><th data-slot="table-head" scope="col" class="h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3">Channel</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Sales</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 hidden text-end sm:table-cell">Share</th></tr></thead>
                <tbody data-slot="table-body" class="[&_tr:last-child]:border-0"><tr data-slot="table-row"     data-row="web" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">Website</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 100%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$30,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">62.2%</bdi></td></tr>
                                                                    <tr data-slot="table-row"     data-row="app" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">App</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 40%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$12,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">24.9%</bdi></td></tr>
                                                                    <tr data-slot="table-row"     data-row="pos" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">Store</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 20.6667%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$6,200</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">12.9%</bdi></td></tr></tbody>
    </table>
</div></div>
</div>
                </div></template>
            <template data-board-widget="cities"><div data-slot="breakdown-table"      class="flex flex-col gap-4 rounded-card border-border bg-card text-card-foreground h-full border-0 py-0 shadow-none">
        <div data-slot="card-content" class="px-0"><div data-slot="table-container" role="region" tabindex="0"  aria-label="Sales by city"     class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
    <table data-slot="table" data-density="default"
                  class="w-full caption-bottom border-collapse text-body-sm">
        <thead data-slot="table-header" class="[&_tr]:border-b [&_tr]:hover:bg-transparent [&_tr]:even:bg-transparent"><tr data-slot="table-row"     class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><th data-slot="table-head" scope="col" class="h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3">City</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 text-end">Sales</th>
                        <th data-slot="table-head" scope="col" class="h-row align-middle text-caption font-medium whitespace-nowrap text-muted-foreground px-4 py-3 hidden text-end sm:table-cell">Share</th></tr></thead>
                <tbody data-slot="table-body" class="[&_tr:last-child]:border-0"><tr data-slot="table-row"     data-row="ny" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">New York</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 100%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$18,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">62.1%</bdi></td></tr>
                                                                    <tr data-slot="table-row"     data-row="la" class="border-b border-border transition-colors duration-150 ease-nq hover:bg-nq-hover data-[state=selected]:bg-nq-selected"><td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 min-w-40 max-w-0 sm:min-w-56"><span class="block truncate" dir="auto">Los Angeles</span>
                                                                                                <span aria-hidden="true" data-slot="breakdown-bar" class="mt-1.5 block h-1.5 rounded-full bg-nq-surface-soft">
                                    <span class="block h-full rounded-full bg-[var(--bar)]" style="--bar: var(--primary); width: 61.1111%"></span>
                                </span></td>
                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 text-end tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">$11,000</bdi></td>
                                                            <td data-slot="table-cell" class="h-row align-middle whitespace-nowrap px-4 py-3 hidden text-end tabular-nums text-muted-foreground sm:table-cell"><bdi data-slot="num" data-numeric="" class="tabular-nums">37.9%</bdi></td></tr></tbody>
    </table>
</div></div>
</div></template>
            <template data-board-widget="low-stock"><ul data-slot="store-dashboard-low-stock" class="flex flex-col divide-y divide-border">
                                                                                <li>
                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex items-center gap-3 py-2" data-product-id="p1" data-variant-id="v2" data-sku="LS-L"><span data-slot="store-dashboard-thumb" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-control bg-muted text-muted-foreground">
                                            <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>                                        </span>
                                        <div class="min-w-0 flex-1">
                                            <span dir="auto" class="block truncate text-label text-foreground">Linen shirt</span>
                                            <span class="flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground">
                                                <span dir="auto" class="truncate">M</span>                                                <bdi dir="ltr" class="shrink-0 tabular-nums">LS-L</bdi>                                            </span>
                                        </div>
                                        <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 22V12"/>
  <path d="m16.5 14.5 5 5"/>
  <path d="m16.5 19.5 5-5"/>
  <path d="M21 10.5V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l.13-.074"/>
  <path d="M3.29 7 12 12l8.71-5"/>
  <path d="m7.5 4.27 8.997 5.148"/>
</svg>                                            Out of stock</span>
                                                                                    <button data-slot="button"
     type="button"                         aria-label="Restock Linen shirt" data-product-id="p1" data-variant-id="v2" data-sku="LS-L" x-on:click="$el.dispatchEvent(new CustomEvent(`nq-restock`, { bubbles: true, detail: { productId: $el.dataset.productId, variantId: $el.dataset.variantId, sku: $el.dataset.sku } }))" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Restock</button></div>
                                                                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-restock`, { bubbles: true, detail: { productId: $refs.trigger.dataset.productId, variantId: $refs.trigger.dataset.variantId, sku: $refs.trigger.dataset.sku } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Restock</div>
                                                                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                                                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $refs.trigger.dataset.productId } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open product</div></div>
</template></div>
                            </li>
                                                                                <li>
                                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="flex items-center gap-3 py-2" data-product-id="p1" data-variant-id="v1" data-sku="LS-M"><span data-slot="store-dashboard-thumb" class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-control bg-muted text-muted-foreground">
                                            <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="2" x2="22" y1="2" y2="22"/>
  <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/>
  <line x1="13.5" x2="6" y1="13.5" y2="21"/>
  <line x1="18" x2="21" y1="12" y2="15"/>
  <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/>
  <path d="M21 15V5a2 2 0 0 0-2-2H9"/>
</svg>                                        </span>
                                        <div class="min-w-0 flex-1">
                                            <span dir="auto" class="block truncate text-label text-foreground">Linen shirt</span>
                                            <span class="flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground">
                                                <span dir="auto" class="truncate">M</span>                                                <bdi dir="ltr" class="shrink-0 tabular-nums">LS-M</bdi>                                            </span>
                                        </div>
                                        <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
  <path d="M12 9v4"/>
  <path d="M12 17h.01"/>
</svg>                                            2 left</span>
                                                                                    <button data-slot="button"
     type="button"                         aria-label="Restock Linen shirt" data-product-id="p1" data-variant-id="v1" data-sku="LS-M" x-on:click="$el.dispatchEvent(new CustomEvent(`nq-restock`, { bubbles: true, detail: { productId: $el.dataset.productId, variantId: $el.dataset.variantId, sku: $el.dataset.sku } }))" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Restock</button></div>
                                                                            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-restock`, { bubbles: true, detail: { productId: $refs.trigger.dataset.productId, variantId: $refs.trigger.dataset.variantId, sku: $refs.trigger.dataset.sku } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Restock</div>
                                                                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                                                                            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="$refs.trigger.dispatchEvent(new CustomEvent(`nq-open-product`, { bubbles: true, detail: { id: $refs.trigger.dataset.productId } }))" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open product</div></div>
</template></div>
                            </li>
                                            </ul></template>
            <template data-board-widget="recent-orders"><div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022o1\u0022,\u0022number\u0022:\u0022#1042\u0022,\u0022customer\u0022:\u0022Sara Ali\u0022,\u0022status\u0022:\u0022paid\u0022,\u0022total\u0022:185,\u0022placed\u0022:\u00222026-09-29T08:12:00Z\u0022,\u0022placedSort\u0022:1790669520},{\u0022id\u0022:\u0022o2\u0022,\u0022number\u0022:\u0022#1041\u0022,\u0022customer\u0022:\u0022Omar Khan\u0022,\u0022status\u0022:\u0022shipped\u0022,\u0022total\u0022:99,\u0022placed\u0022:\u00222026-09-29T07:40:00Z\u0022,\u0022placedSort\u0022:1790667600}]'), JSON.parse('[{\u0022id\u0022:\u0022number\u0022,\u0022header\u0022:\u0022Order\u0022,\u0022key\u0022:\u0022number\u0022,\u0022type\u0022:\u0022mono\u0022,\u0022sortKey\u0022:\u0022placedSort\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true},{\u0022id\u0022:\u0022customer\u0022,\u0022header\u0022:\u0022Customer\u0022,\u0022key\u0022:\u0022customer\u0022,\u0022type\u0022:\u0022text\u0022},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022key\u0022:\u0022status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022options\u0022:[{\u0022value\u0022:\u0022pending\u0022,\u0022label\u0022:\u0022Pending\u0022,\u0022tone\u0022:\u0022warning\u0022},{\u0022value\u0022:\u0022paid\u0022,\u0022label\u0022:\u0022Paid\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022processing\u0022,\u0022label\u0022:\u0022Processing\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022partially-fulfilled\u0022,\u0022label\u0022:\u0022Partly fulfilled\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022fulfilled\u0022,\u0022label\u0022:\u0022Fulfilled\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022shipped\u0022,\u0022label\u0022:\u0022Shipped\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022out-for-delivery\u0022,\u0022label\u0022:\u0022Out for delivery\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022delivered\u0022,\u0022label\u0022:\u0022Delivered\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022cancelled\u0022,\u0022label\u0022:\u0022Cancelled\u0022,\u0022tone\u0022:\u0022danger\u0022},{\u0022value\u0022:\u0022refunded\u0022,\u0022label\u0022:\u0022Refunded\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022partially-refunded\u0022,\u0022label\u0022:\u0022Partly refunded\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022returned\u0022,\u0022label\u0022:\u0022Returned\u0022,\u0022tone\u0022:\u0022neutral\u0022}]},{\u0022id\u0022:\u0022total\u0022,\u0022header\u0022:\u0022Total\u0022,\u0022key\u0022:\u0022total\u0022,\u0022type\u0022:\u0022currency\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022align\u0022:\u0022end\u0022},{\u0022id\u0022:\u0022placed\u0022,\u0022header\u0022:\u0022Placed\u0022,\u0022key\u0022:\u0022placed\u0022,\u0022type\u0022:\u0022datetime\u0022}]'), JSON.parse('{\u0022nameKey\u0022:\u0022number\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022actions\u0022:[{\u0022id\u0022:\u0022open\u0022}],\u0022labels\u0022:{\u0022selectRow\u0022:\u0022Select {name}\u0022,\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022selected\u0022:\u0022{n} selected\u0022,\u0022range\u0022:\u0022{from}\\u2013{to} of {total}\u0022,\u0022editCell\u0022:\u0022{column}, {row}\u0022,\u0022invalidNumber\u0022:\u0022Enter a number\u0022,\u0022invalidDate\u0022:\u0022Enter a date\u0022,\u0022saving\u0022:\u0022Saving\\u2026\u0022,\u0022saved\u0022:\u0022Saved\u0022,\u0022saveFailed\u0022:\u0022Couldn\\u0027t save the change\u0022,\u0022saveFailedFor\u0022:\u0022Couldn\\u0027t save: {message}\u0022,\u0022expandRow\u0022:\u0022Show details for {name}\u0022,\u0022details\u0022:\u0022Details for {name}\u0022,\u0022ascending\u0022:\u0022ascending\u0022,\u0022descending\u0022:\u0022descending\u0022,\u0022rangeAtLeast\u0022:\u0022\\u2265 {v}\u0022,\u0022rangeAtMost\u0022:\u0022\\u2264 {v}\u0022,\u0022sortPriority\u0022:\u0022sort {n}, {dir}\u0022}}'))" x-modelable="rows"
    class="flex min-w-0 flex-col gap-3">
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Recent orders"                 class="relative w-full overflow-x-auto outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div data-slot="table" role="table" aria-label="Recent orders"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 1) + ', auto)'"  x-bind:data-density="density"               class="grid w-full min-w-max text-body-sm">
            <div data-slot="table-header" role="rowgroup" class="contents">
                <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-b border-border">
                                                                                                            <div role="columnheader" data-slot="table-head" data-col="number" x-show="shown['number']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('number')"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('number', $event.shiftKey)"
                                    x-bind:class="sortOf('number') ? 'text-foreground' : ''"
                                    class="-mx-1.5 inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus ">
                                    <span >Order</span>
                                    <svg aria-hidden="true" x-show="! sortOf('number')" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    <x-lucide-arrow-up aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('number') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('number') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="customer" x-show="shown['customer']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Customer
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Status
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="total" x-show="shown['total']"  x-bind:class="pad"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Total
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="placed" x-show="shown['placed']"  x-bind:class="pad"                             class="flex items-center h-row text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            Placed
                                                                                </div>
                                                                <div role="columnheader" data-slot="table-head"  x-bind:class="pad" class="flex items-center h-row w-12 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground"><span class="sr-only">Actions</span></div>
                                    </div>
            </div>
                            <div role="rowgroup" class="contents" data-slot="table-body" x-show="rowCount === 0" style="display: none">
                    <div role="row" data-slot="table-row" class="col-span-full grid grid-cols-subgrid border-0">
                        <div role="cell" data-slot="table-cell" class="col-span-full h-auto p-0 whitespace-normal">
                            <div x-show="isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matching results</p>
                    <p class="text-body-sm text-muted-foreground">Try a different search or clear the filters.</p>
            </div>
    <button type="button" x-on:click="resetFilters()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-border bg-card text-foreground font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-control-sm px-2.5">Clear filters</button>
    </div>
                            </div>
                            <div x-show="! isFiltered" style="display: none">
                                <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No orders yet</p>
            </div>
    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template x-for="(row, index) in pageRows" x-bind:key="rid(row)">
                    <div role="rowgroup" class="contents" data-slot="table-body">
                        <div role="row" data-slot="table-row" data-row tabindex="-1" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1"
                            x-bind:data-state="isSelected(row) ? 'selected' : null" x-bind:aria-selected="isSelected(row) ? 'true' : null"
                            x-bind:aria-expanded="canExpand(row) ? String(isOpen(row)) : null" x-on:focus="if ($event.target === $event.currentTarget) active = index"
                            x-on:keydown="rowKey($event, row, index, true)"
                             x-on:contextmenu="rowContext(row, $event)" x-on:touchstart.passive="rowTouch(row, $event)" x-on:touchmove.passive="rowTouchEnd()" x-on:touchend="rowTouchEnd()" x-on:touchcancel="rowTouchEnd()"                              x-on:click="rowClick(row, $event)"                             x-bind:class="(isOpen(row) ? 'border-b-0 ' : '') + (ctxOpen && ctxRow === row ? 'bg-nq-hover' : '')"
                            class="col-span-full grid grid-cols-subgrid group/row border-b border-border outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[state=selected]:bg-nq-selected hover:bg-nq-hover cursor-pointer">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="number" x-show="shown['number']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <bdi dir="ltr" class="min-w-0 truncate font-mono text-code" x-text="shownText(row, col(&#039;number&#039;))"></bdi>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="customer" x-show="shown['customer']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <span class="min-w-0 flex-1  " x-text="shownText(row, col(&#039;customer&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="status" x-show="shown['status']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                                                                                <span data-slot="status" data-tone="neutral" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'neutral'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="info" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'info'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="success" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'success'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="warning" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'warning'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-warning-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                    <span data-slot="status" data-tone="danger" x-show="shownText(row, col(&#039;status&#039;)) !== '' && tone(row, col(&#039;status&#039;)) === 'danger'" style="display: none" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
                                                        <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                                        <span class="truncate" x-text="shownText(row, col(&#039;status&#039;))"></span>
                                                    </span>
                                                                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="total" x-show="shown['total']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap text-end justify-end ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 justify-end" >
                                                                                            <span class="min-w-0 flex-1  tabular-nums" x-text="shownText(row, col(&#039;total&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="placed" x-show="shown['placed']"  x-bind:class="pad"
                                                                        class="flex items-center relative h-row align-middle whitespace-nowrap  ">
                                                                                                                    <span  class="flex min-w-0 items-center gap-1.5 " >
                                                                                            <time class="min-w-0 flex-1 tabular-nums" x-bind:datetime="isoOf(row, col(&#039;placed&#039;))"  x-text="shownText(row, col(&#039;placed&#039;))"></time>
                                                                                                                                </span>
                                                                    </div>
                                                            <div role="cell" data-slot="table-cell"  x-bind:class="pad" class="flex items-center h-row w-12 pe-2 text-end align-middle whitespace-nowrap">
                                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="data-table-row-actions"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(&#039;rowActions&#039;, row)" x-show="hasActions(row)" x-bind:tabindex="index === Math.min(active, pageRows.length - 1) ? 0 : -1" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 group-data-[state=selected]/row:opacity-100 data-popup-open:opacity-100 pointer-coarse:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><div data-slot="dropdown-menu-group" role="group" ><template x-if="actionOn(row, 0)">
                                                        <div role="none" class="contents">
                                                                                                                        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, row)" x-bind:data-disabled="actionOff(row, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(row, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open order</div>
                                                        </div>
                                                    </template></div></div>
</template></div>
                                </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
                <div data-slot="data-table-context-menu" x-data="nqContextMenu()" x-effect="menuClosed(open)" class="contents">
            <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-44"><template x-if="ctxRow && actionOn(ctxRow, 0)">
                        <div role="none" class="contents">
                                                        <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="act(&#039;open&#039;, ctxRow)" x-bind:data-disabled="actionOff(ctxRow, 0) ? &#039;&#039; : null" x-bind:aria-disabled="actionOff(ctxRow, 0) ? &#039;true&#039; : null" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Open order</div>
                        </div>
                    </template></div>
</template>
        </div>
        <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div></template></div>
    <div class="flex flex-wrap items-center gap-3">
                    <span class="me-auto"></span>
                <template x-if="editing">
            <div class="contents">
                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground"><span x-text="s.editing"></span></span>
                <button data-slot="button"
     type="button"                         x-bind:disabled="saving" x-on:click="showAdd()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg> Add widget</button>
                <template x-if="hasDefault()">
                    <button data-slot="button"
     type="button"                         x-bind:disabled="saving" x-on:click="resetToDefault()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
  <path d="M3 3v5h5"/>
</svg> Reset to default</button>
                </template>
                <button data-slot="button"
     type="button"                         x-bind:disabled="saving" x-on:click="stopEditing()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                <button data-slot="button"
     type="button"                         x-bind:disabled="!canSave()" x-bind:aria-busy="saving ? &#039;true&#039; : null" x-on:click="save()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg x-show="saving" x-cloak="1" style="display: none" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                    <svg x-show="!saving" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                    <span x-show="!saving">Save</span><span x-show="saving" x-cloak style="display: none">Saving</span></button>
            </div>
        </template>
        <template x-if="!editing">
            <button data-slot="button"
     type="button"                         x-bind:disabled="!canEdit()" x-on:click="startEditing()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
  <path d="m15 5 4 4"/>
</svg> Customise</button>
        </template>
    </div>
    <p x-show="editing" x-cloak style="display: none" class="text-body-sm text-muted-foreground">Drag cards to reorder, resize them, pin the ones you always want first.</p>
    <p x-show="saveError" x-cloak style="display: none" role="alert" class="text-body-sm text-danger">Could not save the dashboard. Your changes are still here, try again.</p>
    <div data-slot="error-state" role="alert" style="display: none;" x-show="error" x-cloak="x-cloak" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-nq-danger-text">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Could not load the dashboard</p>
            </div>
    </div>
    <div data-slot="loading-state" data-shape="rows" role="status" aria-live="polite" x-show="loading" x-cloak="x-cloak" style="display: none" class="flex flex-col gap-2">
    <span class="sr-only">Loading…</span>                        <div class="flex h-row items-center gap-3 border-b border-border px-1">
                <div data-slot="skeleton" aria-hidden="true" class="bg-secondary motion-safe:animate-pulse size-5 rounded-[4px]"></div>
                <div data-slot="skeleton" aria-hidden="true" style="inline-size: 62%" class="rounded-[4px] bg-secondary motion-safe:animate-pulse h-3"></div>
            </div>
                    <div class="flex h-row items-center gap-3 border-b border-border px-1">
                <div data-slot="skeleton" aria-hidden="true" class="bg-secondary motion-safe:animate-pulse size-5 rounded-[4px]"></div>
                <div data-slot="skeleton" aria-hidden="true" style="inline-size: 44%" class="rounded-[4px] bg-secondary motion-safe:animate-pulse h-3"></div>
            </div>
                    <div class="flex h-row items-center gap-3 border-b border-border px-1">
                <div data-slot="skeleton" aria-hidden="true" class="bg-secondary motion-safe:animate-pulse size-5 rounded-[4px]"></div>
                <div data-slot="skeleton" aria-hidden="true" style="inline-size: 54%" class="rounded-[4px] bg-secondary motion-safe:animate-pulse h-3"></div>
            </div>
                    <div class="flex h-row items-center gap-3 border-b border-border px-1">
                <div data-slot="skeleton" aria-hidden="true" class="bg-secondary motion-safe:animate-pulse size-5 rounded-[4px]"></div>
                <div data-slot="skeleton" aria-hidden="true" style="inline-size: 38%" class="rounded-[4px] bg-secondary motion-safe:animate-pulse h-3"></div>
            </div>
                </div>
    <div data-slot="empty-state" x-show="isEmpty()" x-cloak="x-cloak" style="display: none" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="7" height="9" x="3" y="3" rx="1"/>
  <rect width="7" height="5" x="14" y="3" rx="1"/>
  <rect width="7" height="9" x="14" y="12" rx="1"/>
  <rect width="7" height="5" x="3" y="16" rx="1"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">This dashboard is empty</p>
                    <p class="text-body-sm text-muted-foreground">Add widgets to see your numbers here.</p>
            </div>
    </div>
    <ul x-ref="grid" x-show="showGrid()" x-cloak style="display: none" x-bind:style="gridStyle()" aria-label="Dashboard" class="grid w-full list-none p-0">
        <template x-for="card in list" :key="card.id">
            <li x-bind:data-board-id="card.id" x-bind:data-dragging="activeId === card.id ? '' : null" x-bind:style="cardStyle(card)" x-bind:class="cardClass(card)" class="min-w-0">
                <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents h-full w-full"><div data-slot="dashboard-board-card" x-bind="trigger" x-ref="trigger" class="relative h-full w-full">
                        <div x-bind:class="surfaceClass(card)" class="flex flex-col rounded-card border border-border bg-card text-card-foreground h-full w-full gap-0 overflow-hidden py-0">
                            <div class="flex min-h-11 items-center gap-2 border-b border-border px-3 py-1.5">
                                <template x-if="editing">
                                    <button type="button" x-bind:data-board-handle="card.id" aria-roledescription="draggable card" x-bind:aria-label="handleLabel(card)"
                                        x-bind:aria-pressed="activeId === card.id ? 'true' : 'false'" title="To reorder, focus the drag handle and press Space, then use the arrow keys. Or open the actions menu and choose Move earlier or Move later."
                                        x-on:pointerdown="handleDown($event, card.id)" x-on:keydown="handleKey($event, card.id)"
                                        class="-ms-1 flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-control text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing"><svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="9" cy="12" r="1"/>
  <circle cx="9" cy="5" r="1"/>
  <circle cx="9" cy="19" r="1"/>
  <circle cx="15" cy="12" r="1"/>
  <circle cx="15" cy="5" r="1"/>
  <circle cx="15" cy="19" r="1"/>
</svg></button>
                                </template>
                                <h3 class="min-w-0 flex-1 truncate text-body-sm font-medium" x-text="widgetTitle(card)"></h3>
                                <span x-show="card.pinned" x-cloak style="display: none" role="img" aria-label="Pinned" class="inline-flex"><svg class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg></span>
                                <template x-if="editing">
                                    <span dir="ltr" role="img" x-bind:aria-label="sizeAria(card)" class="shrink-0 text-caption tabular-nums text-muted-foreground" x-text="sizeText(card)"></span>
                                </template>
                                <template x-if="editing">
                                    <button data-slot="button"
     type="button"                         x-bind:aria-pressed="card.pinned ? &#039;true&#039; : &#039;false&#039;" x-bind:aria-label="pinLabel(card)" x-on:click="togglePinned(card)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="card.pinned" x-cloak="1" style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/>
  <path d="m2 2 20 20"/>
  <path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/>
</svg>                                        <svg x-show="!card.pinned" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg></button>
                                </template>
                                <template x-if="hasMenu(card)">
                                    <button data-slot="button"
     type="button"                         data-board-more="data-board-more" x-bind:aria-label="moreLabel(card)" x-on:click="onlySettings(card) ? openSettings(card) : openAt($el.getBoundingClientRect().left, $el.getBoundingClientRect().bottom, true)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="onlySettings(card)" x-cloak="1" style="display: none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                                        <svg x-show="!onlySettings(card)" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="1"/>
  <circle cx="19" cy="12" r="1"/>
  <circle cx="5" cy="12" r="1"/>
</svg></button>
                                </template>
                            </div>
                            <div x-bind:inert="editing ? '' : null" x-init="mountWidget($el, card)" class="min-h-0 flex-1 overflow-auto p-3">
                                <p x-show="!known(card)" x-cloak style="display: none" class="text-body-sm text-muted-foreground">This widget is not available any more.</p>
                            </div>
                        </div>
                        <template x-if="editing">
                            <button type="button" tabindex="-1" aria-hidden="true" data-board-grip x-on:pointerdown="gripDown($event, card)"
                                class="absolute bottom-1 end-1 z-10 flex size-6 cursor-nwse-resize touch-none items-center justify-center rounded-control text-muted-foreground hover:bg-muted rtl:cursor-nesw-resize"><svg aria-hidden="true" class="size-4 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11 19H5v-6"/>
  <path d="M13 5h6v6"/>
  <path d="M19 5 5 19"/>
</svg></button>
                        </template>
                    </div>
                    <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><template x-if="editing">
                            <div class="contents">
                                <div data-slot="context-menu-group" role="group" ><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;wider&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;wider&#039;) ? &#039;true&#039; : null" x-on:click="resizeBy(card, 1, 0)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 15 6 6"/>
  <path d="m15 9 6-6"/>
  <path d="M21 16v5h-5"/>
  <path d="M21 8V3h-5"/>
  <path d="M3 16v5h5"/>
  <path d="m3 21 6-6"/>
  <path d="M3 8V3h5"/>
  <path d="M9 9 3 3"/>
</svg> Wider</div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;narrower&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;narrower&#039;) ? &#039;true&#039; : null" x-on:click="resizeBy(card, -1, 0)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8"/>
  <path d="M9 19.8V15m0 0H4.2M9 15l-6 6"/>
  <path d="M15 4.2V9m0 0h4.8M15 9l6-6"/>
  <path d="M9 4.2V9m0 0H4.2M9 9 3 3"/>
</svg> Narrower</div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;taller&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;taller&#039;) ? &#039;true&#039; : null" x-on:click="resizeBy(card, 0, 1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 15 6 6"/>
  <path d="m15 9 6-6"/>
  <path d="M21 16v5h-5"/>
  <path d="M21 8V3h-5"/>
  <path d="M3 16v5h5"/>
  <path d="m3 21 6-6"/>
  <path d="M3 8V3h5"/>
  <path d="M9 9 3 3"/>
</svg> Taller</div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;shorter&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;shorter&#039;) ? &#039;true&#039; : null" x-on:click="resizeBy(card, 0, -1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8"/>
  <path d="M9 19.8V15m0 0H4.2M9 15l-6 6"/>
  <path d="M15 4.2V9m0 0h4.8M15 9l6-6"/>
  <path d="M9 4.2V9m0 0H4.2M9 9 3 3"/>
</svg> Shorter</div></div>
                                <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                <div data-slot="context-menu-group" role="group" ><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;earlier&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;earlier&#039;) ? &#039;true&#039; : null" x-on:click="move(card, -1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg> Move earlier</div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-bind:data-disabled="off(card, &#039;later&#039;) ? &#039;&#039; : null" x-bind:aria-disabled="off(card, &#039;later&#039;) ? &#039;true&#039; : null" x-on:click="move(card, 1)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg> Move later</div>
                                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="togglePinned(card)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg> <span x-text="pinLabel(card)"></span></div></div>
                                <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            </div>
                        </template>
                        <template x-if="hasFields(card)">
                            <div class="contents">
                                <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="openSettings(card)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg> Settings</div>
                            </div>
                        </template>
                        <template x-if="editing">
                            <div class="contents">
                                <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" x-show="hasFields(card)" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="removeItem(card)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg> Remove</div>
                            </div>
                        </template></div>
</template></div>
            </li>
        </template>
    </ul>
    <p role="status" aria-live="polite" class="sr-only" x-text="live"></p>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="adding" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Add a widget</h2>
                <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Pick a widget to add to the end of the dashboard.</p></div>
            <ul class="flex flex-col divide-y divide-border rounded-control border border-border">
                <template x-for="w in widgets" :key="w.type">
                    <li class="flex items-center gap-3 px-3 py-2.5">
                        <div class="min-w-0 flex-1">
                            <p class="text-body font-medium" x-text="w.title"></p>
                            <p x-show="w.description" class="text-caption text-muted-foreground" x-text="w.description"></p>
                            <p x-show="taken(w)" x-cloak style="display: none" class="text-caption text-muted-foreground">Already on the dashboard</p>
                        </div>
                        <button data-slot="button"
     type="button"                         x-bind:disabled="taken(w)" x-bind:aria-label="&#039;Add widget: &#039; + w.title" x-on:click="addWidget(w)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg> Add widget</button>
                    </li>
                </template>
            </ul>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="settingsOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground"><span x-text="settingsHeading"></span></h2>
                <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">These are saved with your dashboard.</p></div>
            <form class="grid gap-4" x-on:submit.prevent="saveSettings()">
                <template x-for="f in settingsFields" :key="f.key">
                    <div class="contents">
                        <template x-if="f.type === 'toggle'">
                            <div class="flex items-center justify-between gap-3">
                                <span x-bind:id="'nq-bs-' + f.key" class="text-body" x-text="f.label"></span>
                                <button type="button" role="switch" data-slot="switch" x-data="nqSwitch(false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="form[f.key]" x-bind:aria-labelledby="&#039;nq-bs-&#039; + f.key" class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent bg-nq-line-strong p-0.5 outline-none transition-colors duration-150 ease-nq data-checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50">
    <span data-slot="switch-thumb"  data-unchecked         x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
        class="block size-4 rounded-full bg-background shadow-xs data-checked:bg-primary-foreground transition-[translate] duration-150 ease-nq data-checked:translate-x-3.5 rtl:data-checked:-translate-x-3.5"></span>
    </button>
                            </div>
                        </template>
                        <template x-if="f.type === 'select'">
                            <div class="grid gap-1.5">
                                <span x-bind:id="'nq-bs-' + f.key" class="text-label font-medium" x-text="f.label"></span>
                                <div data-slot="select" x-data="nqSelect(null, false)" x-modelable="value" x-id="['nq-select']" x-model="form[f.key]" class="contents">
    <button data-slot="select-trigger" x-ref="trigger" x-bind="trigger"
        x-bind:aria-labelledby="&#039;nq-bs-&#039; + f.key" class="flex h-control w-full min-w-0 items-center justify-between gap-2 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px]">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
                                    <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <template x-for="o in f.options" :key="o.value">
                                            <div data-slot="select-item" x-bind="item(o.value, false)" x-effect="reg(o.value, o.label)"
                                                class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
                                                <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center"><span x-show="isSelected(o.value)" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span></span>
                                                <span data-slot="select-item-text" class="min-w-0 flex-1 truncate" x-text="o.label"></span>
                                            </div>
                                        </template>
    </div>
</template>
    </div>
                            </div>
                        </template>
                        <template x-if="f.type === 'number'">
                            <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50"><span x-text="f.label"></span></label>
                                <input data-slot="input" type="number"
     dir="ltr"                 inputmode="numeric" x-bind:min="f.min" x-bind:max="f.max" x-bind:step="f.step" x-model.number="form[f.key]" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
</div>
                        </template>
                        <template x-if="f.type === 'text'">
                            <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50"><span x-text="f.label"></span></label>
                                <input data-slot="input" type="text"
                    x-bind:placeholder="f.placeholder" x-model="form[f.key]" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
</div>
                        </template>
                    </div>
                </template>
                <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="settingsOpen = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                    <button data-slot="button"
     type="submit"                         class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Save settings</button></div>
            </form>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
</section>
    </section>
```