LokaTech — Internal Operations Platform
A full-stack operations platform for professional digital services teams — unifying scoped pricing, collaborative client sign-off, billing, and technical documentation in a single Next.js monorepo.
The internal admin and ops platform is private. This case study documents the system I built; the public site is the marketing front.
Fragmented agency operations
- Inconsistent quoting: Every project type had different pricing rules; manual calculation led to under-pricing and rework.
- No audit trail: Scope changed mid-negotiation with no single source of truth for what changed or what the client agreed to.
- Slow sign-off: Proposals bounced over email and PDF with no structured feedback or formal baseline acceptance.
- Disconnected billing & docs: Invoices were typed from scratch; requirements and architecture lived in separate tools.
One system for pre-sale → billing
- Catalog + pricing engine: Master scope catalog and rules-based calculators with transparent step-by-step breakdowns.
- Collaborative scope review: Admins publish rounds; clients interact via magic links — ticks, comments, and baseline lock on accept.
- Project-first billing: Multi-line invoices, payment status, overdue detection, and branded PDF export per project.
- Command dashboard: Attention feed for open reviews, client feedback, and overdue invoices — admin, marketing, and portal in one repo.
Impact
Quoting
Manual per-type math and hand-copied catalog prices → transparent calculators and catalog-driven custom scope with floors and modifiers.
Scope & change control
Email and PDF loops with unclear diffs → review rounds with NEW/MODIFIED flags, client ticks, comments, and change-order audit history after baseline lock.
Billing
Ad-hoc line items and weak overdue visibility → project-first billing hub with status badges, filters, and branded invoice PDFs.
Client access & ops visibility
Screenshots or full account creation → typed magic links for scope review vs read-only docs; dashboard feed links directly to what needs action.
Dashboard & attention feed
Billing metrics — unpaid total, overdue count, MTD revenue, active projects — plus a needs-attention feed for unread client comments, open review rounds, and overdue invoices. Quick links jump straight to the project or invoice that needs action.
Pricing & project workspace
Each engagement gets a typed project (portfolio, landing page, corporate site, or custom system) with a rules-based pricing engine, live breakdown, scope builder, requirements notebook, and live UML editor — all in one workspace.
Collaborative scope review
Admins publish review rounds and generate secure magic links. Clients tick lines, leave structured comments, and formally accept a locked baseline — replacing email back-and-forth with an auditable negotiation workflow.
Billing & documents
Project-first billing hub with invoice CRUD, mark paid/unpaid, filters, and overdue detection. Branded PDF export for scope proposals, invoices, and baseline scope snapshots after client acceptance.
Engineering Spotlight
01. Server action architecture
Every mutation follows the same contract: Zod validation before Prisma, requireSession() on admin actions, standardized { success, data } | { success, error } returns, and revalidatePath() for immediate UI consistency — scaling across 8+ action modules without ad-hoc error handling.
02. Client portal security + PDF strategy
32-byte random tokens with SHA-256 hash at rest, separate link types and expiry per route, scoped to a single project. PDF generation runs client-side via @react-pdf/renderer to stay within Vercel serverless limits; Prisma Decimals serialize to plain numbers before crossing the RSC boundary.
Audience snapshot
Admin
Session-gated staff hubs — clients, scopes, projects, billing, and the command dashboard.
Marketing
Public lokatech.co site in the same monorepo, with its own theme — unchanged URLs, no admin pollution.
Client portal
Token-based magic links, no account — separate URLs for interactive scope review vs read-only project docs.
Tech Stack
Full-stack TypeScript on Next.js App Router — PostgreSQL as the source of truth, validation at every mutation boundary.
Framework: Next.js (App Router), React, TypeScript · UI: Tailwind CSS v4, Shadcn UI
Database: PostgreSQL (Neon) · ORM: Prisma · Auth: Auth.js v5 (credentials, JWT sessions)
Validation: Zod · Diagrams: Mermaid · PDF: @react-pdf/renderer (client-side)
Future Roadmap
Project status pipeline
Lead → scoping → proposal sent → won → in progress → completed → archived, with gates for billing and scope edits.
Email notifications
Resend integration for scope review published, invoice sent, payment received, and scheduled overdue reminders.