# 🚀 @frontend-dev - React Frontend Implementation

## 📊 Stato Progetto

**Data:** 2026-04-07  
**Fase:** 2 - Frontend Development  
**Backend:** ✅ COMPLETATO

### ✅ Cosa è pronto
- **Backend API** completa con tutti gli endpoint
- **Database** PostgreSQL con dati di esempio
- **Documentazione API** disponibile su `/docs`
- **CORS** abilitato per comunicazione frontend-backend

### 🎯 I tuoi task (Priorità P1)

---

## FE-001: Setup Ambiente React
**Stima:** M (1-2 ore)

### Obiettivo
Configurare l'ambiente di sviluppo React con Vite, TypeScript, Tailwind CSS e shadcn/ui.

### Files da creare/configurare
```
frontend/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── lib/
│   ├── pages/
│   ├── services/
│   ├── types/
│   ├── App.tsx
│   └── main.tsx
├── public/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
└── components.json
```

### Implementazione richiesta

**1. Setup iniziale:**
```bash
cd /home/google/Sources/LucaSacchiNet/mockupAWS
mkdir -p frontend
cd frontend

# Inizializza progetto Vite con React + TypeScript
npm create vite@latest . -- --template react-ts

# Installa dipendenze base
npm install

# Installa Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Installa shadcn/ui
npx shadcn-ui@latest init

# Installa librerie necessarie
npm install @tanstack/react-query axios recharts lucide-react clsx tailwind-merge
npm install react-router-dom
npm install -D @types/node
```

**2. `tailwind.config.js`:**
```javascript
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
```

**3. `src/index.css`:**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

**4. Installa componenti shadcn/ui necessari:**
```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add label
npx shadcn-ui@latest add select
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add table
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add dropdown-menu
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add toast
n```

### Criteri di accettazione
- [ ] Vite + React + TypeScript configurato
- [ ] Tailwind CSS funzionante
- [ ] shadcn/ui inizializzato
- [ ] Componenti base installati
- [ ] `npm run dev` avvia senza errori

---

## FE-002: Configurazione API Client
**Stima:** S (30-60 min)  
**Dipende da:** FE-001

### Obiettivo
Configurare Axios per chiamate API al backend.

### Files da creare
```
frontend/src/
├── lib/
│   └── api.ts
├── types/
│   └── api.ts
└── .env
```

### Implementazione richiesta

**1. `frontend/.env`:**
```env
VITE_API_URL=http://localhost:8000/api/v1
```

**2. `frontend/src/lib/api.ts`:**
```typescript
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1',
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request interceptor
api.interceptors.request.use(
  (config) => {
    // Add auth headers here if needed
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Response interceptor
api.interceptors.response.use(
  (response) => response,
  (error) => {
    // Handle errors globally
    console.error('API Error:', error.response?.data || error.message);
    return Promise.reject(error);
  }
);

export default api;
```

**3. `frontend/src/types/api.ts`:**
```typescript
export interface Scenario {
  id: string;
  name: string;
  description?: string;
  tags: string[];
  status: 'draft' | 'running' | 'completed' | 'archived';
  region: string;
  created_at: string;
  updated_at: string;
  completed_at?: string;
  started_at?: string;
  total_requests: number;
  total_cost_estimate: number;
}

export interface ScenarioCreate {
  name: string;
  description?: string;
  tags?: string[];
  region: string;
}

export interface ScenarioUpdate {
  name?: string;
  description?: string;
  tags?: string[];
}

export interface ScenarioList {
  items: Scenario[];
  total: number;
  page: number;
  page_size: number;
}

export interface MetricSummary {
  total_requests: number;
  total_cost_usd: number;
  sqs_blocks: number;
  lambda_invocations: number;
  llm_tokens: number;
  pii_violations: number;
}

export interface CostBreakdown {
  service: string;
  cost_usd: number;
  percentage: number;
}

export interface MetricsResponse {
  scenario_id: string;
  summary: MetricSummary;
  cost_breakdown: CostBreakdown[];
  timeseries: {
    timestamp: string;
    metric_type: string;
    value: number;
  }[];
}
```

### Criteri di accettazione
- [ ] Axios configurato con base URL
- [ ] Interceptors per errori
- [ ] TypeScript types definiti
- [ ] Test chiamata API funzionante

---

## FE-003: React Query Hooks
**Stima:** M (1-2 ore)  
**Dipende da:** FE-002

