Frontend — Fase 5

Dashboard Frontend

Next.js 14 App Router — 12 pages, 14 components, Clerk auth, glassmorphism design system. ~9,200 LOC.

Tech Stack

Next.js 14 (App Router)

Route groups: (dashboard), (landing). Server components + client interactivity.

Clerk Auth

sign-in, sign-up routes. Organization-based multi-tenancy.

Glassmorphism Design

CSS custom properties, card-glass surfaces, gradient accents, dark mode native.

Push Notifications

3 API routes: subscribe, unsubscribe, send. Service worker integration.

App Architecture

app/
├── layout.tsx              # Root layout (Clerk provider, fonts)
├── globals.css             # Design system (1,213 LOC)
│
├── (landing)/              # Public marketing site
│   └── page.tsx            # Hero, SDK section, features (729 LOC)
│
├── (dashboard)/            # Authenticated area
│   ├── layout.tsx          # Sidebar + Header shell
│   ├── dashboard/          # Home — explore + search + status
│   ├── browse-users/       # Paginated user list (752 LOC)
│   ├── browse-fingerprints/# Paginated FP list (559 LOC)
│   ├── browse-domainprints/# Paginated DP list (523 LOC)
│   ├── users/              # Single user search (272 LOC)
│   ├── fingerprints/       # Single FP search (308 LOC)
│   ├── domainprints/       # Single DP search (284 LOC)
│   ├── identity-graph/     # Force-directed graph (247 LOC)
│   ├── attribution/        # Campaign analytics (440 LOC)
│   ├── account-sharing/    # Sharing detection (376 LOC)
│   ├── fraud/              # Fraud dashboard (323 LOC)
│   └── settings/           # Org config (331 LOC)
│
├── api/push/               # Push notification endpoints
│   ├── subscribe/route.ts  # Register SW subscription
│   ├── unsubscribe/route.ts# Remove subscription
│   └── send/route.ts       # Send push notification
│
├── sign-in/                # Clerk sign-in
└── sign-up/                # Clerk sign-up

components/
├── Sidebar.tsx             # Collapsible nav (188 LOC)
├── Header.tsx              # Top bar + org selector
├── IdentityGraph.tsx       # D3 force graph (387 LOC)
├── IdentityGraphPanel.tsx  # Detail panel (152 LOC)
├── EventCard.tsx           # Event detail card (347 LOC)
├── FraudChart.tsx          # Risk distribution chart (217 LOC)
├── CollisionGraph.tsx      # FP collision visualization (199 LOC)
├── GeoMap.tsx / GeoMapInner# Geographic heatmap (126 LOC)
├── ImpossibleTravelSection # Travel alert cards (103 LOC)
├── NotificationBell.tsx    # Push notification bell (216 LOC)
├── MetricCard.tsx          # Stat card component (98 LOC)
├── DomainMultiSelect.tsx   # Domain filter dropdown (113 LOC)
└── SystemStatus.tsx        # Health check widget (85 LOC)

12 Dashboard Pages

Page	Route	LOC	Features
Dashboard	`/dashboard`	221	Home hub — explore cards, quick search, system status
Browse Users	`/browse-users`	752	Paginated user table, risk badges, domain filters, sorting
Browse FPs	`/browse-fingerprints`	559	Fingerprint table, collision detection, risk scores
Browse DPs	`/browse-domainprints`	523	Domainprint table with cross-domain analytics
User Search	`/users`	272	Single-user drill-down with event timeline
FP Search	`/fingerprints`	308	Single-FP detail with collision graph
DP Search	`/domainprints`	284	Single-DP detail with user associations
Identity Graph	`/identity-graph`	247	D3 force-directed graph + domain filter + detail panel
Attribution	`/attribution`	440	Campaign analytics — source/medium/campaign breakdown
Account Sharing	`/account-sharing`	376	Concurrent sessions, geo/device diversity alerts
Fraud	`/fraud`	323	Risk distribution, signal breakdown, impossible travel
Settings	`/settings`	331	GA4 credentials, webhook config, domain whitelist

Design System

Custom CSS variables in globals.css (1,213 LOC) power the entire visual identity:

/* Brand tokens */
--brand-primary: hsla(192, 100%, 50%, 1);   /* Cyan */
--brand-secondary: hsla(263, 84%, 58%, 1);   /* Purple */

/* Surface system */
--surface-primary: hsla(240, 25%, 6%, 1);    /* Near-black */
--surface-card: hsla(240, 20%, 10%, 0.5);    /* Glass base */
--surface-hover: hsla(240, 15%, 14%, 0.6);   /* Hover state */

/* Glass components */
.card-glass {
  background: var(--surface-card);
  border: 1px solid hsla(263, 84%, 58%, 0.06);
  backdrop-filter: blur(12px);
}

/* Responsive breakpoints */
@media (max-width: 480px) { ... }  /* Pixel 7 fixes */
@media (max-width: 640px) { ... }  /* Small mobile */
@media (max-width: 768px) { ... }  /* Tablet */

/* Layout variables */
--sidebar-width: 220px;
--sidebar-collapsed: 56px;
--header-height: 56px;

Data Flow

Dashboard Page (client component)
  │
  ├── useEffect(() => fetch(...))
  │     ├── GET /admin/{endpoint}
  │     ├── Headers:
  │     │   ├── Authorization: Bearer <Clerk session token>
  │     │   └── x-organization-id: <active org>
  │     └── Response: JSON (DecimalEncoder)
  │
  ├── useState() — loading, data, error
  │
  └── Render:
      ├── MetricCard × N (top stats)
      ├── Data Table (paginated, sortable)
      ├── Charts (FraudChart, CollisionGraph)
      └── Detail panels (EventCard, IdentityGraphPanel)

Sidebar Navigation

Dashboard

Users

Fingerprints

Domainprints

Identity Graph

Attribution

Account Sharing

Fraud

Settings

Push Notification API

Route	Method	Purpose
`/api/push/subscribe`	POST	Register service worker push subscription
`/api/push/unsubscribe`	POST	Remove push subscription
`/api/push/send`	POST	Send push notification (from Processor Lambda)

Component Library

Deep dive into the 14 reusable components: IdentityGraph, FraudChart, EventCard, and more.

View Components