Register Dashboards UI Guide

For AI Agents: This guide explains how to build and deploy Register interfaces that work BOTH locally and on the public website, with appropriate privacy controls.

---

Architecture: Local ↔ Website

Core Principle

The UI must be IDENTICAL between the local development version and the public website version.

Local registers (React apps in Registers/):

Registers/
├── financial_register/frontend/   → React app (Vite + TypeScript)
├── candidate_register/frontend/   → React app (Vite + TypeScript)
└── resident_register/frontend/    → React app (Vite + TypeScript)

Public website (Quartz static site):

Quartz_CL/content/
├── Financials/Financial-Register-Dashboard   → Embedded version
└── (Candidate Dashboard if public)

Why? Consistency, maintainability, and user familiarity. Whether Simone views data locally or a partner views it on the website, the experience should feel the same.

---

Privacy Rules (CRITICAL)

Financial Register

Section	Local	Website	Reason
Assets	✅ Full	✅ Public	Transparency about property holdings
Expenses	✅ Full	✅ Public	Show where money goes
Fiscal Summary	✅ Full	✅ Public	Tax compliance, grants
Balance Sheet	✅ Full	✅ Public	Overall financial health
Income	✅ Full	❌ PROTECTED	Privacy - revenue sources sensitive
Cashflow	✅ Full	❌ PROTECTED	Privacy - liquidity info sensitive
Bank Accounts	✅ Full	❌ PROTECTED	Security - account details

CAUTION

NEVER expose Income, Cashflow, or Bank Account data on the public website. These pages should either not exist on the website, or show a “Protected Data” placeholder.

Candidate Register

Section	Local	Website	Reason
Dashboard (Aggregated)	✅ Full	✅ Public	Show community stats (nationalities, timeline)
Individual Candidates	✅ Full	❌ PROTECTED	Privacy - personal data (GDPR)
Call Logs	✅ Full	❌ PROTECTED	Privacy - interview notes
Contact Info	✅ Full	❌ PROTECTED	Privacy - emails, phones

CAUTION

The public website should ONLY show aggregated statistics, NEVER individual person data. Names, emails, phone numbers, and interview notes are strictly private.

Resident Register

Section	Local	Website	Reason
Occupancy Overview	✅ Full	✅ Public	Show availability
Room Assignments	✅ Full	❌ PROTECTED	Privacy - who lives where
Contract Details	✅ Full	❌ PROTECTED	Legal - contract terms

---

Visual Style Guidelines

DARK MODE ONLY

IMPORTANT

Register dashboards are DARK MODE ONLY. Do NOT implement light mode variants.

Rationale:

1. Technical/Nerd Aesthetic: These are data-heavy, technical interfaces. Dark mode conveys a “serious tools” feel.
2. Simplified Development: No need to maintain two color schemes – faster to build and maintain.
3. Visual Distinction: Dark dashboards stand out as “special tools” vs the warm, inviting main website.
4. Readability: Data visualizations and charts are often more readable on dark backgrounds.

The main ColivingLiguria website uses warm earth tones (see Color-Palette). Registers intentionally break this pattern to signal “you are now in a technical tool.”

Color Palette (Dark Only)

All dashboards follow the aesthetic defined in Dashboard_Chart_Style_Guide.

Key Points

1. Dark Theme: Background #0a0a0a, cards #111111
2. Gold Palette: Primary accent #D4A373, gradient for bars
3. Glassmorphism: backdrop-filter: blur(10px), subtle borders
4. Typography: Inter font, uppercase labels, 600 weight for values
5. Animations: Fade-in on load, subtle hover effects

Required Components

Component	Purpose	Colors
StatCard	Single KPI metric	Gold icon, large value
DonutChart	Proportional distribution	Multi-color segments
BarChart	Ranked comparisons	Gold gradient
TimelineChart	Trend over time	Gold bars, month labels

---

Implementation Checklist

When building or modifying a Register dashboard:

• Same Interface: Ensure local and website versions look identical
• Privacy Filter: Add conditional rendering to hide protected sections on website
• Style Compliance: Follow Dashboard_Chart_Style_Guide colors exactly
• Responsive: Works on mobile (stacked layout)
• Animations: Include fade-in on load
• Accessibility: Color contrast > 4.5:1

Privacy Filter Example

// In the public website version
const isPublicSite = window.location.hostname.includes('colivingliguria');
 
return (
  <>
    <AssetsSection />
    <ExpensesSection />
    {!isPublicSite && <IncomeSection />}     {/* Hidden on public */}
    {!isPublicSite && <CashflowSection />}   {/* Hidden on public */}
  </>
);

---

Related Files

• Style Guide: Registers/System/Aesthetics/Dashboard_Chart_Style_Guide.md
• Color Palette: Registers/System/Aesthetics/palette.ts
• Theme CSS: Registers/System/Aesthetics/theme.css
• Financial Frontend: Registers/financial_register/frontend/
• Candidate Frontend: Registers/candidate_register/frontend/