# ClientPortal

> What a customer sees of their project. A progress ring and hours against the budget, a read-only board, requests with a form, hours per week, sent invoices and an activity feed.

Source: https://docs.nasaqui.com/components/client-portal

## Install

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

The page you share with a customer. It shows **aggregates and sent documents only**: how many tasks are done, hours used against the budget, hours per week, how many issues are open and how many requests wait. It never lists internal issues, single time entries, internal notes, or an invoice that is still a draft.

Six tabs: **Overview** (progress ring, hour tiles, weekly bars), **Board** (four read-only columns), **Requests** (a form and the list), **Time** (totals and a table by week), **Invoices** (the [InvoiceList](https://docs.nasaqui.com/components/invoice-list) with pay and download) and **Activity** (a [Timeline](https://docs.nasaqui.com/components/timeline)).

## When to use

- A customer, client or stakeholder needs to follow a project without an account in your tool.

## When not to use

- Your own team's view of a project: use `ProjectView`.
- Anything with internal comments or cost rates: keep it out of the props.

## Import

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

## Quick start

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

export const Portal = (p: { data: PortalData }) => (
  <ClientPortal
    project={{ name: "New booking platform", client: "Tamkeen Co." }}
    tasks={p.data.tasks}
    requests={p.data.requests}
    weeks={p.data.weeks}
    budgetHours={240}
    invoices={p.data.invoices}
    currency="SAR"
    activity={p.data.activity}
    openIssues={4}
    onRequest={(r) => api.createRequest(r)}
  />
);
```

## Anatomy

```
ClientPortal                 data-slot="client-portal"
├─ header                    project, client, summary, due date (replaceable with `header`)
└─ Tabs
   ├─ Overview               Ring (data-slot="portal-ring"), StatGrid, budget Progress, weekly bars
   ├─ Board                  four sections of read-only cards  data-slot="portal-task"
   ├─ Requests               form (data-slot="portal-request-form") and list  data-slot="portal-request"
   ├─ Time                   StatGrid, budget Progress, DataTable by week
   ├─ Invoices               InvoiceList (drafts removed)
   └─ Activity               Timeline
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `project` | `PortalProject` | required | `{ name, client?, summary?, due? }`. |
| `tasks` | `PortalTask[]` | required | `{ id, title, status: "todo" \| "doing" \| "review" \| "done", assignee?, due? }`. |
| `openIssues?` | `number` | `0` | Only the count. |
| `requests` | `PortalRequest[]` | required | `{ id, title, description?, status, createdAt, by?, reply? }`. |
| `weeks` | `PortalWeek[]` | required | `{ week, hours }`. The total and the chart come from these. |
| `budgetHours?` | `number` | `0` | 0 means no budget: the budget bar is hidden. |
| `invoices` | `InvoiceSummary[]` | required | Drafts are removed before they reach the list. |
| `currency` | `string` | required | ISO 4217. |
| `activity` | `PortalActivity[]` | required | `{ id, actor?, title, description?, at }`. |
| `onRequest?` | `({ title, description }) => void \| Promise<void>` | none | Shows the request form. Reject to show the message. |
| `onOpenInvoice?` / `onPayInvoice?` / `onDownloadInvoice?` | | none | Passed to `InvoiceList`. |
| `taskActions?` / `requestActions?` / `activityActions?` | `(item) => ContextMenuAction[]` | none | Menus on context-click, long-press, Shift+F10 or the Menu key. Items with actions become focusable. |
| `weekActions?` | `(week) => DataTableRowAction[]` | none | Row menu and context menu of the weekly table. |
| `tab?` / `defaultTab?` / `onTabChange?` | `ClientPortalTab` | `"overview"` | |
| `chartWeeks?` | `number` | `8` | Weeks drawn on Overview. |
| `header?` | `ReactNode` | project header | For a logo or sign-out. |
| `locale?` / `labels?` | | provider locale | Every string in Arabic and English. |

### Logic (exported, pure)

`portalProgress(tasks)`, `portalBudget(budget, used)` (warns from 80 percent, danger when over), `portalTotalHours(weeks)`, `portalWeeksNewestFirst(weeks)`, `portalPendingRequests(requests)`, `portalVisibleInvoices(invoices)`, `portalRing(percent, radius)`. Use `portalVisibleInvoices` on your server too, so drafts are never sent to the browser.

## Examples

### Menus on a card

```tsx
<ClientPortal
  {...data}
  taskActions={(task) => [{ id: "ask", label: "Ask a question", onSelect: () => ask(task.id) }]}
/>
```

### Control the tab from the URL

```tsx
<ClientPortal {...data} tab={params.tab as ClientPortalTab} onTabChange={(tab) => router.replace(`?tab=${tab}`)} />
```

## Accessibility

- The ring is an image with the percent in its name; the weekly bars are one image named "Hours in the last 8 weeks" and every number is also in the Time table.
- Board columns are named sections and lists; cards with a menu take focus so the keyboard opens it.
- Status is always a word with an icon, never colour alone. Errors on the form are text under the field.

## RTL & i18n

- All text has Arabic and English defaults, and dates and numbers follow the locale.
- Layout uses logical spacing; the tab bar scrolls sideways on narrow screens.

## Styling & tokens

Cards, tabs, status and progress use the standard tokens; the ring uses the primary token on a muted track. The board is one column on phones, two from `sm`, four from `xl`.

## Do / Don't

- **Do** build the props on the server from aggregates, and filter drafts there.
- **Do** keep replies to requests short and specific.
- **Don't** pass single time entries, internal comments or rates.

## Related

- [InvoiceList](https://docs.nasaqui.com/components/invoice-list) · [Timeline](https://docs.nasaqui.com/components/timeline) · [StatCard](https://docs.nasaqui.com/components/stat-card) · [KanbanBoard](https://docs.nasaqui.com/components/kanban-board)

## Lab

https://docs.nasaqui.com/?path=/docs/components-crm-client-portal--docs

## Code

### React

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

export const Portal = (p: { data: PortalData }) => (
  <ClientPortal
    project={{ name: "New booking platform", client: "Tamkeen Co." }}
    tasks={p.data.tasks}
    requests={p.data.requests}
    weeks={p.data.weeks}
    budgetHours={240}
    invoices={p.data.invoices}
    currency="SAR"
    activity={p.data.activity}
    openIssues={4}
    onRequest={(r) => api.createRequest(r)}
  />
);
```

### shadcn

```tsx
import { ClientPortal } from "@/components/ui/client-portal";

export const Portal = (p: { data: PortalData }) => (
  <ClientPortal
    project={{ name: "New booking platform", client: "Tamkeen Co." }}
    tasks={p.data.tasks}
    requests={p.data.requests}
    weeks={p.data.weeks}
    budgetHours={240}
    invoices={p.data.invoices}
    currency="SAR"
    activity={p.data.activity}
    openIssues={4}
    onRequest={(r) => api.createRequest(r)}
  />
);
```

### Vue

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

const tasks = [
  { id: "t1", title: "Booking calendar", status: "done" as const, assignee: "Huda Salem" },
  { id: "t2", title: "Payment page", status: "doing" as const, assignee: "Omar Nasser" },
  { id: "t3", title: "Reminder emails", status: "review" as const },
  { id: "t4", title: "Admin reports", status: "todo" as const },
];
const requests = [
  { id: "r1", title: "Add an Arabic invoice template", status: "pending" as const, createdAt: "2026-09-20T09:00:00Z", by: "Mona Ali" },
  { id: "r2", title: "Change the logo colour", status: "done" as const, createdAt: "2026-09-02T09:00:00Z", reply: "Done in the last release." },
];
const weeks = [
  { week: "2026-09-07", hours: 22 },
  { week: "2026-09-14", hours: 31.5 },
  { week: "2026-09-21", hours: 18 },
];
const invoices = [
  { id: "i1", number: "INV-0041", status: "paid" as const, issueDate: "2026-08-30", amount: 4800 },
  { id: "i2", number: "INV-0042", status: "open" as const, issueDate: "2026-09-25", dueDate: "2026-10-10", amount: 3200 },
  { id: "i3", number: "INV-0043", status: "draft" as const, issueDate: "2026-09-28", amount: 1000 },
];
const activity = [
  { id: "a1", actor: { name: "Huda Salem" }, title: "Booking calendar finished", at: "2026-09-26T10:00:00Z" },
  { id: "a2", title: "Invoice INV-0042 sent", at: "2026-09-25T08:00:00Z" },
];
const createRequest = async (r: { title: string; description: string }) => {
  console.log("request", r);
};
</script>

<template>
  <NqClientPortal
    :project="{ name: 'New booking platform', client: 'Tamkeen Co.', summary: 'Online booking for the Riyadh clinics.', due: '2026-12-01' }"
    :tasks="tasks"
    :requests="requests"
    :weeks="weeks"
    :budget-hours="240"
    :invoices="invoices"
    currency="USD"
    :activity="activity"
    :open-issues="4"
    :on-request="createRequest"
  />
</template>
```

### Blade

```blade
@php
    $tasks = [
        ['id' => 't1', 'title' => 'Booking calendar', 'status' => 'done', 'assignee' => 'Huda Salem'],
        ['id' => 't2', 'title' => 'Payment page', 'status' => 'doing', 'assignee' => 'Omar Nasser'],
        ['id' => 't3', 'title' => 'Reminder emails', 'status' => 'review'],
        ['id' => 't4', 'title' => 'Admin reports', 'status' => 'todo'],
    ];
    $requests = [
        ['id' => 'r1', 'title' => 'Add an Arabic invoice template', 'status' => 'pending', 'createdAt' => '2026-09-20T09:00:00Z', 'by' => 'Mona Ali'],
        ['id' => 'r2', 'title' => 'Change the logo colour', 'status' => 'done', 'createdAt' => '2026-09-02T09:00:00Z', 'reply' => 'Done in the last release.'],
    ];
    $weeks = [['week' => '2026-09-07', 'hours' => 22], ['week' => '2026-09-14', 'hours' => 31.5], ['week' => '2026-09-21', 'hours' => 18]];
    $invoices = [
        ['id' => 'i1', 'number' => 'INV-0041', 'status' => 'paid', 'issueDate' => '2026-08-30', 'amount' => 4800],
        ['id' => 'i2', 'number' => 'INV-0042', 'status' => 'open', 'issueDate' => '2026-09-25', 'dueDate' => '2026-10-10', 'amount' => 3200],
        ['id' => 'i3', 'number' => 'INV-0043', 'status' => 'draft', 'issueDate' => '2026-09-28', 'amount' => 1000],
    ];
    $activity = [
        ['id' => 'a1', 'actor' => ['name' => 'Huda Salem'], 'title' => 'Booking calendar finished', 'at' => '2026-09-26T10:00:00Z'],
        ['id' => 'a2', 'title' => 'Invoice INV-0042 sent', 'at' => '2026-09-25T08:00:00Z'],
    ];
@endphp
<x-nq::client-portal :project="['name' => 'New booking platform', 'client' => 'Tamkeen Co.', 'summary' => 'Online booking for the Riyadh clinics.', 'due' => '2026-12-01']"
    :tasks="$tasks" :requests="$requests" :weeks="$weeks" :budget-hours="240" :invoices="$invoices" currency="USD" :activity="$activity" :open-issues="4" request-form
    :task-actions="[['id' => 'ask', 'label' => 'Ask a question', 'icon' => 'message-circle']]" />
```

### HTML + Alpine

```html
<div data-slot="client-portal" x-data="nqClientPortal(JSON.parse('{\u0022tab\u0022:\u0022overview\u0022,\u0022strings\u0022:{\u0022titleRequired\u0022:\u0022Tell us what you need.\u0022}}'))"
    class="flex w-full min-w-0 flex-col gap-5">
            <header class="flex flex-col gap-1">
            <p class="text-caption text-muted-foreground">Tamkeen Co.</p>            <h1 class="text-heading-lg font-semibold">New booking platform</h1>
            <p class="max-w-prose text-body-sm text-muted-foreground">Online booking for the Riyadh clinics.</p>            <p class="text-caption text-muted-foreground">Due: Dec 1, 2026</p>        </header>
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('overview')" x-modelable="value" x-id="['nq-tabs']" x-model="portalTab" class="flex flex-col gap-4">
    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    class="relative z-0 flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border max-w-full overflow-x-auto">
    <button type="button" data-slot="tabs-tab" x-bind="tab('overview')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Overview</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('board')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Board</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('requests')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Requests</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('time')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Time</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('invoices')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Invoices</button>
                            <button type="button" data-slot="tabs-tab" x-bind="tab('activity')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active: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 h-9 px-0.5">Activity</button>
                        <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] bottom-0 h-0.5 rounded-full bg-primary"></span>
</div>
        <div data-slot="tabs-panel" x-bind="panel('overview')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-4 pt-4"><div class="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
                <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]"><h2 data-slot="card-title" class="text-label text-foreground">Progress</h2></div>
                    <div data-slot="card-content" class="px-4 flex flex-wrap items-center gap-5"><div data-slot="portal-ring" class="relative size-36 shrink-0">
                            <svg viewBox="0 0 120 120" role="img" aria-label="25% done" class="size-full -rotate-90">
                                <circle cx="60" cy="60" r="52" fill="none" stroke-width="10" class="stroke-muted" />
                                <circle cx="60" cy="60" r="52" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="326.72563597334" stroke-dashoffset="245.04422698" class="stroke-primary transition-[stroke-dashoffset] motion-reduce:transition-none" />
                            </svg>
                            <div aria-hidden="true" class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-heading-lg font-semibold tabular-nums">25%</span>
                                <span class="text-caption text-muted-foreground">done</span>
                            </div>
                        </div>
                        <div class="flex min-w-0 flex-1 flex-col gap-2">
                            <p class="text-body-sm">1 of 4 tasks done</p>
                            <ul class="flex flex-col gap-1 text-caption text-muted-foreground">
                                                                    <li class="flex justify-between gap-3"><span>To do</span><span class="tabular-nums">1</span></li>
                                                                    <li class="flex justify-between gap-3"><span>In progress</span><span class="tabular-nums">1</span></li>
                                                                    <li class="flex justify-between gap-3"><span>In review</span><span class="tabular-nums">1</span></li>
                                                                    <li class="flex justify-between gap-3"><span>Done</span><span class="tabular-nums">1</span></li>
                                                            </ul>
                        </div></div></div>
                <div class="flex min-w-0 flex-col gap-4">
                    <div data-slot="stat-grid" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Hours used</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">
                                            71.5
                                    </div>
                            </div>
                    </div>
    </div>
                        <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Hours left</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">
                                            168.5
                                    </div>
                            </div>
                    </div>
    </div>
                        <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Open issues</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">
                                            4
                                    </div>
                            </div>
                    </div>
    </div>
                        <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Waiting for a reply</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">
                                            1
                                    </div>
                            </div>
                    </div>
    </div></div>
                                            <div data-slot="progress" data-tone="success" role="progressbar"  aria-labelledby="nq-progress-c4d281cd-label"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="30"     aria-valuetext="30%" data-progressing
    aria-label="71.5 of 240 hours used" class="flex w-full flex-col gap-1.5">
            <div data-slot="progress-head" class="flex items-baseline justify-between gap-3 text-body-sm">
            <span id="nq-progress-c4d281cd-label" class="text-label text-foreground">71.5 of 240 hours used</span>            <span aria-hidden="true" class="text-muted-foreground tabular-nums">30%</span>        </div>
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-2">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:30%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-nq-success"></div>
    </div>
</div>
                                    </div>
            </div>
            <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]"><h2 data-slot="card-title" class="text-label text-foreground">Hours per week</h2></div>
                <div data-slot="card-content" class="px-4"><div role="img" aria-label="Hours in the last 3 weeks" class="flex h-40 items-end gap-2">
                                                            <div aria-hidden="true" class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
                                    <span class="text-caption tabular-nums text-muted-foreground">22</span>
                                    <div class="w-full max-w-10 rounded-t-control bg-primary" style="height: 69.84126984127%"></div>
                                    <span class="w-full truncate text-center text-caption text-muted-foreground">Sep 7</span>
                                </div>
                                                            <div aria-hidden="true" class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
                                    <span class="text-caption tabular-nums text-muted-foreground">31.5</span>
                                    <div class="w-full max-w-10 rounded-t-control bg-primary" style="height: 100%"></div>
                                    <span class="w-full truncate text-center text-caption text-muted-foreground">Sep 14</span>
                                </div>
                                                            <div aria-hidden="true" class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
                                    <span class="text-caption tabular-nums text-muted-foreground">18</span>
                                    <div class="w-full max-w-10 rounded-t-control bg-primary" style="height: 57.142857142857%"></div>
                                    <span class="w-full truncate text-center text-caption text-muted-foreground">Sep 21</span>
                                </div>
                                                    </div></div></div></div>
        <div data-slot="tabs-panel" x-bind="panel('board')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-3 pt-4"><p class="text-caption text-muted-foreground">A read-only view of the board.</p>
            <div class="grid w-full gap-3 sm:grid-cols-2 xl:grid-cols-4">
                                                        <section aria-label="To do" class="flex min-w-0 flex-col gap-2 rounded-card border border-border bg-muted/40 p-2">
                        <h3 class="flex items-center justify-between px-1 text-label">
                            <span>To do</span>
                            <span class="text-caption tabular-nums text-muted-foreground">1</span>
                        </h3>
                        <div role="list" class="flex flex-col gap-2">
                                                                                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="portal-task" x-bind="trigger" x-ref="trigger" class="flex flex-col gap-2 rounded-control border border-border bg-card p-3 text-body-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" role="listitem" tabindex="0"><span>Admin reports</span>
                                            <span class="flex items-center gap-2 text-caption text-muted-foreground">
                                                                                                <span class="truncate">Unassigned</span>
                                            </span></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="act(&#039;task&#039;, &#039;ask&#039;, &#039;t4&#039;)" 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 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>            Ask a question</div></div>
</template></div>
                                                                                    </div>
                    </section>
                                                        <section aria-label="In progress" class="flex min-w-0 flex-col gap-2 rounded-card border border-border bg-muted/40 p-2">
                        <h3 class="flex items-center justify-between px-1 text-label">
                            <span>In progress</span>
                            <span class="text-caption tabular-nums text-muted-foreground">1</span>
                        </h3>
                        <div role="list" class="flex flex-col gap-2">
                                                                                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="portal-task" x-bind="trigger" x-ref="trigger" class="flex flex-col gap-2 rounded-control border border-border bg-card p-3 text-body-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" role="listitem" tabindex="0"><span>Payment page</span>
                                            <span class="flex items-center gap-2 text-caption text-muted-foreground">
                                                <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Nasser" >ON</span>
    </span>
                                                <span class="truncate">Omar Nasser</span>
                                            </span></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="act(&#039;task&#039;, &#039;ask&#039;, &#039;t2&#039;)" 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 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>            Ask a question</div></div>
</template></div>
                                                                                    </div>
                    </section>
                                                        <section aria-label="In review" class="flex min-w-0 flex-col gap-2 rounded-card border border-border bg-muted/40 p-2">
                        <h3 class="flex items-center justify-between px-1 text-label">
                            <span>In review</span>
                            <span class="text-caption tabular-nums text-muted-foreground">1</span>
                        </h3>
                        <div role="list" class="flex flex-col gap-2">
                                                                                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="portal-task" x-bind="trigger" x-ref="trigger" class="flex flex-col gap-2 rounded-control border border-border bg-card p-3 text-body-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" role="listitem" tabindex="0"><span>Reminder emails</span>
                                            <span class="flex items-center gap-2 text-caption text-muted-foreground">
                                                                                                <span class="truncate">Unassigned</span>
                                            </span></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="act(&#039;task&#039;, &#039;ask&#039;, &#039;t3&#039;)" 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 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>            Ask a question</div></div>
</template></div>
                                                                                    </div>
                    </section>
                                                        <section aria-label="Done" class="flex min-w-0 flex-col gap-2 rounded-card border border-border bg-muted/40 p-2">
                        <h3 class="flex items-center justify-between px-1 text-label">
                            <span>Done</span>
                            <span class="text-caption tabular-nums text-muted-foreground">1</span>
                        </h3>
                        <div role="list" class="flex flex-col gap-2">
                                                                                                                                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="portal-task" x-bind="trigger" x-ref="trigger" class="flex flex-col gap-2 rounded-control border border-border bg-card p-3 text-body-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" role="listitem" tabindex="0"><span>Booking calendar</span>
                                            <span class="flex items-center gap-2 text-caption text-muted-foreground">
                                                <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Huda Salem" >HS</span>
    </span>
                                                <span class="truncate">Huda Salem</span>
                                            </span></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="act(&#039;task&#039;, &#039;ask&#039;, &#039;t1&#039;)" 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 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>            Ask a question</div></div>
</template></div>
                                                                                    </div>
                    </section>
                            </div></div>
        <div data-slot="tabs-panel" x-bind="panel('requests')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus flex flex-col gap-4 pt-4"><form data-slot="portal-request-form" novalidate class="flex w-full max-w-xl flex-col gap-3 rounded-card border border-border bg-card p-4" x-on:submit.prevent="submit()">
                    <h2 class="text-heading-sm font-semibold">Ask for something</h2>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="formInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">What do you need?</label>
                        <input data-slot="input" type="text"
                    x-model="reqTitle" 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 data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="error"></span></div>
</div>
                    <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">Details (optional)</label>
                        <textarea data-slot="textarea"
                x-model="reqDescription" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground 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] min-h-20 py-2"></textarea>
</div>
                    <div class="flex items-center gap-3">
                        <button data-slot="button"
     type="submit"                         x-bind:disabled="busy" x-bind:aria-busy="busy" 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)]">
        Send request</button>
                        <span role="status" class="text-body-sm text-muted-foreground" x-show="sent" style="display: none">Sent. We will reply here.</span>
                    </div>
                </form>
                        <h2 class="text-heading-sm font-semibold">Requests</h2>
                            <div role="list" class="flex w-full flex-col gap-2">
                                                                                                <div role="listitem" data-slot="portal-request" class="flex flex-col gap-1 rounded-card border border-border bg-card p-3 outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                <div class="flex flex-wrap items-center justify-between gap-2">
    <span class="font-medium">Add an Arabic invoice template</span>
    <span data-slot="status" data-tone="warning" 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"  title="Waiting" >Waiting</span>
</span>
</div>
<p class="text-caption text-muted-foreground">By Mona Ali · Sep 20, 2026</p>
                            </div>
                                                                                                                        <div role="listitem" data-slot="portal-request" class="flex flex-col gap-1 rounded-card border border-border bg-card p-3 outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                <div class="flex flex-wrap items-center justify-between gap-2">
    <span class="font-medium">Change the logo colour</span>
    <span data-slot="status" data-tone="success" 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"  title="Done" >Done</span>
</span>
</div>
<p class="text-body-sm">Done in the last release.</p><p class="text-caption text-muted-foreground">Sep 2, 2026</p>
                            </div>
                                                            </div></div>
        <div data-slot="tabs-panel" x-bind="panel('time')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div class="flex w-full flex-col gap-4">
                <div data-slot="stat-grid" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Total hours</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">
                                            71.5
                                    </div>
                            </div>
                    </div>
    </div>
                    <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Budget</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">
                                            240
                                    </div>
                            </div>
                    </div>
    </div>
                    <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Hours left</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">
                                            168.5
                                    </div>
                            </div>
                    </div>
    </div></div>
                                    <div data-slot="progress" data-tone="success" role="progressbar"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="30"     aria-valuetext="30%" data-progressing
    aria-label="71.5 of 240 hours used" class="flex w-full flex-col gap-1.5">
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-2">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:30%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-nq-success"></div>
    </div>
</div>
                                <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u00222026-09-21\u0022,\u0022week\u0022:\u00222026-09-21\u0022,\u0022hours\u0022:18},{\u0022id\u0022:\u00222026-09-14\u0022,\u0022week\u0022:\u00222026-09-14\u0022,\u0022hours\u0022:31.5},{\u0022id\u0022:\u00222026-09-07\u0022,\u0022week\u0022:\u00222026-09-07\u0022,\u0022hours\u0022:22}]'), JSON.parse('[{\u0022id\u0022:\u0022week\u0022,\u0022header\u0022:\u0022Week of\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022hours\u0022,\u0022header\u0022:\u0022Hours\u0022,\u0022type\u0022:\u0022number\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true,\u0022hideable\u0022:false}]'), JSON.parse('{\u0022locale\u0022:\u0022en\u0022,\u0022actions\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="Hours by week"                 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="Hours by week"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 0) + ', 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="week" x-show="shown['week']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('week')"                             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('week', $event.shiftKey)"
                                    x-bind:class="sortOf('week') ? '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 >Week of</span>
                                    <svg aria-hidden="true" x-show="! sortOf('week')" 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('week') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('week') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="hours" x-show="shown['hours']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('hours')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('hours', $event.shiftKey)"
                                    x-bind:class="sortOf('hours') ? '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 flex-row-reverse">
                                    <span >Hours</span>
                                    <svg aria-hidden="true" x-show="! sortOf('hours')" 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('hours') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('hours') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </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">
                                No hours logged yet                            </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, false)"
                                                                                    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 ">
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="week" x-show="shown['week']"  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;week&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="hours" x-show="shown['hours']"  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;hours&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
            </div></div>
        <div data-slot="tabs-panel" x-bind="panel('invoices')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><div data-slot="invoice-list" x-data="nqInvoiceList(JSON.parse('{\u0022downloadFailed\u0022:\u0022The invoice could not be downloaded.\u0022}'))" x-on:nq-data-table-action="onAction($event)" class="flex flex-col gap-6">
            <div data-slot="stat-grid" class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,14rem),1fr))] gap-3"><div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Outstanding</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,200.00</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
            <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Overdue</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">$0.00</bdi>
                                    </div>
                            </div>
                    </div>
    </div>
            <div data-slot="stat-card"   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">
                        <div data-slot="stat-card-label" class="min-w-0 truncate text-body-sm text-muted-foreground">Paid</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">$4,800.00</bdi>
                                    </div>
                            </div>
                    </div>
    </div></div>
            <div class="flex flex-col gap-3">
            <p role="alert" x-show="failed" x-text="failed" style="display: none" class="flex items-center gap-2 text-body-sm text-nq-danger-text"></p>
            <div data-slot="data-table" x-data="nqDataTable(JSON.parse('[{\u0022id\u0022:\u0022i2\u0022,\u0022number\u0022:\u0022INV-0042\u0022,\u0022status\u0022:\u0022open\u0022,\u0022issueDate\u0022:\u00222026-09-25\u0022,\u0022dueDate\u0022:\u00222026-10-10\u0022,\u0022amount\u0022:3200},{\u0022id\u0022:\u0022i1\u0022,\u0022number\u0022:\u0022INV-0041\u0022,\u0022status\u0022:\u0022paid\u0022,\u0022issueDate\u0022:\u00222026-08-30\u0022,\u0022amount\u0022:4800}]'), JSON.parse('[{\u0022id\u0022:\u0022number\u0022,\u0022header\u0022:\u0022Invoice\u0022,\u0022type\u0022:\u0022mono\u0022,\u0022sortable\u0022:true,\u0022searchable\u0022:true,\u0022hideable\u0022:false},{\u0022id\u0022:\u0022issueDate\u0022,\u0022header\u0022:\u0022Issued\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022dueDate\u0022,\u0022header\u0022:\u0022Due\u0022,\u0022type\u0022:\u0022date\u0022,\u0022sortable\u0022:true},{\u0022id\u0022:\u0022status\u0022,\u0022header\u0022:\u0022Status\u0022,\u0022type\u0022:\u0022status\u0022,\u0022sortable\u0022:true,\u0022filter\u0022:true,\u0022options\u0022:[{\u0022value\u0022:\u0022open\u0022,\u0022label\u0022:\u0022Open\u0022,\u0022tone\u0022:\u0022info\u0022},{\u0022value\u0022:\u0022overdue\u0022,\u0022label\u0022:\u0022Overdue\u0022,\u0022tone\u0022:\u0022danger\u0022},{\u0022value\u0022:\u0022paid\u0022,\u0022label\u0022:\u0022Paid\u0022,\u0022tone\u0022:\u0022success\u0022},{\u0022value\u0022:\u0022draft\u0022,\u0022label\u0022:\u0022Draft\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022void\u0022,\u0022label\u0022:\u0022Void\u0022,\u0022tone\u0022:\u0022neutral\u0022},{\u0022value\u0022:\u0022refunded\u0022,\u0022label\u0022:\u0022Refunded\u0022,\u0022tone\u0022:\u0022warning\u0022}]},{\u0022id\u0022:\u0022amount\u0022,\u0022header\u0022:\u0022Amount\u0022,\u0022type\u0022:\u0022currency\u0022,\u0022currency\u0022:\u0022USD\u0022,\u0022align\u0022:\u0022end\u0022,\u0022sortable\u0022:true}]'), JSON.parse('{\u0022nameKey\u0022:\u0022number\u0022,\u0022pageSize\u0022:8,\u0022locale\u0022:\u0022en\u0022,\u0022actions\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="data-table-toolbar" class="flex flex-wrap items-center gap-2">
                            <div data-slot="data-table-search" class="relative w-full sm:w-64">
                    <svg aria-hidden="true" class="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 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="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    x-model="query" x-on:keydown.escape="if (query) { $event.preventDefault(); query = &#039;&#039; }" placeholder="Search invoices…" aria-label="Search invoices…" class="w-full min-w-0 rounded-control border border-input bg-card px-3 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-sm ps-8 pe-8 text-body-sm [&::-webkit-search-cancel-button]:hidden">
                    <button type="button" x-show="query" aria-label="Clear search" x-on:click="query = ''" style="display: none"
                        class="absolute end-1.5 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3.5" 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 data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:class="facetCount(&#039;status&#039;) ? &#039;&#039; : &#039;border-dashed text-muted-foreground&#039;" data-facet="status" 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="M2 5h20"/>
  <path d="M6 12h12"/>
  <path d="M9 19h6"/>
</svg>                        Status
                        <span data-slot="badge" x-show="facetCount('status')" x-text="facetSummary('status')" style="display: none"
                            class="-me-1 inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border border-border px-1.5 text-caption font-medium tabular-nums text-muted-foreground"></span></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-start.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-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|open&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Open
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|overdue&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Overdue
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|paid&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Paid
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|draft&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Draft
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|void&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Void
</div>
                                                            <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="facet[&#039;status|refunded&#039;]" 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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Refunded
</div></div>
                        <div x-show="facetCount('status')" style="display: none">
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="resetFacet(&#039;status&#039;)" 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">Reset</div>
                        </div></div>
</template></div>
                            <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" 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 ms-auto">
        <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="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>                        View</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-48"><div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Columns</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;issueDate&#039;]" x-bind:disabled="shown[&#039;issueDate&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Issued
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;dueDate&#039;]" x-bind:disabled="shown[&#039;dueDate&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Due
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;status&#039;]" x-bind:disabled="shown[&#039;status&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Status
</div>
                                                                    <div data-slot="dropdown-menu-checkbox-item" role="menuitemcheckbox" x-data="{ checked: false }" x-modelable="checked" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) checked = ! checked"
    x-bind:aria-checked="checked ? 'true' : 'false'" x-bind:data-checked="checked ? '' : undefined" x-bind:data-unchecked="checked ? undefined : ''"
     data-keep-open         x-model="shown[&#039;amount&#039;]" x-bind:disabled="shown[&#039;amount&#039;] &amp;&amp; shownCount() === 1 ? &#039;&#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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="checked" class="contents"  style="display:none" ><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="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    Amount
</div></div></div>
</template></div>
                    </div>
    <div data-slot="table-container" role="region" tabindex="0" aria-label="Invoices"                 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="Invoices"  x-bind:style="'grid-template-columns: repeat(' + (shownCount() + 0) + ', 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 >Invoice</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="issueDate" x-show="shown['issueDate']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('issueDate')"                             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('issueDate', $event.shiftKey)"
                                    x-bind:class="sortOf('issueDate') ? '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 >Issued</span>
                                    <svg aria-hidden="true" x-show="! sortOf('issueDate')" 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('issueDate') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('issueDate') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="dueDate" x-show="shown['dueDate']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('dueDate')"                             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('dueDate', $event.shiftKey)"
                                    x-bind:class="sortOf('dueDate') ? '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 >Due</span>
                                    <svg aria-hidden="true" x-show="! sortOf('dueDate')" 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('dueDate') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('dueDate') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="status" x-show="shown['status']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('status')"                             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('status', $event.shiftKey)"
                                    x-bind:class="sortOf('status') ? '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 >Status</span>
                                    <svg aria-hidden="true" x-show="! sortOf('status')" 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('status') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('status') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </div>
                                                                    <div role="columnheader" data-slot="table-head" data-col="amount" x-show="shown['amount']"  x-bind:class="pad"  x-bind:aria-sort="ariaSort('amount')"                             class="flex items-center h-row text-end justify-end align-middle text-caption font-medium whitespace-nowrap text-muted-foreground">
                                                            <button type="button"  x-on:click="toggleSort('amount', $event.shiftKey)"
                                    x-bind:class="sortOf('amount') ? '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 flex-row-reverse">
                                    <span >Amount</span>
                                    <svg aria-hidden="true" x-show="! sortOf('amount')" 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('amount') === 'asc'" style="display: none" />
                                    <x-lucide-arrow-down aria-hidden="true" class="size-3.5 shrink-0" x-show="sortOf('amount') === 'desc'" style="display: none" />
                                                                    </button>
                                                                                </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">
  <path d="M13 16H8"/>
  <path d="M14 8H8"/>
  <path d="M16 12H8"/>
  <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 class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No invoices yet</p>
                    <p class="text-body-sm text-muted-foreground">Invoices appear here after your first billing date.</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, false)"
                                                                                    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 ">
                                                                                            <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="issueDate" x-show="shown['issueDate']"  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;issueDate&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                                                            <div role="cell" data-slot="table-cell" data-cell-col="dueDate" x-show="shown['dueDate']"  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;dueDate&#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="amount" x-show="shown['amount']"  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;amount&#039;))"></span>
                                                                                                                                </span>
                                                                    </div>
                                                    </div>
                                            </div>
                </template>
                    </div>
    </div>
            <nav data-slot="data-table-pagination" aria-label="Pagination" x-show="paged" style="display: none" class="flex flex-wrap items-center justify-end gap-2">
                        <span class="text-caption tabular-nums text-muted-foreground" aria-live="polite" x-text="rangeText()"></span>
            <button type="button" aria-label="Previous page" x-bind:disabled="page === 0 ? '' : null" x-on:click="setPage(page - 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="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="m15 18-6-6 6-6"/>
</svg></button>
            <button type="button" aria-label="Next page" x-bind:disabled="page >= pageCount - 1 ? '' : null" x-on:click="setPage(page + 1)"
                class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4"><svg aria-hidden="true" class="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="m9 18 6-6-6-6"/>
</svg></button>
        </nav>
            <span role="status" aria-live="polite" class="sr-only" x-text="announce"></span>
</div>
        </div>
    </div></div>
        <div data-slot="tabs-panel" x-bind="panel('activity')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus pt-4"><ol data-slot="timeline" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Huda Salem" >HS</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Booking calendar finished</p>
                            <time data-slot="date-time" datetime="2026-09-26T10:00:00+00:00" dir="auto"  title="Sep 26, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">2 days ago</time>
                    </div>
                    </div>
</li>
                                                                                                <li data-slot="timeline-item" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span aria-hidden="true" class="size-2.5 rounded-full border-2 border-nq-line bg-background"></span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground">Invoice INV-0042 sent</p>
                            <time data-slot="date-time" datetime="2026-09-25T08:00:00+00:00" dir="auto"  title="Sep 25, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">4 days ago</time>
                    </div>
                    </div>
</li></ol></div>
</div>
</div>
```