### Obiettivo
Creare hooks per fetchare dati dal backend usando React Query.

### Files da creare
```
frontend/src/
├── hooks/
│   ├── useScenarios.ts
│   ├── useScenario.ts
│   └── useMetrics.ts
└── providers/
    └── QueryProvider.tsx
```

### Implementazione richiesta

**1. `frontend/src/providers/QueryProvider.tsx`:**
```typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode } from 'react';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

export function QueryProvider({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}
```

**2. `frontend/src/hooks/useScenarios.ts`:**
```typescript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '@/lib/api';
import type { Scenario, ScenarioCreate, ScenarioUpdate, ScenarioList } from '@/types/api';

const SCENARIOS_KEY = 'scenarios';

export function useScenarios(page = 1, pageSize = 20, status?: string, region?: string) {
  return useQuery<ScenarioList>({
    queryKey: [SCENARIOS_KEY, page, pageSize, status, region],
    queryFn: async () => {
      const params = new URLSearchParams();
      params.append('page', page.toString());
      params.append('page_size', pageSize.toString());
      if (status) params.append('status', status);
      if (region) params.append('region', region);
      
      const response = await api.get(`/scenarios?${params.toString()}`);
      return response.data;
    },
  });
}

export function useScenario(id: string) {
  return useQuery<Scenario>({
    queryKey: [SCENARIOS_KEY, id],
    queryFn: async () => {
      const response = await api.get(`/scenarios/${id}`);
      return response.data;
    },
    enabled: !!id,
  });
}

export function useCreateScenario() {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async (data: ScenarioCreate) => {
      const response = await api.post('/scenarios', data);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY] });
    },
  });
}

export function useUpdateScenario(id: string) {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async (data: ScenarioUpdate) => {
      const response = await api.put(`/scenarios/${id}`, data);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY] });
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY, id] });
    },
  });
}

export function useDeleteScenario() {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async (id: string) => {
      await api.delete(`/scenarios/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY] });
    },
  });
}

export function useStartScenario(id: string) {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async () => {
      const response = await api.post(`/scenarios/${id}/start`);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY, id] });
    },
  });
}

export function useStopScenario(id: string) {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: async () => {
      const response = await api.post(`/scenarios/${id}/stop`);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [SCENARIOS_KEY, id] });
    },
  });
}
```

**3. `frontend/src/hooks/useMetrics.ts`:**
```typescript
import { useQuery } from '@tanstack/react-query';
import api from '@/lib/api';
import type { MetricsResponse } from '@/types/api';

const METRICS_KEY = 'metrics';

export function useMetrics(scenarioId: string) {
  return useQuery<MetricsResponse>({
    queryKey: [METRICS_KEY, scenarioId],
    queryFn: async () => {
      const response = await api.get(`/scenarios/${scenarioId}/metrics`);
      return response.data;
    },
    enabled: !!scenarioId,
    refetchInterval: 5000, // Refresh every 5 seconds for running scenarios
  });
}
```

### Criteri di accettazione
- [ ] QueryProvider configurato
- [ ] useScenarios con pagination/filters
- [ ] useScenario per dettaglio
- [ ] Mutations per CRUD operations
- [ ] Cache invalidation funzionante

---

## FE-004: Layout e Navigazione
**Stima:** M (1-2 ore)  
**Dipende da:** FE-003

### Obiettivo
Creare layout principale con header, sidebar e routing.

### Files da creare
```
frontend/src/
├── components/
│   ├── layout/
│   │   ├── Layout.tsx
│   │   ├── Header.tsx
│   │   └── Sidebar.tsx
│   └── ui/               # shadcn components
├── pages/
│   ├── Dashboard.tsx
│   ├── ScenariosPage.tsx
│   ├── ScenarioDetail.tsx
│   └── NotFound.tsx
├── App.tsx
└── main.tsx
```

### Implementazione richiesta

**1. `frontend/src/components/layout/Layout.tsx`:**
```typescript
import { Outlet } from 'react-router-dom';
import { Header } from './Header';
import { Sidebar } from './Sidebar';

export function Layout() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="flex">
        <Sidebar />
        <main className="flex-1 p-6">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
