CommandOps — AI Agent & SaaS Operations Dashboard

Features Overview

CommandOps deliberately balances two things: a foundation of common, must-have SaaS admin modules, and a set of signature modules built around AI agent oversight that you won't find in a generic admin template.

Dashboards (8 variants)

Command Center · SaaS Overview · Support Operations · Billing Operations · AI Agent Operations · Workflow Operations · Security Overview · Analytics Overview — each with its own KPI cards, charts, and widgets tailored to that operational view.

Customers / Tenants

Customer list with health score, churn risk, MRR, and usage %; a tabbed detail page (Overview, Users, Billing, Usage, Support, AI Activity, Timeline, Files, Audit, Notes); AI-generated customer summaries and suggested next actions.

Support Desk

Ticket inbox with priority/status/assignee filters, SLA countdowns, an AI-suggested-reply panel with confidence scoring, internal notes, escalation flow, canned replies, and a support analytics view.

AI Agents Signature

A roster of named agents (Support, Billing, Onboarding, Refund, Churn Risk, Knowledge Base) each with performance, cost, conversation history, prompt versions, knowledge sources, and failure logs.

Human Approval Queue Signature

The control layer for AI autonomy: every risky agent-suggested action (refund, discount, plan downgrade, risky reply, data deletion) lands here with its risk level, AI reasoning, estimated impact, and an approve / reject / modify / escalate flow.

Workflow Automation Signature

A visual builder (trigger → condition → action → delay → approval → notification → AI agent task → webhook) with a template gallery, run history, and failed-run diagnostics.

Billing

Plans, subscriptions, invoices, payments, refunds, coupons, and a refund approval queue — with AI cost linked directly into customer billing and usage-based overage charges.

Usage Metering

API calls, AI tokens, storage, seats, workflow runs, and webhook deliveries tracked per customer against plan limits, with overage warnings and projected billing.

AI Cost & Risk Signature

Cost-today/cost-this-month by provider and by agent, token usage, failed AI calls, and a risk table logging every flagged response with severity, reviewer, and action taken.

Knowledge Base

Article list/editor with draft → review → published states, category management, AI-training-source quality scoring, and search analytics.

Team & Roles, Security, Audit Logs

Role-based permission matrix, invitations and access requests; sessions, API keys, webhooks, 2FA, login history, and blocked IPs; a unified filterable audit timeline across users, agents, billing, approvals, and security events.

Authentication

Login, Register, Forgot/Reset Password, Email Verification, Two-Factor Authentication, Lock Screen — fully mocked so the demo runs with zero backend setup.

Requirements

CommandOps ships as source code — there is no purchase code or license activation step to run it locally.

Installation

Unzip the package and locate the Next.js project (inside main-files/ if you downloaded the full ThemeForest package). Then, from that project's root:

 Copynpm install

This installs every dependency listed in package.json — Next.js, React, Tailwind CSS, Radix UI, TanStack Query/Table, React Hook Form, Zod, Zustand, Recharts, and Tabler Icons.

Running the Project

Start the development server with Turbopack:

 Copynpm run dev

Visit http://localhost:3000 for the public marketing page, or go directly to /dashboard — every route in the template is directly browsable without signing in first.

If port 3000 is already in use, Next.js automatically picks the next free port and prints the URL in your terminal.

Build Commands

For a standard Node hosting environment (Vercel, a VPS, Docker):

 Copynpm run build
npm run start

For a static host (no Node runtime — e.g. an S3 bucket, GitHub Pages, or a plain Apache/Nginx server):

 Copynpm run build:static
# deploy the generated out/ folder

Folder Structure

The project follows a conventional Next.js App Router layout with a clear separation between primitives, wrapper components, and pages.

 Copyapp/
  (auth)/                  Centered auth layout — login, register, 2FA, etc.
  (dashboard)/              App shell layout — every module and dashboard
  globals.css               Tailwind + token imports, @theme extensions
  layout.tsx                Root layout — fonts, providers, metadata
  page.tsx                  Redirects to /dashboard
  not-found.tsx, error.tsx, loading.tsx
  maintenance/, coming-soon/, access-denied/, session-expired/

components/
  ui/                       shadcn primitives — internal only, never imported by pages
  buttons/                  Public Button API (wraps ui/button)
  forms/                    TextField, SelectField, CheckboxField, RadioField, SwitchField
  cards/                    Card + StatCard
  badges/                   StatusBadge, RiskBadge, TagChip
  tables/                   DataTable + toolbar/pagination/column-header
  charts/                   AreaChart, LineChart, BarChart, PieChart
  dashboards/               ChartCard, WidgetPanel, ActivityFeed, DashboardGrid
  layout/                   AppShell, sidebar, command bar/palette, workspace switcher, page header
  auth/                     Auth card/layout, OTP input, password strength
  states/                   EmptyState, ErrorState, loading skeletons
  usage/                    UsageBar (plan-limit progress)
  settings/                 SettingsNav
  showcase/                 ShowcaseSection (used only by /ui demo pages)

