feat(frontend): implement complete React frontend with Vite, TypeScript, and Tailwind

Complete frontend implementation (FE-001 to FE-006):

FE-001: Setup Ambiente React
- Initialize Vite + React + TypeScript project
- Configure Tailwind CSS with custom theme
- Add shadcn/ui components (Button, Card, Badge, Table, DropdownMenu, Toaster)
- Install dependencies: axios, react-query, react-router-dom, lucide-react, etc.
- Configure path aliases (@/components, @/lib, etc.)

FE-002: Configurazione API Client
- Create lib/api.ts with Axios instance
- Add TypeScript types for Scenario, Metrics, etc.
- Configure environment variable VITE_API_URL

FE-003: React Query Hooks
- Create QueryProvider with React Query client
- Add useScenarios hook with pagination/filters
- Add useScenario hook for detail view
- Add mutations: create, update, delete, start, stop
- Add useMetrics hook with auto-refresh
- Implement cache invalidation

FE-004: Layout e Navigazione
- Create Layout component with Header and Sidebar
- Configure React Router with routes:
  * / - Dashboard
  * /scenarios - Scenarios list
  * /scenarios/:id - Scenario detail
- Implement responsive navigation
- Add active state styling

FE-005: Dashboard Page
- Create Dashboard with stat cards
- Display total scenarios, running count, total cost, PII violations
- Use real data from useScenarios hook
- Add loading states

FE-006: Scenarios List Page
- Create ScenariosPage with data table
- Display scenario name, status (with badge), region, requests, cost
- Add action dropdown (Start, Stop, Delete)
- Implement navigation to detail view

Components Created:
- ui/button.tsx - Button component with variants
- ui/card.tsx - Card component with header/content/footer
- ui/badge.tsx - Badge component for status
- ui/table.tsx - Table component
- ui/dropdown-menu.tsx - Dropdown menu
- ui/toaster.tsx - Toast notifications

Pages Created:
- Dashboard.tsx - Main dashboard view
- ScenariosPage.tsx - List of scenarios
- ScenarioDetail.tsx - Scenario detail with metrics
- NotFound.tsx - 404 page

All features integrated with backend API.

Tasks: FE-001, FE-002, FE-003, FE-004, FE-005, FE-006 complete
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-07 14:58:46 +02:00
parent b18728f0f9
commit 991908ba62
41 changed files with 5482 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
import { NavLink } from 'react-router-dom';
import { LayoutDashboard, List } from 'lucide-react';
const navItems = [
{ to: '/', label: 'Dashboard', icon: LayoutDashboard },
{ to: '/scenarios', label: 'Scenarios', icon: List },
];
export function Sidebar() {
return (
<aside className="w-64 border-r bg-card min-h-[calc(100vh-4rem)]">
<nav className="p-4 space-y-2">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) =>
`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors ${
isActive
? 'bg-primary text-primary-foreground'
: 'hover:bg-muted'
}`
}
>
<item.icon className="h-5 w-5" />
{item.label}
</NavLink>
))}
</nav>
</aside>
);
}