```

**2. `frontend/src/components/layout/Header.tsx`:**
```typescript
import { Link } from 'react-router-dom';
import { Cloud, Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function Header() {
  return (
    <header className="border-b bg-card">
      <div className="flex h-16 items-center px-6">
        <Link to="/" className="flex items-center gap-2 font-bold text-xl">
          <Cloud className="h-6 w-6" />
          <span>mockupAWS</span>
        </Link>
        <div className="ml-auto flex items-center gap-4">
          <span className="text-sm text-muted-foreground">
            AWS Cost Simulator
          </span>
        </div>
      </div>
    </header>
  );
}
```

**3. `frontend/src/components/layout/Sidebar.tsx`:**
```typescript
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>
  );
}
```

**4. `frontend/src/App.tsx`:**
```typescript
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryProvider } from './providers/QueryProvider';
import { Toaster } from '@/components/ui/toaster';
import { Layout } from './components/layout/Layout';
import { Dashboard } from './pages/Dashboard';
import { ScenariosPage } from './pages/ScenariosPage';
import { ScenarioDetail } from './pages/ScenarioDetail';
import { NotFound } from './pages/NotFound';

function App() {
  return (
    <QueryProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Dashboard />} />
            <Route path="scenarios" element={<ScenariosPage />} />
            <Route path="scenarios/:id" element={<ScenarioDetail />} />
            <Route path="*" element={<NotFound />} />
          </Route>
        </Routes>
      </BrowserRouter>
      <Toaster />
    </QueryProvider>
  );
}

export default App;
```

**5. `frontend/src/main.tsx`:**
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

### Criteri di accettazione
- [ ] Layout con Header e Sidebar
- [ ] React Router configurato
- [ ] Navigazione funzionante
- [ ] Responsive design
- [ ] Active state su menu

---

## FE-005: Dashboard Page
**Stima:** L (2-4 ore)  
**Dipende da:** FE-004

### Obiettivo
Creare la pagina dashboard con overview e statistiche.

### Files da creare
```
frontend/src/pages/Dashboard.tsx
frontend/src/components/dashboard/
├── StatCard.tsx
├── RecentScenarios.tsx
└── CostOverview.tsx
```

### Implementazione richiesta

**1. `frontend/src/components/dashboard/StatCard.tsx`:**
```typescript
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';

interface StatCardProps {
  title: string;
  value: string | number;
  description?: string;
  icon: LucideIcon;
  trend?: {
    value: number;
    label: string;
  };
}

