From 836b70ef97021160337415b8c4d76c6d3126f45a Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Tue, 18 Nov 2025 14:36:19 -0600
Subject: [PATCH] added perifericos

---
 src/app/(Administrador)/perifericos/page.tsx | 93 ++++++++++++++++++++
 src/app/(Administrador)/reporte/page.tsx     | 16 ++--
 2 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(Administrador)/perifericos/page.tsx

diff --git a/src/app/(Administrador)/perifericos/page.tsx b/src/app/(Administrador)/perifericos/page.tsx
new file mode 100644
index 0000000..c09695e
--- /dev/null
+++ b/src/app/(Administrador)/perifericos/page.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import Pregunta1 from "@/components/Equipo_Computo/Pregunta1";
+import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1";
+import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1";
+import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
+import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1";
+import Pregunta3_2 from "@/components/Equipo_Computo/Pregunta3_2";
+import Pregunta3_3 from "@/components/Equipo_Computo/Pregunta3_3";
+import Pregunta3_4 from "@/components/Equipo_Computo/Pregunta3_4";
+import Pregunta3_5 from "@/components/Equipo_Computo/Pregunta3_5";
+import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
+import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
+import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
+import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
+import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
+import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
+import "../../styles/layout/reporte.scss";
+
+type PreguntaKey =
+  | "pregunta1EP"
+  | "pregunta2EP"
+  | "pregunta4EP"
+  | "pregunta7"
+
+const LABELS: Record<PreguntaKey, string> = {
+  pregunta1EP: "Pregunta 1 EP",
+  pregunta2EP: "Pregunta 2 EP",
+  pregunta4EP: "Pregunta 4 EP",
+  pregunta7: "Pregunta 7",
+};
+
+// Mapeo de fondo por pregunta (puedes personalizarlo)
+const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
+  pregunta1EP: "bg-gray",
+  pregunta2EP: "bg-gray",
+  pregunta4EP: "bg-gray",
+  pregunta7: "bg-gray",
+};
+
+export default function Page() {
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("pregunta1EP");
+
+  const renderPregunta = () => {
+    switch (activeTab) {
+      case "pregunta1EP":
+        return <Pregunta1EP />;
+      case "pregunta2EP":
+        return <Pregunta2EP />;  
+      case "pregunta4EP":
+        return <Pregunta4EP />;
+      case "pregunta7":
+        return <Pregunta7 />;
+      default:
+        return (
+          <div className="p-6 text-center text-gray-500">
+            Contenido no disponible aún.
+          </div>
+        );
+    }
+  };
+
+  const currentBgClass = TAB_BACKGROUNDS[activeTab] || "bg-gray";
+
+  return (
+    <div className="scanView_reporte">
+      
+      <div className="container_reporte">
+          
+        
+        <div className="main-content_reporte">
+          <div className="tabs_reporte">
+            {Object.entries(LABELS).map(([key, label]) => (
+              <button
+                key={key}
+                className={`tab_reporte ${activeTab === key ? "active" : ""}`}
+                onClick={() => setActiveTab(key as PreguntaKey)}
+                aria-selected={activeTab === key}
+                role="tab"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className={`data-table_reporte ${currentBgClass}`}>
+            {renderPregunta()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(Administrador)/reporte/page.tsx b/src/app/(Administrador)/reporte/page.tsx
index 523f2e6..7ae5832 100644
--- a/src/app/(Administrador)/reporte/page.tsx
+++ b/src/app/(Administrador)/reporte/page.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import Pregunta1 from "@/components/Equipo_Computo/Pregunta1";
 import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1";
-import Pregunta2 from "@/components/Equipo_Computo/Pregunta2";
 import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1";
 import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
 import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1";
@@ -20,7 +19,6 @@ import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
 import "../../styles/layout/reporte.scss";
 
 type PreguntaKey =
-  | "pregunta1_1"
   | "pregunta1"
   | "pregunta1EP"
   | "pregunta2"
@@ -38,8 +36,7 @@ type PreguntaKey =
   | "pregunta9";
 
 const LABELS: Record<PreguntaKey, string> = {
-  pregunta1_1: "Pregunta 1.1 ",
-  pregunta1: "Pregunta 1",
+  pregunta1: "Pregunta 1 ",
   pregunta1EP: "Pregunta 1 EP",
   pregunta2: "Pregunta 2",
   pregunta2_1: "Pregunta 2.1",
@@ -58,8 +55,7 @@ const LABELS: Record<PreguntaKey, string> = {
 
 // Mapeo de fondo por pregunta (puedes personalizarlo)
 const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
-  pregunta1: "bg-blue",
-  pregunta1_1: "bg-gray",
+  pregunta1: "bg-gray",
   pregunta1EP: "bg-gray",
   pregunta2: "bg-gray",
   pregunta2_1: "bg-gray",
@@ -76,19 +72,17 @@ const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
   pregunta9: "bg-blue",
 };
 
-export default function Reporte() {
+export default function Page() {
   const [activeTab, setActiveTab] = useState<PreguntaKey>("pregunta1");
 
   const renderPregunta = () => {
     switch (activeTab) {
-      case "pregunta1_1":
-        return <Pregunta1_1 />;
       case "pregunta1":
-        return <Pregunta1 />;
+        return <Pregunta1_1 />;
       case "pregunta1EP":
         return <Pregunta1EP />;
       case "pregunta2":
-        return <Pregunta2 />;
+        return <Pregunta1 />;
       case "pregunta2_1":
         return <Pregunta2_1 />;
       case "pregunta2EP":