Spaces:
Running
Running
File size: 3,622 Bytes
7ee531a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | ---
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.
|