diff --git a/app/ActivosMantenimiento/Page.module.css b/app/ActivosMantenimiento/Page.module.css index 8f3544d..ef4cfa4 100644 --- a/app/ActivosMantenimiento/Page.module.css +++ b/app/ActivosMantenimiento/Page.module.css @@ -1,71 +1,82 @@ .tableContainer { - margin-top: 10px; - overflow-y: auto; - overflow-x: auto; - border-radius: 4px; - border: 1px solid #cfcfcf; - max-height: 430px; - scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0); - background-color: #f9f9f9; - width: 100%; + margin-top: 10px; + overflow-y: auto; + overflow-x: auto; + border-radius: 4px; + border: 1px solid #cfcfcf; + max-height: 430px; + scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0); + background-color: #f9f9f9; + width: 100%; } .machineTable { - width: 100%; - border-collapse: collapse; - table-layout: auto; + width: 100%; + border-collapse: collapse; + table-layout: auto; } .machineTable th, .machineTable td { - padding: 10px; - text-align: center; - border-bottom: 1px solid #cfcfcf; - word-wrap: break-word; - overflow-wrap: break-word; + padding: 10px; + text-align: center; + border-bottom: 1px solid #cfcfcf; + word-wrap: break-word; + overflow-wrap: break-word; } .machineTable th { - position: sticky; - top: 0px; - background-color: rgb(1, 92, 184); - color: white; + position: sticky; + top: 0px; + background-color: rgb(1, 92, 184); + color: white; } .machineTable tr { - min-width: 400px; + min-width: 400px; } .disponible { - display: flex; - width: 100%; - height: 100%; - background-color: green; - color: green; - font-weight: bold; + display: flex; + width: 100%; + height: 100%; + background-color: green; + color: green; + font-weight: bold; } .ocupado { - color: red; - font-weight: bold; + color: red; + font-weight: bold; } - .actions { - text-align: center; + text-align: center; } .resetButton { - padding: 8px 16px; - background-color: #ff4d4d; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: bold; - transition: 0.3s; + padding: 8px 16px; + background-color: #ff4d4d; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-weight: bold; + transition: 0.3s; } .resetButton:hover { - background-color: #cc0000; -} \ No newline at end of file + background-color: #cc0000; +} +.checkbox-grid label { + display: inline-flex; + align-items: center; + font-size: 13px; + cursor: pointer; +} + +.checkbox-grid input[type="checkbox"] { + margin: 0; + padding: 0; + transform: scale(1); /* mantiene el tamaño */ +} diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx index ec94896..c828edc 100644 --- a/app/ActivosMantenimiento/page.tsx +++ b/app/ActivosMantenimiento/page.tsx @@ -2,7 +2,6 @@ import { useState } from "react"; import SearchUser from "../Components/SearchUser/searchUser"; import Toggle from "../Components/Toggle/Toggle"; -// Assuming you will create this new component export default function Page() { const [tiempo, setTiempo] = useState(""); @@ -10,10 +9,9 @@ export default function Page() { return (
-

EQUIPOS ACTIVOS Y EN MANTENIMIENTO

+

EQUIPOS ACTIVOS Y EN MANTENIMIENTO

- {/* Toggle component for 'Asignar' and 'Liberar' tabs */} setTiempo(e.target.value)} > - - - - - - + + + + + + @@ -88,25 +91,27 @@ export default function Page() { content: ( <> - +
-
- + +
+ @@ -117,10 +122,7 @@ export default function Page() { }, ]} /> - - {/* This is the new component to display available tables */}
); } -//IO \ No newline at end of file diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx index 129bfdc..488dafa 100644 --- a/app/Components/BarNavigation/BarNavigation.tsx +++ b/app/Components/BarNavigation/BarNavigation.tsx @@ -1,117 +1,107 @@ -'use client'; +"use client"; import { useState } from "react"; -import './BarNavigation.css'; +import "./BarNavigation.css"; import Link from "next/link"; function BarNavigation() { - const [openMenu, setOpenMenu] = useState(false); - const [openSubMenu, setOpenSubMenu] = useState(null); + const [openMenu, setOpenMenu] = useState(false); + const [openSubMenu, setOpenSubMenu] = useState(null); - const toggleMenu = () => setOpenMenu(!openMenu); - const toggleSubMenu = (index: number) => { - if (typeof window !== "undefined" && window.innerWidth <= 800) { - setOpenSubMenu(openSubMenu === index ? null : index); - } - }; - - return ( - + ); } export default BarNavigation; -//IO \ No newline at end of file +//IO diff --git a/app/Components/EviarMensaje/EnviarMensaje.tsx b/app/Components/EviarMensaje/EnviarMensaje.tsx new file mode 100644 index 0000000..99aadfb --- /dev/null +++ b/app/Components/EviarMensaje/EnviarMensaje.tsx @@ -0,0 +1,75 @@ +"use client"; +import { useState } from "react"; + +// Definimos la interfaz de props +interface EnviarMensajeProps { + titulo: string; + opciones: string[]; +} + +const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => { + const [seleccion, setSeleccion] = useState(""); + const [mensaje, setMensaje] = useState(""); + const [customMsg, setCustomMsg] = useState(""); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.) + }; + + return ( + + {/* Selección principal */} + +
+ +
+ + {/* Selección de mensaje */} + +
+ +
+ + {/* Mensaje personalizado */} + +
+ setCustomMsg(e.target.value)} + placeholder="Escribe tu mensaje..." + /> +
+ + {/* Botón de enviar */} + + + ); +}; + +export default EnviarMensaje; diff --git a/app/Components/ProgramSelector/ProgramSelector.tsx b/app/Components/ProgramSelector/ProgramSelector.tsx index e255580..6b6ea84 100644 --- a/app/Components/ProgramSelector/ProgramSelector.tsx +++ b/app/Components/ProgramSelector/ProgramSelector.tsx @@ -1,96 +1,113 @@ - - -function ProgramSelector() { - return ( -
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
- ) +// 1. Definimos la interfaz que describe las props del componente +export interface DatosEquipo { + titulo: string; // El título que aparecerá como label + opcion: string[]; // Lista de opciones para el select } -export default ProgramSelector \ No newline at end of file +// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo +// porque el componente debe ser reutilizable, no fijo. + +// 3. Recibimos las props como un objeto con estructura DatosEquipo +function ProgramSelector({ titulo, opcion }: DatosEquipo) { + return ( +
+
+ {/* Label dinámico con el título que recibimos */} + + + {/* Renderizamos UN solo + {opcion.map((op, index) => ( + + ))} + + + {/* Aquí puedes poner más + + {/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */} +
+ + + + + + + {" "} + {" "} + {" "} + {" "} + {" "} + + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + {" "} + + {/* ... resto de checkboxes */} +
+ + +
+
+ ); +} + +export default ProgramSelector; diff --git a/app/InformacionEquipo/informacionequipo.css b/app/InformacionEquipo/informacionequipo.css index 5f1ee0e..3edf365 100644 --- a/app/InformacionEquipo/informacionequipo.css +++ b/app/InformacionEquipo/informacionequipo.css @@ -46,6 +46,7 @@ gap: 6px 20px; margin-bottom: 20px; flex-wrap: wrap; + margin-right: 2px; } .checkbox-grid label { diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx index 7e81925..3966d6b 100644 --- a/app/InformacionEquipo/page.tsx +++ b/app/InformacionEquipo/page.tsx @@ -17,45 +17,22 @@ export default function Page() {
- +
- setUser(e.target.value)} - placeholder="Coloca" - /> + - setUser(e.target.value)} - placeholder="Coloca " - /> + - setUser(e.target.value)} - placeholder="Coloca " - /> + - setUser(e.target.value)} - placeholder="Coloca " - /> +
-
@@ -64,102 +41,23 @@ export default function Page() { { key: "2", label: "Programa por equipo", + // ✅ Ahora pasamos titulo y opcion como props al componente content: ( - + ), }, { key: "3", label: "Programa por sala", + // ✅ Aquí también pasamos un array válido de strings content: ( -
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
+ ), }, ]} @@ -167,4 +65,3 @@ export default function Page() { ); } -//IO diff --git a/app/Inscripciones/page.tsx b/app/Inscripciones/page.tsx index ee1dc87..c11fc63 100644 --- a/app/Inscripciones/page.tsx +++ b/app/Inscripciones/page.tsx @@ -1,32 +1,29 @@ -'use client'; +"use client"; import Information from "../Components/Information/information"; import Receipt from "../Components/Receipt/Receipt"; import SearchUser from "../Components/SearchUser/searchUser"; import Selection from "../Components/Selection/Selection"; import StepNavigator from "../Components/StepNavigator/StepNavigator"; -import "./inscriptions.css" +import "./inscriptions.css"; export default function Page() { - return ( -
-

