diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 90f3688..3ab3461 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2490,13 +2490,32 @@ function InspectionModal({ checklist, user, onClose, onComplete }) { const currentQuestion = visibleQuestions[currentQuestionIndex] // Barra de navegación de preguntas + // Paginación para la barra de preguntas + const QUESTIONS_PER_PAGE = 8; + const [questionPage, setQuestionPage] = useState(0); + const totalPages = Math.ceil(visibleQuestions.length / QUESTIONS_PER_PAGE); + const startIdx = questionPage * QUESTIONS_PER_PAGE; + const endIdx = startIdx + QUESTIONS_PER_PAGE; + const visibleBlock = visibleQuestions.slice(startIdx, endIdx); + const QuestionNavigator = () => ( -
- {visibleQuestions.map((q, idx) => { - const answered = answers[q.id]?.value +
+ {/* Flecha izquierda */} + + {/* Números de preguntas */} + {visibleBlock.map((q, idx) => { + const globalIdx = startIdx + idx; + const answered = answers[q.id]?.value; let base = 'w-10 h-10 rounded-full border shadow-lg flex items-center justify-center text-lg font-bold transition-all select-none'; let style = ''; - if (idx === currentQuestionIndex) { + if (globalIdx === currentQuestionIndex) { style = 'bg-blue-900 text-white border-blue-900 scale-110'; } else if (answered) { style = 'bg-green-700 text-white border-green-800'; @@ -2506,16 +2525,25 @@ function InspectionModal({ checklist, user, onClose, onComplete }) { return ( - ) + ); })} + {/* Flecha derecha */} +
- ) + ); return (