---
title: Zenith Frontend
emoji: ⚡
colorFrom: blue
colorTo: red
sdk: static
pinned: false
---

# Zenith Fraud Detection Platform - Frontend

## Overview

The Zenith Frontend is a state-of-the-art, enterprise-grade interface for the Zenith Fraud Detection Platform. Built with React 19, Vite, and TypeScript, it provides a highly responsive, accessible, and performant user experience for fraud analysts and compliance officers.

## Architecture

### **Core Stack**
- **Framework**: React 19 with Vite
- **Language**: TypeScript 5.0+
- **Styling**: TailwindCSS 4.0 with customized design system
- **State Management**: Zustand & React Query
- **Routing**: React Router 6+

### **Key Architectural Features**
- **Component-Based Design**: Modular, reusable UI components using Radix UI primitives.
- **Accessibility First**: Built-in a11y support with ARIA compliance, keyboard navigation, and screen reader optimization (wcag-aa target).
- **Performance Optimized**: 
  - Code splitting & lazy loading
  - Virtualized lists for large datasets (`@tanstack/react-virtual`)
  - Efficient re-render management with `React.memo` and `useMemo`
- **PWA Ready**: Service worker integration for offline capabilities and installability.

## Key Features

### **📊 Intelligence Center**
- Real-time dashboard with critical metrics
- Interactive data visualizations using Recharts and D3
- Live agent status monitoring

### **🔍 Investigation Workspace**
- **Relationship Graph**: Interactive 2D/3D visualization of entity connections using `react-force-graph`.
- **Case Management**: Kanban-style workflow for managing alerts and cases.
- **Evidence Locker**: Secure drag-and-drop file upload and preview.

### **🛡️ Compliance & Controls**
- **SAR Generation**: Automated Suspicious Activity Report drafting.
- **Audit Logs**: Comprehensive immutable logs of user actions.
- **Role-Based Access**: Granular permissions for Analysts, Managers, and Admins.

## Getting Started

### **Prerequisites**
- Node.js 18+
- npm 9+

### **Installation**

```bash
# Clone the repository
git clone <repository-url>
cd frontend

# Install dependencies
npm install
```

### **Development**

```bash
# Start the development server
npm run dev
```
The application will be available at `http://localhost:5173`.

### **Building for Production**

```bash
# Build the application
npm run build

# Preview the build
npm run preview
```

## Configuration

### **Environment Variables**
Create a `.env` file in the root directory:

```env
VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000/ws
VITE_ENABLE_MOCK_MODE=false
VITE_LOG_LEVEL=info
```

## Testing & Quality Assurance

### **Test Suites**
- **Unit/Integration**: `npm run test` (Vitest)
- **E2E Testing**: `npm run test:e2e` (Playwright)
- **Accessibility Audit**: `npx lighthouse ...` or built-in dev tools

### **Linting & Formatting**
- `npm run lint` - Check for code style and errors
- `npm run type-check` - Validate TypeScript types

## Deployment

### **Hugging Face Spaces**
This frontend is configured for deployment on Hugging Face Spaces (Static SDK).
- **Build Command**: `npm run build`
- **Output Directory**: `dist`

### **Cloudflare Pages**
Compatible with Cloudflare Pages for global edge distribution.
- **Build Command**: `npm run build`
- **Output Directory**: `dist`

## Contributing

1. **Standards**: Follow the `FRONTEND_STANDARDS.md` guidelines.
2. **Accessibility**: All new components must pass axe-core audits.
3. **Tests**: Include unit tests for logic and integration tests for flows.

## License

Enterprise License - All rights reserved.