export function StatCard({ title, value, description, icon: Icon, trend }: StatCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {description && (
          <p className="text-xs text-muted-foreground">{description}</p>
        )}
        {trend && (
          <div className={`text-xs ${trend.value >= 0 ? 'text-green-600' : 'text-red-600'}`}>
            {trend.value >= 0 ? '+' : ''}{trend.value}% {trend.label}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
```

**2. `frontend/src/pages/Dashboard.tsx`:**
```typescript
import { useScenarios } from '@/hooks/useScenarios';
import { StatCard } from '@/components/dashboard/StatCard';
import { RecentScenarios } from '@/components/dashboard/RecentScenarios';
import { Activity, DollarSign, Server, AlertTriangle } from 'lucide-react';

export function Dashboard() {
  const { data: scenarios, isLoading } = useScenarios(1, 100);
  
  const totalScenarios = scenarios?.total || 0;
  const runningScenarios = scenarios?.items.filter(s => s.status === 'running').length || 0;
  const totalCost = scenarios?.items.reduce((sum, s) => sum + s.total_cost_estimate, 0) || 0;
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Dashboard</h1>
        <p className="text-muted-foreground">
          Overview of your AWS cost simulation scenarios
        </p>
      </div>
      
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <StatCard
          title="Total Scenarios"
          value={totalScenarios}
          description="All scenarios"
          icon={Server}
        />
        <StatCard
          title="Running"
          value={runningScenarios}
          description="Active simulations"
          icon={Activity}
        />
        <StatCard
          title="Total Cost"
          value={`$${totalCost.toFixed(4)}`}
          description="Estimated AWS costs"
          icon={DollarSign}
        />
        <StatCard
          title="PII Violations"
          value="0"
          description="Potential data leaks"
          icon={AlertTriangle}
        />
      </div>
      
      <div className="grid gap-4 md:grid-cols-2">
        <RecentScenarios scenarios={scenarios?.items.slice(0, 5) || []} />
        {/* Add CostChart component here */}
      </div>
    </div>
  );
}
```

### Criteri di accettazione
- [ ] Stat cards con dati reali
- [ ] Loading states
- [ ] Lista scenari recenti
- [ ] Layout responsive

---

## FE-006: Scenarios List Page
**Stima:** L (2-4 ore)  
**Dipende da:** FE-005

### Obiettivo
Pagina lista scenari con filtri, pagination e azioni.

### Files da creare
```
frontend/src/pages/ScenariosPage.tsx
frontend/src/components/scenarios/
├── ScenarioTable.tsx
├── ScenarioFilters.tsx
├── CreateScenarioDialog.tsx
└── DeleteScenarioDialog.tsx
```

### Implementazione richiesta

**1. `frontend/src/components/scenarios/ScenarioTable.tsx`:**
```typescript
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { MoreHorizontal, Play, Square, Archive, Trash2 } from 'lucide-react';
import type { Scenario } from '@/types/api';

interface ScenarioTableProps {
  scenarios: Scenario[];
  onStart: (id: string) => void;
  onStop: (id: string) => void;
  onArchive: (id: string) => void;
  onDelete: (id: string) => void;
}

const statusColors = {
  draft: 'secondary',
  running: 'default',
  completed: 'outline',
  archived: 'destructive',
} as const;

export function ScenarioTable({
  scenarios,
  onStart,
  onStop,
  onArchive,
  onDelete,
}: ScenarioTableProps) {
  const navigate = useNavigate();
  
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Region</TableHead>
          <TableHead>Requests</TableHead>
          <TableHead>Cost</TableHead>
          <TableHead className="w-[100px]">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {scenarios.map((scenario) => (
          <TableRow
            key={scenario.id}
            className="cursor-pointer"
            onClick={() => navigate(`/scenarios/${scenario.id}`)}
          >
            <TableCell className="font-medium">
              {scenario.name}
            </TableCell>
            <TableCell>
              <Badge variant={statusColors[scenario.status]}>
                {scenario.status}
              </Badge>
            </TableCell>
            <TableCell>{scenario.region}</TableCell>
            <TableCell>{scenario.total_requests}</TableCell>
            <TableCell>${scenario.total_cost_estimate.toFixed(6)}</TableCell>
            <TableCell>
              <DropdownMenu>
                <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  {scenario.status === 'draft' && (
                    <DropdownMenuItem onClick={() => onStart(scenario.id)}>
                      <Play className="mr-2 h-4 w-4" />
                      Start
                    </DropdownMenuItem>
                  )}
                  {scenario.status === 'running' && (
                    <DropdownMenuItem onClick={() => onStop(scenario.id)}>
                      <Square className="mr-2 h-4 w-4" />
                      Stop
                    </DropdownMenuItem>
                  )}
                  {scenario.status === 'completed' && (
                    <DropdownMenuItem onClick={() => onArchive(scenario.id)}>
                      <Archive className="mr-2 h-4 w-4" />
                      Archive
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuItem
                    className="text-destructive"
                    onClick={() => onDelete(scenario.id)}
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

### Criteri di accettazione
- [ ] Tabella con dati reali
- [ ] Filtri per status e regione
- [ ] Pagination
- [ ] Azioni per ogni scenario
- [ ] Confirm dialog per delete

---

## 📋 Checklist Completamento

Prima di procedere, verifica:

- [ ] Tutti i componenti creati
- [ ] TypeScript types corretti
- [ ] Error handling appropriato
- [ ] Loading states
- [ ] Responsive design
- [ ] API integration funzionante

---

## 🧪 Testing

```bash
# Installa dipendenze
cd frontend
npm install

# Avvia dev server
npm run dev

# Build produzione
npm run build
```

---

## 🚀 Comandi Utili

```bash
# Aggiungi nuovo componente shadcn
npx shadcn-ui@latest add [component-name]

# Build
npm run build

# Preview build
npm run preview
```

---

**@frontend-dev: INIZIA ORA! 🚀**

Procedi in ordine: FE-001 → FE-002 → FE-003 → FE-004 → FE-005 → FE-006

**Domande?** Riferiti alla documentazione API su `http://localhost:8000/docs`

**Commit convenzioni:**
- `feat: setup React environment with Vite and Tailwind`
- `feat: add API client with Axios`
- `feat: implement React Query hooks`
- `feat: add layout and navigation`
- `feat: create dashboard page`
- `feat: add scenarios list page`

**Buon lavoro! 💪**