Test weblow

import React, { useState, useCallback } from 'react'; import svgPaths from "./imports/svg-943ndayus8"; import img211215AxensGroupe1 from "figma:asset/a90ebe84f6442abadcf7a50c01efa34a79dd4e45.png"; import imgIaJessPlanner20251 from "figma:asset/0f8b4e786870e0e0a61c0551705681fb900a69e0.png"; import imgLogoBlancTransparent11 from "figma:asset/58c976b091932f4760c8d7d9c46b76eecf28563d.png"; import { Button } from "./components/ui/button"; import { Input } from "./components/ui/input"; import { Switch } from "./components/ui/switch"; import { Badge } from "./components/ui/badge"; interface Group { id: string; name: string; count: number; transport: 'personnel' | 'covoiturage'; class: '1ere' | '2eme' | 'eco' | 'business'; accommodation: 'simple' | 'double'; } export default function App() { const [totalPeople, setTotalPeople] = useState(500); const [groupCount, setGroupCount] = useState(4); const [budget, setBudget] = useState(110000); const [location, setLocation] = useState("Centre des Congrès / Saint-Malo"); const [dateRange, setDateRange] = useState("5 fev > 7 fev"); const [hosting, setHosting] = useState(true); const [displacement, setDisplacement] = useState(true); const [groups, setGroups] = useState([ { id: '1', name: 'Fondateurs', count: 5, transport: 'covoiturage', class: '1ere', accommodation: 'double' }, { id: '2', name: 'Cadres superieur', count: 130, transport: 'personnel', class: 'business', accommodation: 'simple' }, { id: '3', name: 'Cadres', count: 130, transport: 'personnel', class: 'eco', accommodation: 'simple' }, { id: '4', name: 'Collaborateurs', count: 130, transport: 'covoiturage', class: 'eco', accommodation: 'simple' }, ]); const [selectedGroup, setSelectedGroup] = useState(groups[0]); // Calcul automatique du budget basé sur les paramètres const calculateBudget = useCallback(() => { let total = 0; groups.forEach(group => { // Coût de base par personne let baseCost = 200; // Coût transport if (group.transport === 'personnel') baseCost += 100; if (group.class === '1ere') baseCost += 500; else if (group.class === 'business') baseCost += 300; else if (group.class === '2eme') baseCost += 100; // Coût hébergement if (group.accommodation === 'double') baseCost += 150; else baseCost += 100; total += group.count * baseCost; }); // Coûts additionnels if (hosting) total += 20000; if (displacement) total += 15000; setBudget(total); }, [groups, hosting, displacement]); // Recalculer le budget quand les paramètres changent React.useEffect(() => { calculateBudget(); }, [calculateBudget]); // Recalculer le total des personnes React.useEffect(() => { const total = groups.reduce((sum, group) => sum + group.count, 0); setTotalPeople(total); }, [groups]); const updateGroup = (groupId: string, updates: Partial) => { setGroups(prev => prev.map(group => group.id === groupId ? { ...group, ...updates } : group )); if (selectedGroup?.id === groupId) { setSelectedGroup(prev => prev ? { ...prev, ...updates } : null); } }; const updateGroupCount = (groupId: string, newCount: number) => { updateGroup(groupId, { count: Math.max(0, newCount) }); }; const addGroup = () => { const newGroup: Group = { id: Date.now().toString(), name: 'Nouveau Groupe', count: 10, transport: 'personnel', class: 'eco', accommodation: 'simple' }; setGroups(prev => [...prev, newGroup]); setGroupCount(prev => prev + 1); }; const removeGroup = (groupId: string) => { setGroups(prev => prev.filter(group => group.id !== groupId)); setGroupCount(prev => prev - 1); if (selectedGroup?.id === groupId) { setSelectedGroup(groups[0] || null); } }; return (

{/* Sidebar */}

{/* Logo OPA */}

OPAxDrakkar

{/* Navigation */} {/* Bottom section */}

Paramètres

{/* Main Content */}

{/* Header */}

Importer Excel Génerer avec l'IA

{/* Nombre de Personnes */}

Nombre de Personnes

{totalPeople}

setSelectedGroup(null)} >

{/* Date */}

Date

setDateRange(e.target.value)} className="text-center font-black text-gray-700" />

{/* Lieu */}

Lieu

setLocation(e.target.value)} className="font-black text-gray-700 mb-2" />

{/* Controls */}

Budget

setBudget(prev => Math.max(0, prev - 10000))} > -

{budget.toLocaleString()} € HT

setBudget(prev => prev + 10000)} > +

Nombre de groupe

setGroupCount(prev => Math.max(1, prev - 1))} > -

{groupCount}

{ setGroupCount(prev => prev + 1); addGroup(); }} > +

Hébergement

Déplacement

{/* Group Management Section */}

{/* Groups List */}

LES GROUPES

LES SOUS-GROUPES

{groups.map((group, index) => (

{index + 1}

updateGroup(group.id, { name: e.target.value })} className="font-semibold text-blue-600 border-none p-0 h-auto text-lg" />

{group.count} personnes

updateGroupCount(group.id, group.count - 1)} > - {group.count} updateGroupCount(group.id, group.count + 1)} > +

setSelectedGroup(group)} className="text-blue-600" > removeGroup(group.id)} className="text-red-600" >

))}

{/* Group Details Panel */} {selectedGroup && (

{selectedGroup.name}

setSelectedGroup(null)} >

Plus rapide Plus ecologique

Transport

updateGroup(selectedGroup.id, { transport: 'personnel' })} /> Personnel updateGroup(selectedGroup.id, { transport: 'covoiturage' })} /> Covoiturage

Classe

{['1ere', '2eme', 'eco', 'business'].map((classType) => ( updateGroup(selectedGroup.id, { class: classType as any })} /> {classType} ))}

Hébergement

updateGroup(selectedGroup.id, { accommodation: 'simple' })} /> Simple updateGroup(selectedGroup.id, { accommodation: 'double' })} /> Double

Catégorie

{[1, 2, 3, 4, 5].map((star) => ( ))}

{ alert(`Paramètres validés pour ${selectedGroup.name}`); setSelectedGroup(null); }} > Valider >

setSelectedGroup(null)} > Modifier la liste

)}

); }

Discutons de votre projet

Drakkar, partenaire Odoo certifié, vous accompagne dans votre transformation.

Contacter un expert