Fase 3: Implementación de Listings (Avisos) - Entidades, Repositorio, API y Frontend Wizard integración

frontend/publish-wizard/src/App.tsx

@@ -1,10 +1,21 @@
+import { useEffect, useState } from 'react';
 import { useWizardStore } from './store/wizardStore';
 import CategorySelection from './pages/Steps/CategorySelection';
 import OperationSelection from './pages/Steps/OperationSelection';
 import AttributeForm from './pages/Steps/AttributeForm';
+import SummaryStep from './pages/Steps/SummaryStep';
+import { wizardService } from './services/wizardService';
+import type { AttributeDefinition } from './types';
 
 function App() {
-  const step = useWizardStore((state) => state.step);
+  const { step, selectedCategory } = useWizardStore();
+  const [definitions, setDefinitions] = useState<AttributeDefinition[]>([]);
+
+  useEffect(() => {
+    if (selectedCategory) {
+      wizardService.getAttributes(selectedCategory.id).then(setDefinitions);
+    }
+  }, [selectedCategory]);
 
   return (
     <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
@@ -30,8 +41,8 @@ function App() {
         {step === 1 && <CategorySelection />}
         {step === 2 && <OperationSelection />}
         {step === 3 && <AttributeForm />}
-        {step === 4 && <div className="text-center py-20">Paso 4: Fotos (Coming Soon)</div>}
-        {step === 5 && <div className="text-center py-20">Paso 5: Resumen y Pago (Coming Soon)</div>}
+        {step === 4 && <div className="text-center py-20">Paso 4: Fotos (Coming Soon) - <button onClick={() => useWizardStore.getState().setStep(5)} className="text-blue-500 underline">Saltar</button></div>}
+        {step === 5 && <SummaryStep definitions={definitions} />}
       </main>
     </div>
   );