# AdminWorkspaces > The tenants and plans console for an admin area. A workspaces table with seat usage, change plan, suspend and reactivate, and a plan catalogue with an edit dialog. Source: https://docs.nasaqui.com/components/admin-tenants ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/admin-tenants.json ``` Two screens for the tenant side of a back office. `AdminWorkspaces` lists every workspace; `AdminPlans` shows the plans and lets an admin edit them. You own the data; actions are async callbacks that return nothing or `{ error }`. ## When to use - Admins managing workspaces, their plans and seat limits. ## When not to use - A customer choosing their own plan: use `PlanGrid` with `PlanCard`. ## Import ```tsx import { AdminWorkspaces, AdminPlans } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { AdminPlans, AdminWorkspaces } from "@fadymondy/nasaq/web"; export function Tenants({ workspaces, plans }) { return ( <> { await api.setPlan(w.id, planId); }} onSetSuspended={async (w, suspended) => { await api.suspend(w.id, suspended); }} /> { await api.savePlan(plan); }} /> ); } ``` ## Anatomy ``` AdminWorkspaces data-slot="admin-workspaces": stat tiles, notice, toolbar (search, plan and status facets), DataTable, dialogs AdminPlans data-slot="admin-plans": New plan button, PlanGrid of PlanCard, PlanDialog PlanDialog name, description, price, seat and storage limits, visibility, features (Repeater) ``` ## API ### AdminWorkspaces | Prop | Type | Default | Description | | --- | --- | --- | --- | | `workspaces` | `AdminWorkspace[]` | required | `{ id, name, slug, owner, planId, status, seatsUsed, createdAt, trialEndsAt? }`. Status: `active`, `trial`, `suspended`. | | `plans` | `AdminPlan[]` | required | `{ id, name, description?, priceMonthly, currency?, seats, storageGb, features, visible, subscribers?, featured? }`. `null` limits mean unlimited. | | `onChangePlan` | `(workspace, planId) => result` | none | Adds Change plan. A warning shows when seats exceed the new limit. | | `onSetSuspended` | `(workspace, suspended) => result` | none | Suspend asks first; reactivate is direct. | | `onOpen` | `(workspace) => void` | none | | | `loading`, `error`, `onRetry`, `pageSize`, `hideStats`, `labels` | | | | ### AdminPlans and PlanDialog | Prop | Type | Default | Description | | --- | --- | --- | --- | | `plans` | `AdminPlan[]` | required | | | `onSavePlan` | `(plan) => result` | none | Enables New plan and Edit. `plan.id` is undefined for a new one. Return `{ error }` to keep the dialog open. | | `currency` | `string` | `"USD"` (`"SAR"` in Arabic) | For new plans. | ## Examples - **Read-only plans**: omit `onSavePlan`. - **Unlimited**: leave seat or storage limits empty in the dialog; the plan gets `null`. ## Accessibility Dialogs trap focus and return it; errors use `role="alert"`; the notice is dismissable. Pass `labels` to translate. ## RTL & i18n Built-in English and Arabic. Slugs and emails are LTR isolates; prices and counts use the locale. ## Styling & tokens Uses `PlanCard`, `Price`, `Meter` and `Status`. Extend with `className`. ## Do / Don't - Do warn before a plan change that drops seats below use. - Do not delete plans that have subscribers; hide them. ## Related - [AdminArea](https://docs.nasaqui.com/components/admin-area) - [Repeater](https://docs.nasaqui.com/components/repeater) ## Lab https://docs.nasaqui.com/?path=/docs/components-admin-admin-tenants--docs ## Code ### React ```tsx import { AdminPlans, AdminWorkspaces } from "@fadymondy/nasaq/web"; export function Tenants({ workspaces, plans }) { return ( <> { await api.setPlan(w.id, planId); }} onSetSuspended={async (w, suspended) => { await api.suspend(w.id, suspended); }} /> { await api.savePlan(plan); }} /> ); } ``` ### shadcn ```tsx import { AdminPlans, AdminWorkspaces } from "@/components/ui/admin-tenants"; export function Tenants({ workspaces, plans }) { return ( <> { await api.setPlan(w.id, planId); }} onSetSuspended={async (w, suspended) => { await api.suspend(w.id, suspended); }} /> { await api.savePlan(plan); }} /> ); } ``` ### Vue ```vue ``` ### Blade ```blade @php $plans = [ ['id' => 'free', 'name' => 'Free', 'description' => 'For trying things out', 'priceMonthly' => 0, 'seats' => 3, 'storageGb' => 1, 'features' => ['Community support'], 'visible' => true, 'subscribers' => 14], ['id' => 'team', 'name' => 'Team', 'description' => 'For growing teams', 'priceMonthly' => 29, 'seats' => 15, 'storageGb' => 50, 'features' => ['Priority support', 'Audit log'], 'visible' => true, 'subscribers' => 6, 'featured' => true], ['id' => 'scale', 'name' => 'Scale', 'description' => 'No limits', 'priceMonthly' => 99, 'seats' => null, 'storageGb' => null, 'features' => ['SSO'], 'visible' => false, 'subscribers' => 1], ]; $workspaces = [ ['id' => 'w1', 'name' => 'Acme Co', 'slug' => 'acme', 'owner' => ['name' => 'Sara Alharbi', 'email' => 'sara@acme.test'], 'planId' => 'team', 'status' => 'active', 'seatsUsed' => 12, 'createdAt' => '2026-03-02'], ['id' => 'w2', 'name' => 'Globex', 'slug' => 'globex', 'owner' => ['name' => 'Omar Nasser', 'email' => 'omar@globex.test'], 'planId' => 'free', 'status' => 'trial', 'seatsUsed' => 3, 'createdAt' => '2026-09-20', 'trialEndsAt' => '2026-10-04'], ['id' => 'w3', 'name' => 'Initech', 'slug' => 'initech', 'owner' => ['name' => 'Lina Haddad', 'email' => 'lina@initech.test'], 'planId' => 'scale', 'status' => 'suspended', 'seatsUsed' => 40, 'createdAt' => '2026-01-11'], ]; @endphp
``` ### HTML + Alpine ```html
Workspaces
3
On trial
1
Suspended
1
Monthly revenue
$29
URL
Owner email
Seats
Actions

Free

For trying things out

Free

14 workspaces

  • Up to 3 seats
  • 1 GB storage
  • Community support

Team

For growing teams

$29 /mo

6 workspaces

  • Up to 15 seats
  • 50 GB storage
  • Priority support
  • Audit log
Hidden

Scale

No limits

$99 /mo

1 workspaces

  • Unlimited seats
  • Unlimited storage
  • SSO
```