Monte Xanic Dashboard

Wine analytics dashboard for Monte Xanic winery. Tracks berry chemistry (Brix, pH, tANT, TA), wine phenolics, extraction rates, vintage comparisons, and field measurements across 17 grape varieties and 12 vineyard origins in Baja California, Mexico.

Core Capabilities

• Berry Analytics: Scatter plots, KPIs, and evolution charts for Brix, pH, tANT, TA, berry weight vs days post-crush
• Wine Phenolics: Tank reception tables, pre-fermentation data, grouped phenolic comparisons by variety
• Extraction Analysis: Berry-to-wine anthocyanin transfer rates with quality-band color coding
• Vintage Comparison: Multi-vintage scatter overlays with 5-day-bin trend lines and weather overlays
• Vineyard Map: SVG map with color-coded quality metrics per vineyard section
• Weather Integration: Valley-specific temperature, rainfall, and GDD charts (VDG, VON, SV)
• Mediciones Tecnicas: Manual entry form for field measurements (tonnage, berry weight, 200-berry health sort)
• Data Upload: Drag-and-drop WineXRay CSV and Recepcion de Tanque Excel with validation and upsert
• Export: PNG and PDF chart export
• Mona (AI Analyst): In-dashboard Claude-powered chat that queries the data, builds native-quality charts/tables, drives filters/views, and learns from a lab-approved knowledge base. Full tab + synced floating widget; pinned outputs live in a "Guardados" tab

Tech Stack

Layer	Technology
Frontend	Vanilla JavaScript (ES6), no framework
Charts	Chart.js 4.4.1 (CDN)
Data Parsing	SheetJS 0.18.5 (CDN)
Database	Supabase (PostgreSQL)
Weather	Open-Meteo Archive API
Hosting	Vercel (auto-deploy)
Auth	HMAC session tokens + bcryptjs
AI Assistant	Claude (Anthropic) claude-sonnet-4-6 via /api/mona proxy

Project Structure

index.html              Single-page app
js/                     Frontend modules (14 files)
  app.js                App lifecycle, routing, refresh
  auth.js               Login/logout, token management
  config.js             Colors, mappings, normalization
  dataLoader.js         Supabase queries, data transformation
  filters.js            Filter state, chip UI
  charts.js             All Chart.js rendering
  tables.js             Table rendering, sorting
  kpis.js               KPI calculations
  weather.js            Open-Meteo API, meteorology cache
  upload.js             File parsing, server upload
  mediciones.js         Mediciones form, table, charts
  maps.js               SVG vineyard map
  explorer.js           Dynamic chart builder
  events.js             Event delegation (CSP-safe)
api/                    Vercel serverless functions
  login.js              Authentication
  verify.js             Token validation
  logout.js             Token revocation
  config.js             Supabase credentials (auth-gated)
  upload.js             Data insertion (auth-gated)
  lib/verifyToken.js    Shared HMAC verification
  lib/rateLimit.js      In-memory rate limiter
  ping.js               Daily Supabase keep-alive (Vercel cron)
  migrations-status.js  Migration drift diff for lab banner
  row.js                Generic row edit/delete (lab role)
css/styles.css          All styling, dark/light themes
sql/                    Database migrations
tests/                  Unit tests (47 tests, 5 suites)
docs/                   Detailed documentation

Quick Start

npm install
npm start              # http://localhost:8080 (static only)
npx vercel dev         # With API endpoints (requires .env.local)
npm test               # Run unit tests

Environment Variables

Create .env.local with:

SUPABASE_URL=...
SUPABASE_ANON_KEY=...
SUPABASE_SERVICE_KEY=...
SESSION_SECRET=...
AUTH_USERNAME=...
AUTH_PASSWORD_HASH=...
LAB_USERNAME=...
LAB_PASSWORD_HASH=...
CRON_SECRET=...

CRON_SECRET gates /api/ping, the daily Supabase keep-alive endpoint invoked by Vercel cron. Production-scope only — not needed in .env.local for local dev. Generate with openssl rand -hex 32.

See docs/Operations.md for full setup instructions.

Documentation

Detailed docs are in docs/:

Doc	Content
Architecture	System design, data flows, auth flow
Frontend Architecture	Module responsibilities, state ownership
Database	All table schemas with types and constraints
API	Endpoint contracts, request/response shapes
Data Dictionary	Chemistry terms, units, naming conventions
Data Validation	Upload parsing, normalization, filtering rules
Security	Auth model, CSP, rate limiting, known limitations
Operations	Setup, deployment, environment variables
Test Coverage	Test suite details and coverage gaps
Domain Model	Entity relationships, identifier formats
Roadmap

Status

All planned phases (1-7) are complete. See docs/Roadmap.md for details.