A frontend template for service businesses that share work with clients: agencies, design studios, consultancies, freelancers, and software teams. It pairs a business workspace with a client portal over one set of records, built around a single question: whose move is it?

What makes it different

Most portal templates show status labels and KPI cards. Portiva tracks custody: every deliverable, decision, question, document, and invoice is either in the studio's court or the client's court, with aging for anything that waits too long. Both sides read the same records, filtered by role, and the team can preview any project exactly as the client sees it.

Business workspace

• Desk: your court vs. waiting on clients, aging, money brief, a three-week dates strip, recent movement
• Clients: list with status filter, and a client profile with projects, people, billing, and notes
• Work: projects as custody strips, plus the Project Room, a two-sided timeline of handoffs with item actions, a project thread with internal notes, files with shared/internal visibility, and a client-view preview
• Ledger: invoice register and invoice document with line items, tax, terms, send, record payment, and a print layout
• Search: Ctrl/⌘ K across clients, projects, items, invoices, and contacts
• Forms for clients, contacts, projects, items, and invoices, validated with Zod

Client portal

• Today: what needs the client now and what the studio is working on
• Projects and the Project Room in a locked client lens
• Review: full-screen deliverable review with version history, compare, and approve / request changes with notes
• Messages, Files (shared only), Billing (hidden from reviewer contacts), and Account

What's included

• 16 screens (7 workspace, 9 client portal) plus a not-found page
• Light and dark themes, designed separately; reduced-motion support; layouts checked at 390, 768, and 1440 px
• Deterministic demo data with dates relative to today, saved in the browser, with one-click reset
• Central config for brand name, studio name, renameable nouns, and navigation; CSS design tokens for colors and type
• Unit tests (Vitest) and browser tests with axe accessibility checks (Playwright)
• Documentation: installation, project structure, customization, data and backend integration, third-party notices, changelog

Technology

Next.js 16.4 (App Router), React 19.3, TypeScript (strict), Tailwind CSS 4, Radix UI primitives in the shadcn/ui pattern, Lucide icons, Motion for React, Zustand, and Zod. Requires Node.js 24 and pnpm 12.7.

Please note

• Frontend only. There is no backend, real sign-in, server-side permission checks, email, file storage, or payment processing. Role filtering runs in the browser for the demo; a production app must enforce it on a server. The documentation lists what a backend needs to provide.
• Changes are saved in each visitor's browser (localStorage) and are not shared between people or devices.
• The client portal has a labeled Demo bar for opening it as any client contact. It stands in for sign-in in the preview.
• Files are records (name, version, visibility). There is no real upload or download.
• Fonts (Young Serif, Onest, JetBrains Mono, all under the SIL Open Font License) are downloaded from Google Fonts at build time and self-hosted, so the first build needs internet access.
• Tested in Chromium (desktop and mobile emulation).
• All companies, people, emails, and numbers in the demo are fictional, and the live preview shows the same content as the download.