README.md

metadata

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

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

# Install dependencies
npm install

Development

# Start the development server
npm run dev

The application will be available at http://localhost:5173.

Building for Production

# Build the application
npm run build

# Preview the build
npm run preview

Configuration

Environment Variables

Create a .env file in the root directory:

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.