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

frontend/src/pages/ScenariosPage.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useScenarios, useStartScenario, useStopScenario, useDeleteScenario } from '@/hooks/useScenarios';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, Play, Square, Trash2 } from 'lucide-react';
+
+const statusColors = {
+  draft: 'secondary',
+  running: 'default',
+  completed: 'outline',
+  archived: 'destructive',
+} as const;
+
+export function ScenariosPage() {
+  const navigate = useNavigate();
+  const { data: scenarios, isLoading } = useScenarios();
+  
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Scenarios</h1>
+          <p className="text-muted-foreground">
+            Manage your AWS cost simulation scenarios
+          </p>
+        </div>
+      </div>
+
+      <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?.items.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 onClick={(e) => e.stopPropagation()}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {scenario.status === 'draft' && (
+                      <DropdownMenuItem>
+                        <Play className="mr-2 h-4 w-4" />
+                        Start
+                      </DropdownMenuItem>
+                    )}
+                    {scenario.status === 'running' && (
+                      <DropdownMenuItem>
+                        <Square className="mr-2 h-4 w-4" />
+                        Stop
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem className="text-destructive">
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}