tembro 3.1.16 → 4.0.0

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/mock.ts

@@ -1,59 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const confirmDialogMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Button, ConfirmDialog } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = useState(false)
-  const [busy, setBusy] = useState(false)
-
-  async function handleConfirm() {
-    setBusy(true)
-    await new Promise((resolve) => setTimeout(resolve, 900))
-    setBusy(false)
-    setOpen(false)
-  }
-
-  return (
-    <div className="space-y-3">
-      <Button onClick={() => setOpen(true)} variant="destructive">
-        Delete project
-      </Button>
-      <ConfirmDialog
-        open={open}
-        onOpenChange={setOpen}
-        title="Delete project?"
-        description="This action cannot be undone. Team members will lose access immediately."
-        confirmText="Delete forever"
-        confirmVariant="destructive"
-        isLoading={busy}
-        onCancel={() => setOpen(false)}
-        onConfirm={handleConfirm}
-      />
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="confirm-trigger">Delete project</button>`,
-  cliCommand: "npx tembro add confirm-dialog",
-  highlights: [
-    "Controlled confirm flow",
-    "Destructive tone and explicit labels",
-    "Async confirm loading state",
-    "Cancel-first safety behavior",
-  ],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "dashboard-starter"],
-  scenarios: [
-    { title: "Destructive confirm", description: "Use explicit confirm wording for irreversible actions." },
-    { title: "Async confirmation", description: "Keep action button loading while server side mutation is running." },
-    { title: "Safe cancel", description: "Allow immediate escape via cancel or outside interactions if supported." },
-    { title: "Context-rich dialog", description: "Always include title and short description that explain impact." },
-  ],
-  capabilityNotes: [
-    "Use ConfirmDialog where user intent is high-risk and needs explicit language.",
-    "Keep confirm labels noun-first (`Delete workspace`) to reduce ambiguity.",
-    "Tie `isLoading` to async mutation state and close only on success.",
-    "Avoid reusing default labels for destructive flows.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/showcase.tsx

@@ -1,93 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, ConfirmDialog } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function ConfirmDialogShowcase({ mode }: ComponentDemoProps) {
-  const [open, setOpen] = React.useState(false)
-  const [readonlyOpen, setReadonlyOpen] = React.useState(false)
-  const [busy, setBusy] = React.useState(false)
-
-  async function handleConfirm() {
-    setBusy(true)
-    await new Promise((resolve) => setTimeout(resolve, 700))
-    setBusy(false)
-    setOpen(false)
-  }
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Confirm dialog</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Use it only for explicit checkpoints</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Deletion, archive, publish, or save confirmation should require one clear yes or no.</p>
-          </div>
-
-          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">State</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{busy ? "Busy" : "Idle"}</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Risk</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">High</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Route</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{mode === "playground" ? "Interactive" : "Docs"}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-3">
-          <Button onClick={() => setOpen(true)}>Open destructive confirm</Button>
-          <Button variant="outline" onClick={() => setReadonlyOpen(true)}>Open save confirm</Button>
-          <Badge variant="outline">{busy ? "Waiting for confirm" : "Ready"}</Badge>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Keep the action label outcome-specific.",
-            "Do not use confirm dialog for long forms or multi-step review.",
-            "Mutation state should stay controlled from the page.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <ConfirmDialog
-        open={open}
-        onOpenChange={setOpen}
-        title="Delete resource?"
-        description="You are about to remove a production resource. This action is irreversible."
-        confirmText="Delete"
-        confirmVariant="destructive"
-        isLoading={busy}
-        onCancel={() => setOpen(false)}
-        onConfirm={handleConfirm}
-      />
-
-      <ConfirmDialog
-        open={readonlyOpen}
-        onOpenChange={setReadonlyOpen}
-        title="Save profile changes"
-        description="Keep existing values if this is a draft state."
-        confirmText="Save changes"
-        onCancel={() => setReadonlyOpen(false)}
-        onConfirm={() => setReadonlyOpen(false)}
-      />
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/copy-button/index.ts

@@ -1,2 +0,0 @@
-export { copyButtonMock } from "./mock"
-export { CopyButtonShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/copy-button/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const copyButtonMock: ComponentDemoMock = {
-  code: `import { CopyButton } from "tembro"
-
-export function Example() {
-  return (
-    <CopyButton
-      value="sk_live_demo_123"
-      copyLabel="Copy token"
-      copiedLabel="Copied"
-      variant="outline"
-      size="sm"
-    />
-  )
-}`,
-  cliCommand: "npx tembro add copy-button",
-  highlights: [
-    "Built-in copied feedback state",
-    "Works with the exported Button API surface",
-    "Useful for tokens, links, invite codes, and IDs",
-  ],
-  scenarios: [
-    { title: "Token copy", description: "Copy secret-like values without opening a secondary modal." },
-    { title: "Share link", description: "Inline copy action beside invite or embed links." },
-    { title: "Row action", description: "Small copy affordance inside a dense operational table." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/copy-button/showcase.tsx

@@ -1,62 +0,0 @@
-import * as React from "react"
-
-import { Badge, CopyButton, Input } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function CopyButtonShowcase() {
-  const [token, setToken] = React.useState("sk_live_workspace_28A91X")
-  const [copiedValue, setCopiedValue] = React.useState("")
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed action</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CopyButton handles inline copy feedback cleanly</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          It should replace one-off clipboard wrappers in tokens, invite links, integration keys, and compact table rows.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">API token row</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              A copy action should sit directly beside the value it belongs to and confirm success immediately.
-            </p>
-            <div className="mt-5 flex flex-col gap-3 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:flex-row sm:items-center">
-              <Input value={token} onValueChange={setToken} className="flex-1" />
-              <CopyButton
-                value={token}
-                variant="outline"
-                copyLabel="Copy token"
-                copiedLabel="Copied"
-                onCopied={setCopiedValue}
-              />
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="text-sm font-semibold aui-text-strong">Last copied value</p>
-                <p className="mt-1 text-xs aui-text-muted">The component exposes hooks so products can log or toast on success.</p>
-              </div>
-              <Badge variant={copiedValue ? "secondary" : "outline"}>{copiedValue ? "Copied" : "Idle"}</Badge>
-            </div>
-            <p className="mt-4 break-all text-sm leading-6 aui-text-muted">{copiedValue || "No value copied yet."}</p>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap items-center gap-3">
-          <CopyButton value="INV-2026-00482" size="sm" variant="outline" copyLabel="Copy invoice id" />
-          <CopyButton value="https://tembro.dev/invite/team-ops" variant="secondary" copyLabel="Copy invite link" />
-          <CopyButton value="workspace_admin" variant="ghost" copyLabel="Copy role" />
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/data-state/index.ts

@@ -1,2 +0,0 @@
-export { dataStateMock } from "./mock"
-export { DataStateShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/data-state/mock.ts

@@ -1,27 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dataStateMock: ComponentDemoMock = {
-  code: `import { DataState } from "tembro"
-
-export function Example() {
-  return (
-    <DataState
-      status="error"
-      title="Unable to load rows"
-      description="Try again after refreshing the request."
-      onRetry={() => {}}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add data-state",
-  highlights: [
-    "Idle, loading, empty, error and success state surface",
-    "Optional retry action and custom content area",
-    "Useful for panels or data-heavy cards that need clearer fallback than a spinner alone",
-  ],
-  scenarios: [
-    { title: "Error panel", description: "Show failed request recovery without replacing the whole page." },
-    { title: "Empty data", description: "Clarify that the query worked but returned nothing." },
-    { title: "Loading panel", description: "Reserve the panel shell while async work completes." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/data-state/showcase.tsx

@@ -1,53 +0,0 @@
-import * as React from "react"
-
-import { Button, DataState } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function DataStateShowcase() {
-  const [status, setStatus] = React.useState<"loading" | "empty" | "error" | "success">("loading")
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">DataState is the panel-level fallback surface</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it when a card or module needs explicit state handling beyond a raw spinner or empty paragraph.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-2">
-          {(["loading", "empty", "error", "success"] as const).map((item) => (
-            <Button key={item} size="sm" variant={status === item ? "secondary" : "outline"} onClick={() => setStatus(item)}>
-              {item}
-            </Button>
-          ))}
-        </div>
-
-        <div className="mt-5">
-          <DataState
-            status={status}
-            title={
-              status === "success"
-                ? "Data ready"
-                : status === "error"
-                  ? "Unable to load metrics"
-                  : undefined
-            }
-            description={
-              status === "success"
-                ? "The request completed and the panel can continue rendering detail content."
-                : status === "error"
-                  ? "The upstream request failed. Retry the panel request before leaving the route."
-                  : undefined
-            }
-            onRetry={status === "error" ? () => setStatus("loading") : undefined}
-            actions={status === "success" ? <Button size="sm" variant="outline">Open details</Button> : undefined}
-          />
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/data-table/data.ts

@@ -1,66 +0,0 @@
-import type { DataTableDemoPreset, DataTableDemoRow, DataTableDemoToolbarAction } from "./types"
-
-const customers = ["Acme Inc.", "Larana", "ShipFast", "Toolpad", "Pixels UI", "Northstar"] as const
-const owners = ["Azamat", "Malika", "Sardor", "Nodira", "Asadbek", "Kamola"] as const
-const channels = ["Direct", "Partner", "Direct", "Marketplace", "Marketplace", "Direct"] as const
-const statuses = ["Paid", "Review", "Draft", "Paid", "Overdue", "Paid"] as const
-const amounts = ["$2,400", "$1,280", "$980", "$4,120", "$860", "$3,620"] as const
-const amountValues = [2400, 1280, 980, 4120, 860, 3620] as const
-const updatedLabels = ["2h ago", "4h ago", "Today", "1d ago", "1d ago", "2d ago"] as const
-const stocks = [48, 16, 8, 63, 4, 28] as const
-const items = [12, 5, 3, 18, 2, 9] as const
-const trends = ["up", "steady", "down", "up", "down", "up"] as const
-
-export const dataTableDemoRows: DataTableDemoRow[] = customers.map((customer, index) => ({
-  invoice: `INV-00${index + 1}`,
-  order: `#448${index + 2}`,
-  customer,
-  owner: owners[index],
-  channel: channels[index],
-  status: statuses[index],
-  stock: stocks[index],
-  items: items[index],
-  amount: amounts[index],
-  amountValue: amountValues[index],
-  trend: trends[index],
-  updatedAt: updatedLabels[index],
-}))
-
-export function buildDataTableDemoRows(rowCount: number): DataTableDemoRow[] {
-  const safeRowCount = Math.max(1, Math.min(120, Math.floor(rowCount)))
-
-  return Array.from({ length: safeRowCount }, (_, index) => {
-    const base = dataTableDemoRows[index % dataTableDemoRows.length]
-    const cycle = Math.floor(index / dataTableDemoRows.length)
-    const invoiceNumber = String(index + 1).padStart(3, "0")
-    const orderNumber = 4482 + index
-    const amountValue = base.amountValue + cycle * 175
-    const amount = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      maximumFractionDigits: 0,
-    }).format(amountValue)
-
-    return {
-      ...base,
-      invoice: `INV-${invoiceNumber}`,
-      order: `#${orderNumber}`,
-      amount,
-      amountValue,
-      stock: base.stock + cycle * 2,
-      items: base.items + (index % 3 === 0 ? cycle : 0),
-      updatedAt: cycle === 0 ? base.updatedAt : `${cycle + 1}d ago`,
-    }
-  })
-}
-
-export const dataTableToolbarActions: DataTableDemoToolbarAction[] = ["Export CSV", "Sync"].map((label) => ({
-  label,
-  variant: label === "Export CSV" ? "default" : "outline",
-}))
-
-export const dataTableDemoPresets: DataTableDemoPreset[] = [
-  { value: "all", label: "All invoices", description: "All rows." },
-  { value: "finance", label: "Finance review", description: "Paid + review." },
-  { value: "at-risk", label: "At risk", description: "Draft + overdue." },
-]

package/packages/cli/vendor/src/showcase/premium/data-table/index.ts

@@ -1,4 +0,0 @@
-export { DataTableShowcase } from "./showcase"
-export { dataTableMock } from "./mock"
-export { dataTableDemoRows, dataTableToolbarActions } from "./data"
-export type { DataTableDemoRow, DataTableDemoToolbarAction } from "./types"

package/packages/cli/vendor/src/showcase/premium/data-table/mock.ts

@@ -1,40 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dataTableMock: ComponentDemoMock = {
-  code: `import { DataTable } from "tembro"
-
-export function Example() {
-  return (
-    <DataTable
-      columns={columns}
-      data={rows}
-      title="Customers"
-      description="Search, filter, select, and act on operational rows."
-      search={{ value: query, onValueChange: setQuery, placeholder: "Search rows..." }}
-      filters={<StatusFilter value={status} onValueChange={setStatus} />}
-      toolbarActions={<ExportButton rows={rows} />}
-      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}
-      rowSelection={rowSelection}
-      onRowSelectionChange={setRowSelection}
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}
-      density="comfortable"
-      striped
-      bordered
-      stickyHeader
-      virtualization={{ height: 480, estimateRowHeight: 52 }}
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-    />
-  )
-}`,
-  highlights: ["Toolbar actions", "Bulk actions", "Row click", "Visibility menu", "Density", "Virtualized rows", "Preset-driven views", "Mobile strategy", "Pagination"],
-  scenarios: [
-    { title: "Finance operations", description: "Filter, sort and paginate transactional rows with export-ready actions." },
-    { title: "Mobile fallback", description: "Collapse rows into cards while preserving click and selection behaviors." },
-    { title: "Preset views", description: "Switch between all rows, finance-only and at-risk tables without rebuilding columns." },
-    { title: "Bulk handling", description: "Run row group actions with selection state and clear behavior." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/data-table/showcase.tsx

@@ -1,205 +0,0 @@
-import * as React from "react"
-import type { ColumnDef } from "@tanstack/react-table"
-
-import {
-  Badge,
-  Button,
-  DataTable,
-  Select,
-} from "@/index"
-import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
-import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
-import { DataTableSortableHeader } from "@/components/data-table/data-table-sortable-header"
-import { createDataTableSelectColumn } from "@/components/data-table/data-table-select-column"
-
-type DataTableDemoRow = {
-  invoice: string
-  customer: string
-  owner: string
-  amount: string
-  status: "Paid" | "Review" | "Draft"
-  updatedAt: string
-}
-
-const rows: DataTableDemoRow[] = [
-  { invoice: "INV-4821", customer: "Acme Studio", owner: "Azamat", amount: "$12,420", status: "Paid", updatedAt: "2m ago" },
-  { invoice: "INV-4822", customer: "Northwind", owner: "Madina", amount: "$8,120", status: "Review", updatedAt: "10m ago" },
-  { invoice: "INV-4823", customer: "Globex", owner: "Jasur", amount: "$4,880", status: "Draft", updatedAt: "22m ago" },
-  { invoice: "INV-4824", customer: "Pixel Union", owner: "Azamat", amount: "$17,300", status: "Paid", updatedAt: "44m ago" },
-  { invoice: "INV-4825", customer: "Meridian Labs", owner: "Madina", amount: "$2,180", status: "Review", updatedAt: "1h ago" },
-  { invoice: "INV-4826", customer: "Orbit Cloud", owner: "Jasur", amount: "$9,040", status: "Draft", updatedAt: "3h ago" },
-]
-
-export function DataTableShowcase() {
-  const [search, setSearch] = React.useState("")
-  const [statusFilter, setStatusFilter] = React.useState("all")
-  const [ownerFilter, setOwnerFilter] = React.useState("all")
-  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({})
-
-  const filteredRows = rows.filter((row) => {
-    const normalized = search.trim().toLowerCase()
-    const matchesSearch = !normalized || `${row.invoice} ${row.customer} ${row.owner} ${row.amount}`.toLowerCase().includes(normalized)
-    const matchesStatus = statusFilter === "all" || row.status === statusFilter
-    const matchesOwner = ownerFilter === "all" || row.owner === ownerFilter
-    return matchesSearch && matchesStatus && matchesOwner
-  })
-  const selectedCount = Object.values(rowSelection).filter(Boolean).length
-
-  const columns = React.useMemo<ColumnDef<DataTableDemoRow>[]>(
-    () => [
-      createDataTableSelectColumn<DataTableDemoRow>(),
-      {
-        accessorKey: "invoice",
-        header: ({ column }) => <DataTableSortableHeader column={column}>Invoice</DataTableSortableHeader>,
-      },
-      {
-        accessorKey: "customer",
-        header: ({ column }) => <DataTableSortableHeader column={column}>Customer</DataTableSortableHeader>,
-      },
-      {
-        accessorKey: "status",
-        header: "Status",
-        cell: ({ row }) => (
-          <Badge variant={row.original.status === "Paid" ? "secondary" : row.original.status === "Review" ? "outline" : "destructive"}>
-            {row.original.status}
-          </Badge>
-        ),
-      },
-      {
-        accessorKey: "amount",
-        header: ({ column }) => <DataTableSortableHeader column={column}>Amount</DataTableSortableHeader>,
-      },
-      {
-        accessorKey: "updatedAt",
-        header: "Updated",
-      },
-      createDataTableActionsColumn<DataTableDemoRow>({
-        getActions: () => [
-          { key: "open", label: "Open detail", onSelect: () => undefined },
-          { key: "archive", label: "Archive", destructive: true, onSelect: () => undefined },
-        ],
-      }),
-    ],
-    []
-  )
-
-  return (
-    <div className="space-y-5">
-      <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Operational table</p>
-          <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Search, selection and actions in one table</h3>
-        </div>
-        <div className="grid gap-3 sm:grid-cols-3">
-          <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-            <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Rows</p>
-            <p className="mt-2 text-lg font-semibold aui-text-strong">{filteredRows.length}</p>
-          </div>
-          <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-            <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Selected</p>
-            <p className="mt-2 text-lg font-semibold aui-text-strong">{selectedCount}</p>
-          </div>
-          <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-            <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">State</p>
-            <p className="mt-2 text-lg font-semibold aui-text-strong">{search || statusFilter !== "all" || ownerFilter !== "all" ? "Filtered" : "Live"}</p>
-          </div>
-        </div>
-      </div>
-
-      <DataTable
-        columns={columns}
-        data={filteredRows}
-        getRowId={(row) => row.invoice}
-        enableRowSelection
-        rowSelection={rowSelection}
-        title="Invoices"
-        description="Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface."
-        features={{
-          search: true,
-          columnVisibility: true,
-          bulkActions: true,
-        }}
-        search={{
-          value: search,
-          onValueChange: setSearch,
-          placeholder: "Search invoice, customer...",
-          clearable: true,
-        }}
-        filters={
-          <>
-            <Select
-              value={statusFilter}
-              onValueChange={(value) => setStatusFilter(value ?? "all")}
-              options={[
-                { value: "all", label: "All statuses" },
-                { value: "Paid", label: "Paid" },
-                { value: "Review", label: "Review" },
-                { value: "Draft", label: "Draft" },
-              ]}
-              triggerClassName="min-w-40"
-            />
-            <Select
-              value={ownerFilter}
-              onValueChange={(value) => setOwnerFilter(value ?? "all")}
-              options={[
-                { value: "all", label: "All owners" },
-                { value: "Azamat", label: "Azamat" },
-                { value: "Madina", label: "Madina" },
-                { value: "Jasur", label: "Jasur" },
-              ]}
-              triggerClassName="min-w-36"
-            />
-          </>
-        }
-        summary={
-          <>
-            <Badge variant="outline">{filteredRows.length} rows</Badge>
-            <Badge variant="outline">{selectedCount} selected</Badge>
-            <Badge variant="outline">
-              {search || statusFilter !== "all" || ownerFilter !== "all" ? "Filtered view" : "Live view"}
-            </Badge>
-          </>
-        }
-        toolbarActions={({ table }) => (
-          <div className="flex items-center gap-2">
-            <DataTableColumnVisibilityMenu table={table} />
-            <Button size="sm" variant="outline">Export</Button>
-          </div>
-        )}
-        bulkActions={[
-          { key: "export", label: "Export selected", onSelect: () => undefined },
-          { key: "archive", label: "Archive selected", destructive: true, onSelect: () => undefined },
-        ]}
-        onRowSelectionChange={(selection) => {
-          setRowSelection((current) => (typeof selection === "function" ? selection(current) : selection))
-        }}
-        onRowClick={() => undefined}
-        renderMobileCard={(row) => (
-          <div className="rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <p className="text-base font-semibold aui-text-strong">{row.original.invoice}</p>
-                <p className="mt-1 text-sm aui-text-muted">{row.original.customer}</p>
-              </div>
-              <Badge variant="outline">{row.original.status}</Badge>
-            </div>
-          </div>
-        )}
-        pagination={{
-          pageIndex: 0,
-          pageSize: 5,
-          rowCount: filteredRows.length,
-          pageCount: Math.max(Math.ceil(filteredRows.length / 5), 1),
-          pageSizeOptions: [5, 10],
-          onPageChange: () => undefined,
-          onPageSizeChange: () => undefined,
-        }}
-      />
-
-      <div className="flex flex-wrap gap-3">
-        <Button size="sm">Export</Button>
-        <Button size="sm" variant="outline">Refresh</Button>
-      </div>
-    </div>
-  )
-}