config/
  site.ts, navigation.ts, theme.ts, design.ts

data/                       Mock dataset per domain
lib/
  api/                      Mock REST-shaped functions — swap these for real calls
  auth/                     Mock session (localStorage + cookie)
  schemas/                  Zod schemas for auth forms
  format.ts, constants.ts, utils.ts, query-client.ts

hooks/
  queries/                  One file per domain, wrapping lib/api/* in TanStack Query
  use-debounce.ts, use-media-query.ts, use-mobile.ts

stores/                     Zustand stores — sidebar, command palette, inspector, layout, workspace
types/                      Shared TypeScript types, one file per domain
styles/                     tokens.css, font.css, motion.css
locales/                    Translation JSON files, one per language
docs/                       Internal planning docs (design spec, phase specs)
documentation/              This folder — buyer-facing documentation

Conventions

• Pages import wrappers, not primitives. @/components/buttons, @/components/forms, @/components/cards — never @/components/ui/* directly from a page.
• One mock data file per domain in data/, consumed only through lib/api/*.ts, consumed only through hooks/queries/*.ts.
• Route groups (auth) and (dashboard) each have their own layout.tsx and don't share a sidebar/shell.

Project Structure

CommandOps uses a strict, one-directional data flow so that connecting a real backend later only requires replacing a single layer.

Route groups

CommandOps uses the Next.js App Router with two route groups:

• (auth) — centered card layout, no sidebar. Login, register, password reset, email verification, two-factor, lock screen.
• (dashboard) — the app shell (floating sidebar + command bar). Every product module and dashboard lives here.

Auth guard

This template intentionally does not force a login to view any page — every route is directly browsable so buyers can explore the whole UI without signing in first. Login still works end-to-end for demo purposes: a successful (mock) login in lib/auth/mock-session.ts sets a commandops_session cookie, and logging out clears it.

Adding a new page

1. 1Create app/(dashboard)/your-module/page.tsx.
2. 2Add mock data to data/your-module.ts + a type in types/your-module.ts.
3. 3Add lib/api/your-module.ts (mirrors REST: list/getById, simulateDelay).
4. 4Add hooks/queries/use-your-module.ts wrapping the API in useQuery.
5. 5Build the page with PageHeader, PageContainer, and DataTable or the dashboard widgets — not raw components/ui/*.
6. 6If it should appear in the sidebar, add it to config/navigation.ts.

Layout System

Every dashboard page follows the same composition so the product feels like one cohesive system rather than a collection of unrelated screens.

 Copy┌─────────────────────────────────────────────────────────┐
│  Workspace switcher, search, user, notifications        │
├──────────┬──────────────────────────────────┬───────────┤
│ Sidebar  │  Main content                    │ Inspector │
│ (rail)   │  (page header + filters + data)  │ (optional)│
│          │                                  │           │
└──────────┴──────────────────────────────────┴───────────┘

Signature floating sidebar

The sidebar is intentionally always dark, floating as an inset, rounded card with its own shadow — this is the visual anchor of the product, similar to Linear/Notion-style "workspace rail" treatments. It renders identically whether the app is in light or dark mode, powered by --sidebar-* tokens that hold the same values in both themes.

Workspace switcher

The command bar opens with a WorkspaceSwitcher — a dropdown showing the active workspace (colored initials avatar + name), a short list of demo workspaces backed by stores/workspace-store.ts, and an "Add workspace" action. Switching is instant (client-side state, persisted to localStorage); adding a workspace navigates to a full /workspaces/new page rather than a modal. Swap the demo dataset in the store for real tenant data when you connect a backend.

Page header pattern

Every dashboard page includes an optional overline, a page title (h1), an optional one-line muted description, and right-aligned primary/secondary actions.

Filters bar

Lives below the header, above the data. Uses SelectField, a search TextField, and date ranges — never raw <input> elements. Wraps on mobile, horizontal on md+.

Loading, empty & error states

Every data view in the template implements all three:

Layout variants

Default sidebar · Compact sidebar · Icon-only sidebar · Top navigation · Two-column command layout · Right inspector panel layout.

Responsive breakpoints

Components

All public components are re-exported from a folder index.ts, so import from the folder, not the file. A live, interactive version of every component below renders at /ui in the running app.

 Copyimport { Button } from "@/components/buttons"
import { TextField, SelectField } from "@/components/forms"
import { Card, StatCard } from "@/components/cards"

Buttons

Button wraps components/ui/button.tsx and adds two CommandOps-only variants plus a loading state.

• Variants: default, secondary, outline, ghost, destructive, link, success, warning
• Sizes: xs (28px), sm (32px), default (40px), lg (48px), plus icon / icon-xs / icon-sm / icon-lg

 Copy<Button variant="success" loading={isSaving}>Approve</Button>

Forms

Each field composes Field + FieldLabel + a control + FieldDescription/FieldError.

With React Hook Form: register() works for TextField/TextareaField, but Radix-backed fields need Controller:

 Copy<Controller
  control={control}
  name="rememberMe"
  render={({ field }) => (
    <CheckboxField
      label="Remember me"
      checked={!!field.value}
      onCheckedChange={field.onChange}
    />
  )}
/>

Cards

• Card — variants default, interactive (hover lift + focus ring), outline (border emphasis, no shadow)
• StatCard — label, value, delta?, deltaTone?, icon?
• Re-exports CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter

Badges

• StatusBadge — maps a status string to a tone via lib/constants.ts's statusBadgeMap
• RiskBadge — level: "low" | "medium" | "high"
• TagChip — free-form category pill; pass a tone or let chipToneForLabel() pick a deterministic color

Tables

DataTable wraps TanStack Table with sorting, pagination, and built-in loading/empty/error states:

 Copyconst columns = useMemo<ColumnDef<Customer, unknown>[]>(() => [...], [])

<DataTableToolbar searchValue={search} onSearchChange={setSearch} />
<DataTable
  columns={columns}
  data={data}
  isLoading={isLoading}
  isError={isError}
  onRetry={refetch}
  onRowClick={(row) => router.push(`/customers/${row.id}`)}
/>

Dashboard widgets

ChartCard (title + chart), WidgetPanel (title + list + "View all" link + empty state), ActivityFeed, DashboardGrid (responsive grid with entrance stagger animation), DateRangeSelect.

Layout components

PageHeader, PageContainer, FilterBar, DetailTabs, DetailSidebar, plus the shell pieces (AppShell, SidebarNav, CommandBar, CommandPalette, WorkspaceSwitcher, BreadcrumbNav, ThemeToggle, UserMenu, InspectorPanel).

States

EmptyState (icon + title + description + action), ErrorState (message + retry), TableSkeleton / CardGridSkeleton.

Pages & Modules

107 routes across 15 functional modules and 8 dashboard variants, plus authentication and utility pages.

Authentication & utility pages

Login, Register, Forgot/Reset Password, Verify Email, Two-Factor, Lock Screen · 404, 500, Maintenance, Coming Soon, Access Denied, Session Expired · Create Workspace (/workspaces/new, opened from the header workspace switcher — no dedicated workspace list page).

UI component showcase

/ui and its 9 subpages render every wrapper component with all of its variants — useful when customizing the template or checking a component before reusing it. Linked from the bottom of the Settings sub-nav.

Theme Customization

All visual tokens live in three files, imported by app/globals.css in this order: styles/tokens.css → styles/font.css → styles/motion.css.

Color tokens

Every color is OKLCH, defined once in :root (light) and once in .dark. Components reference the CSS variable through a Tailwind utility (bg-primary, text-muted-foreground, etc.) — never a hardcoded hex value.

Rebrand the primary color

The primary color is a warm amber/orange — oklch(0.68 0.19 41) in light mode, oklch(0.72 0.19 41) in dark mode. To rebrand, edit both blocks in styles/tokens.css:

 Copy:root {
  --primary: oklch(0.68 0.19 41);
  --primary-foreground: oklch(0.99 0 0);
  --shadow-primary: 0 10px 24px -8px oklch(0.68 0.19 41 / 0.4),
                    0 2px 6px -2px oklch(0.68 0.19 41 / 0.25);
}
.dark {
  --primary: oklch(0.72 0.19 41);
  --primary-foreground: oklch(0.15 0.02 41);
}

Every button, focus ring, chart accent, and active nav state follows automatically — no need to hunt for hex codes across components.

Radius

Base token: --radius: 0.75rem. Everything else (--radius-sm … --radius-2xl) is computed from it in the @theme inline block, so changing one number rescales the whole app. Buttons/inputs/selects use rounded-lg deliberately (not rounded-xl) so controls don't read as pill-shaped at their height — only badges, chips, and avatars use rounded-full.

Dark mode

next-themes manages the .dark class on <html>, with system as the default. Toggle via the dropdown in the command bar or /settings/theme.

Assets

All static assets live in public/.

Replace the logo files with your own artwork at the same paths and dimensions to rebrand without touching any component code — every reference resolves through config/site.ts.

Icons

CommandOps uses @tabler/icons-react exclusively — no other icon library is mixed in, for visual consistency across the whole app.

Icon + label buttons place the icon before the label with a gap-1.5. Use the default Tabler stroke consistently — don't mix filled variants randomly.

 Copyimport { IconRobot } from "@tabler/icons-react"

<IconRobot className="size-4" />

Fonts

Two font families, loaded via next/font/google in app/layout.tsx:

Do not introduce a third sans-serif family. Monospace (IBM Plex Mono or a system mono) is optional, reserved for code, IDs, and numeric columns only. The full type scale (.text-display, .text-h1….text-h4, .text-body*, .text-caption, .text-label, .text-overline) is defined in styles/font.css and demoed at /ui/typography.

Base body size is 15px. Minimum readable UI text size is 13px. To swap either font, change the import in app/layout.tsx — no component code needs to change.

Charts

AreaChart, LineChart, BarChart, and PieChart are thin Recharts wrappers in @/components/charts that read the --chart-1…--chart-5 tokens for series color and use a shared themed tooltip.

 Copy<AreaChart
  data={revenueTrend}
  series={[{ key: "revenue", label: "Revenue" }]}
/>

data accepts any plain object array; series maps { key, label?, color? } to the matching field. Because colors read CSS variables, charts stay legible in both light and dark mode automatically, with no per-chart color logic.

30+ chart instances are used across the 8 dashboards and 6 analytics deep-dive pages — revenue trend, ticket volume, AI usage, customer growth, churn risk, agent performance, workflow success rate, cost per resolution, and more.

Localization

The translation layer is a plain t(key) function reading JSON files in locales/ — no heavy i18n framework dependency.

All 11 languages are wired into the language switcher and load correctly, with English used as a safe fallback for any missing key. The 3 placeholder languages have the switcher, flag, and (for Urdu) live RTL mirroring already working — completing them is a matter of filling in one JSON file, no code changes required.

RTL support

Layout direction (dir="rtl"/"ltr") switches live, driven by the selected language via Radix's DirectionProvider. Selecting Arabic or Urdu mirrors the whole app layout automatically, not just the text.

Adding a new language

1. 1Add a JSON file to locales/ (copy en.json as a starting point).
2. 2Register the language in stores/language-store.ts.
3. 3No framework migration or component changes required.

Performance

• npm run build runs a full TypeScript check before emitting output — catch type errors before deploying, not after.
• Mock API calls simulate real network latency (simulateDelay) so loading states are exercised realistically during development.
• Charts and heavy modules can be lazy-loaded with next/dynamic if you add more visualizations.
• No unused, oversized dependencies — one icon library, one chart library, one table library.
• Zero TODO/FIXME/"coming soon" placeholders in application code.
• npm run build:static is available for hosting on a CDN or static file server with no Node runtime.

Browser Compatibility

CommandOps targets modern, evergreen browsers using current CSS (OKLCH colors, CSS custom properties, CSS Grid/Flexbox) and current JavaScript.

Fully responsive from small mobile viewports through ultrawide desktop monitors — verified at the sm/md/lg/xl/2xl breakpoints described in Layout System.

Updating the Template

When a new version is released on ThemeForest, follow these steps to update safely without losing your customizations:

1. 1Read the Changelog for the new version before updating — note any breaking changes.
2. 2Back up your current project, or better, commit your work to a Git branch so you can diff against the new release.
3. 3Download the new package and diff it against your working copy — focus on components/ui/, styles/, and lib/, which are the most likely to receive fixes.
4. 4Re-apply your token overrides (styles/tokens.css) and any custom pages/components you added — these live outside the core template and are unaffected by an update.
5. 5Run npm install again to pick up any dependency version bumps, then npm run build to confirm everything still type-checks.

FAQ

Troubleshooting

Support Policy

Support is provided through the item's Comments/Support tab on ThemeForest, in line with Envato's standard support terms.

Before opening a support request:

1. 1Search this documentation and the FAQ/Troubleshooting sections.
2. 2Confirm you're on the required Node.js version and a clean npm install.
3. 3Include your exact steps to reproduce, the error message, your Node/npm version, and browser/OS when you reach out.

Credits & Third-Party Libraries

CommandOps is built on the following open-source projects. None require attribution in your final product, but they're listed here for your own license audit.

Changelog