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 (