CinHaus
In progressB2B billing platform for metering app infrastructure and managing client usage at scale.
- Role
- Solo build (Next.js app, Azure SQL, Firebase auth, AI Foundry agent, client portal)
- Timeframe
- Jun 2026 to present
Objective
Build a billing and operations platform for managing client mobile and web applications: Flutter and React Native maintenance, metered API and server usage per Client ID (CID), transparent monthly invoicing in ZAR, and an embedded AI agent that surfaces usage anomalies and cost insights before invoices land.
Outcome
A live marketing site and admin vertical slice at cinhaus.co.za: Firebase auth with role-gated admin dashboard and client portal, Prisma-backed Azure SQL (12 models, UUID keys), KPI overview with client/CID/invoice views, billing-period tracking, usage ingestion APIs, invoice PDF generation (Azure Blob dry-run when unwired), and a non-streaming Azure GPT-4o billing agent with live client-profile context.
A look inside
How it works
CID-centric billing model
Every managed app gets a Client ID (CID). Billing periods, line items, API usage, and server usage roll up per CID so monthly invoices are itemised and transparent: maintenance fee plus metered consumption.
Admin dashboard + client portal
Role-based routing: admins and billing managers see KPIs, client lists, CIDs, invoices, and billing periods; client-role users land on a portal showing their apps, CIDs, and recent invoices without admin chrome.
Azure AI billing agent
An embedded GPT-4o panel (Azure AI Foundry) answers natural-language questions about clients, invoices, and usage. Context is injected from SQL views (`vw_client_profiles`) so answers stay grounded in live data.
Production-grade API conventions
Every route returns a `{ data, error, meta }` envelope. POST bodies are Zod-validated. Data mutations write to `audit_log`. Edge middleware verifies Firebase JWTs with jose; Node routes use firebase-admin as the authoritative session source.
Marketing + app in one repo
The public landing at `/` matches the live cinhaus.co.za brand (dark grid aesthetic, acid-green accent). Authenticated users route straight to dashboard or portal: one Next.js deployment for marketing and product.
What it is
CinHaus is a B2B platform I’m building to manage the full technical lifecycle of client mobile and web apps: Flutter and React Native maintenance, API usage metering, server infrastructure on Firebase and Azure, and monthly ZAR invoicing with full transparency.
It’s infrastructure-as-a-service for product companies: one monthly fee for maintenance, plus metered usage billed per CID (Client ID).
How it works
- Onboard. Each client company gets one or more apps; each app is assigned a CID. Billing periods track usage windows per CID.
- Meter. API calls and server compute/storage are recorded against the active billing period (routes scaffolded; ingestion pipeline on the roadmap).
- Invoice. Line items roll up into monthly invoices with PDF generation
planned via
@react-pdf/rendererand Azure Blob Storage. - Operate. Admins use the dashboard for KPIs, client management, and period close. Clients use the portal to see apps, CIDs, and invoice status.
- Ask. The billing agent (Azure GPT-4o via AI Foundry) answers questions like “which clients are overdue?” with context from live SQL views.
Stack choices
| Layer | Choice | Why |
|---|---|---|
| App | Next.js 14 App Router | Marketing + admin + portal + API in one deploy |
| DB | Azure SQL + Prisma | Relational billing model, introspected schema, UUID keys |
| Auth | Firebase | Fast client login; admin SDK for server verify |
| AI | Azure AI Foundry GPT-4o | Same cloud tenant as SQL; enterprise billing context |
| Deploy | Vercel | Matches other portfolio apps; cinhaus.co.za on GoDaddy DNS |
Status
WIP: vertical slice shipped. Auth, dashboard, clients API, portal overview, billing-periods UI, usage ingestion routes, invoice PDF boilerplate, and the AI bot are live. Next up: auto line-item generation from usage, Blob upload in production, remaining CRUD routes, and MRR time-series.
Replace dashboard/portal SVG placeholders when you capture authenticated screenshots. Re-run
npx playwright screenshot(seescripts/capture-cinhaus-screenshots.mjs).