Product
Specification.

Overview

Internal control plane for managing ~10 vendor accounts (~$3.5M each). Combines spend analytics, forecasting, renewal management, anomaly investigation, and a savings opportunity pipeline — all backed by Lovable Cloud.

Audience

Internal finance team (single tenant, no auth in v2).

Form factor

Desktop-first dashboard.

Primary jobs

Forecast year-end spend · catch variance early · manage renewals · capture and resolve investigations · move opportunities to realized savings.

Visual system

Background

Dark gray oklch(0.22 0 0) — flat, no gradients.

Accents

Lime, hot pink, electric blue, orange, mint, magenta — one per vendor.

Status overlays

Amber = warning · Red = critical · Muted gray = resolved. Used only as overlays, never as base palette.

Type

Space Grotesk display (700/900) for headlines; JetBrains Mono uppercase for metadata.

Chrome

Hairline-separated flat blocks. No rounded card chrome.

Glyphs

Triangle = warning · Circle = critical · Diamond = opportunity · Square = renewal. Used sparingly in tables and chart overlays.

Navigation

Left rail

Collapsible. Icon-only collapsed; labels + vendor list expanded.

Items

Overview · Spec · Renewals (badge: count <90d) · Investigations (badge: open count) · Opportunities · per-vendor links.

Routes

/

Overview dashboard — KPIs, forecast, renewal strip, charts, recent investigations, opportunity leaderboard.

/spec

This product specification.

/renewals

Forward-looking timeline of vendor renewals with notice deadlines and committed spend.

/investigations

Filterable workflow table for investigating spend anomalies with inline status/assignee edits.

/opportunities

Kanban-style savings pipeline (Identified → Approved → In progress → Realized).

/vendors/$slug

Vendor detail page with header, KPIs, forecast, utilization, opportunities, investigations.

Overview dashboard

KPI tiles (5)

Forecast Year-End · Variance to Budget · Upcoming Renewals (90d) · Open Investigations · Identified Savings.

Forecast vs Budget

Cumulative line chart: actual · forecast · budget across FY 2026.

Renewal Risk strip

Horizontal band of vendors with renewal_at within 90 days, color-coded by urgency.

Monthly Spend

Stacked area, 24 months, click any point to open an investigation.

Budget vs Actual

Horizontal bars: YTD spend against annual budget per vendor.

Vendor Mix

Donut showing share of YTD spend by vendor.

Recent Investigations

Latest entries across all vendors with severity glyphs.

Opportunity Leaderboard

Top 5 opportunities by estimated savings.

Vendor detail

Header

Marker tile · name · code · category · criticality · owner · renewal date + days · notice deadline · billing frequency.

KPIs

YTD spend · Forecast year-end · Variance · Identified savings (vendor-scoped).

Monthly Spend line

24-month vendor-only spend trend.

Forecast vs Budget

Cumulative actual vs forecast vs budget for the vendor.

Utilization

Renders only when contracted_units is set — % gauge with bar.

Opportunities

Vendor-scoped pipeline cards with savings + confidence.

Investigations timeline

Full investigation history for the vendor.

Renewals

Layout

Vertical list sorted by renewal_at ascending. Left border colored by urgency.

Urgency

<30d red · <90d amber · else neutral.

Columns

Vendor · Renewal date · Notice deadline · Billing frequency + auto-renew · Committed spend · Days remaining.

Investigations

Capture

Click a chart point on Monthly Spend → InvestigationDialog with note, severity, root cause, assignee.

Workflow

Status: open → explained → resolved. resolved_at auto-set via DB trigger.

Severity

info / warning / critical, surfaced as glyphs in tables.

Filters

Status and severity quick-filters at the top of /investigations.

Inline edits

Status dropdown + assigned_to input commit optimistically via TanStack Query.

Opportunities

Pipeline

Kanban columns: identified → approved → in_progress → realized (lost is a status but not its own column).

Top KPIs

Total identified savings · realized savings · win rate %.

Card

Vendor tile · type (rightsize/cancel/renegotiate/consolidate) · description · estimated_savings · confidence · status dropdown.

Data layer

vendors

Source of truth: name, code, category, criticality, owner, renewal_at, notice_deadline_at, billing_frequency, committed_spend, contracted_units, utilization_pct, status, accent_token, tile_variant.

spend_facts

Append-only monthly facts: vendor_id, period (1st of month), actual_spend, budget_spend, forecast_spend.

investigations

vendor_id, metric, period, note, severity, status, root_cause, assigned_to, savings_estimate. Trigger sets resolved_at.

opportunities

vendor_id, type, description, estimated_savings, confidence, status; optional link to source investigation.

vendor_renewal_status (view)

Derives renewal_risk flag and days_to_renewal.

Forecasting

Trailing 3-month average extrapolated forward — computed client-side in src/lib/spend.ts.

Hooks

useVendors · useSpendFacts · useInvestigations · useOpportunities + matching create/update mutations with optimistic updates.

Tech stack

▸TanStack Start v1 + React 19

▸Vite 7 build

▸Tailwind CSS v4 with semantic tokens in src/styles.css

▸Recharts for all charts

▸TanStack Query for server state with optimistic mutations

▸Lovable Cloud (Supabase) for all persistence — vendors, spend, investigations, opportunities

Out of scope (v2)

▸Mobile / responsive layout

▸Realtime subscriptions

▸External integrations (NetSuite, AWS billing, etc.)

▸Multi-user roles, RBAC, authentication

▸Automated utilization ingestion

▸ML-based forecasting (using trailing-3-month avg in v2)

Vendor management

Inline edit

Vendor metadata (identity, ownership, contract terms) is editable inline from the vendor detail page — no modal.

Documents

Contracts, SOWs, MSAs, NDAs, order forms, and invoices attach to vendors via the private `vendor-documents` Storage bucket.

Renewal correlation

Effective and expiry dates captured on each document for future automatic linking to renewal alerts.

Quick create

New vendors are created from a single name field; slug, code, and accent are auto-generated and the user is sent straight to the new vendor page.

Smart documents

Each uploaded document can be downloaded or processed. Processing runs an async AI job that extracts spend rows from invoices or contract terms from MSAs/SOWs.

Suggestion review

Completed jobs surface vendor-metadata enrichments (only for blank fields), document dates, and proposed monthly spend rows in a side drawer for explicit user approval before any database writes.