INSCRIPCION

- - + return ( +
+

INSCRIPCION

- + - console.log()}> - - - + -
- - ); + console.log()}> + + + +
+ ); } -//IO \ No newline at end of file diff --git a/app/Mensajes/page.tsx b/app/Mensajes/page.tsx index bdd61ed..47a9819 100644 --- a/app/Mensajes/page.tsx +++ b/app/Mensajes/page.tsx @@ -1,118 +1,33 @@ "use client"; -import { useState } from "react"; -import SearchUser from "../Components/SearchUser/searchUser"; import Toggle from "../Components/Toggle/Toggle"; +import EnviarMensaje from "../Components/EviarMensaje/EnviarMensaje"; // 👈 importa bien export default function Page() { - const [tiempo, setTiempo] = useState(""); // <-- AQUÍ defines el estado return (
-

Enviar mensaje

+

Enviar mensaje

-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
- + ), }, - { - key: "CancelTime", + key: "Sala", label: "Sala", content: ( - <> -
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
- + ), }, ]} @@ -120,4 +35,3 @@ export default function Page() {
); } -//IO diff --git a/app/Programas/page.tsx b/app/Programas/page.tsx index 8ae3ff9..6103442 100644 --- a/app/Programas/page.tsx +++ b/app/Programas/page.tsx @@ -1,23 +1,56 @@ +"use client"; +import { useState } from "react"; import SearchUser from "../Components/SearchUser/searchUser"; -import "./programas.css"; +import styleprograms from "./programas.module.css"; export default function Page() { - return ( -
-

PROGRAMAS

- - setUser(e.target.value)} - placeholder="Coloca " - /> -
- + const [Editar, setEditar] = useState(true); - -
-
+ const handleEditar = () => { + setEditar(false); + }; + + return ( + <> + {Editar ? ( +
+

ID

+ + setUser(e.target.value)} + placeholder="Coloca " + /> +
+ + +
+
+ ) : ( +
+
ID
+

PROGRAMAS

+ + setUser(e.target.value)} + placeholder="Coloca " + /> +
+ + + +
+
+ )} + ); } -//IO diff --git a/app/Programas/programas.css b/app/Programas/programas.module.css similarity index 84% rename from app/Programas/programas.css rename to app/Programas/programas.module.css index 61fdc11..f80b282 100644 --- a/app/Programas/programas.css +++ b/app/Programas/programas.module.css @@ -7,3 +7,7 @@ .margin { margin: 10px 10px; } +.button { + margin-left: 20px; + margin-top: 20px; +}