diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx index db4f0a6..e440840 100644 --- a/app/ActivosMantenimiento/page.tsx +++ b/app/ActivosMantenimiento/page.tsx @@ -2,10 +2,9 @@ import SearchUser from "../Components/SearchUser/searchUser"; export default function Page() { return ( -
+

ACTIVOS Y EN MANTENIMIENTO

-
); diff --git a/app/AgregarTiempo/page.tsx b/app/AgregarTiempo/page.tsx index f2c8c83..f29b60c 100644 --- a/app/AgregarTiempo/page.tsx +++ b/app/AgregarTiempo/page.tsx @@ -2,7 +2,7 @@ import SearchUser from "../Components/SearchUser/searchUser"; export default function Page() { return ( -
+

AGREGAR TIEMPO

diff --git a/app/Alta/page.tsx b/app/Alta/page.tsx index 6e74634..77cb778 100644 --- a/app/Alta/page.tsx +++ b/app/Alta/page.tsx @@ -17,7 +17,7 @@ export default function Page() { }; return ( -
+

ALTA

diff --git a/app/AsignacionEquipo/page.tsx b/app/AsignacionEquipo/page.tsx index c430b5e..73b22de 100644 --- a/app/AsignacionEquipo/page.tsx +++ b/app/AsignacionEquipo/page.tsx @@ -1,11 +1,26 @@ import SearchUser from "../Components/SearchUser/searchUser"; +import Toggle from "../Components/Toggle/Toggle"; export default function Page() { return ( -
+

ASIGNACION DE EQUIPOS

- + , + }, + { + key: "CancelTime", + label: "Cancelar tiempo", + content:<>, + }, + ]} + />
); diff --git a/app/AsignacionMesas/page.tsx b/app/AsignacionMesas/page.tsx index bf78da8..336fcfa 100644 --- a/app/AsignacionMesas/page.tsx +++ b/app/AsignacionMesas/page.tsx @@ -1,37 +1,56 @@ 'use client' import { useState } from "react"; import SearchUser from "../Components/SearchUser/searchUser"; +import Toggle from "../Components/Toggle/Toggle"; export default function Page() { const [tiempo, setTiempo] = useState(""); return ( -
+

ASIGNACION DE MESAS

- + + - -
- - -
+
+ + +
+ + +
+
+ , + }, + { + key: "Liberarmesa", + label: "Liberar mesa", + content: <>, + }, + ]} + />
diff --git a/app/BitacoraSanciones/page.tsx b/app/BitacoraSanciones/page.tsx new file mode 100644 index 0000000..8007ae7 --- /dev/null +++ b/app/BitacoraSanciones/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
+

BITACORA Y SANCIONES

+ + +
+ + ); +} +//IO \ No newline at end of file diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx index e48f449..3fe87c6 100644 --- a/app/Components/BarNavigation/BarNavigation.tsx +++ b/app/Components/BarNavigation/BarNavigation.tsx @@ -81,9 +81,28 @@ function BarNavigation() { -
  • Reportes
    • -
  • Quitar sancion
    • -
  • Cambiar contraseña
    • +
  • + Reportes +
      + +
    • Recibo
      • + + +
    • Inscritos
      • + + +
    • Bitacora y sanciones
      • + +
    +
    • + +
  • + Quitar sancion +
    • + +
  • + Cambiar contraseña +
    • ); diff --git a/app/Components/Impressions/Impressions.css b/app/Components/Impressions/Impressions.css index fd07ab9..e69de29 100644 --- a/app/Components/Impressions/Impressions.css +++ b/app/Components/Impressions/Impressions.css @@ -1,6 +0,0 @@ -.impressions { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; -} \ No newline at end of file diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx index 040e10d..e54d0b5 100644 --- a/app/Components/Impressions/impressions.tsx +++ b/app/Components/Impressions/impressions.tsx @@ -1,6 +1,8 @@ 'use client' + import { useState } from "react"; import './Impressions.css' + function Impressions() { const [pages, setPages] = useState(''); @@ -50,8 +52,8 @@ function Impressions() { e.preventDefault(); // handlePayment(); }}> +
    -
    @@ -100,4 +102,5 @@ function Impressions() { ) } -export default Impressions \ No newline at end of file +export default Impressions +//IO \ No newline at end of file diff --git a/app/Components/Information/information.tsx b/app/Components/Information/information.tsx new file mode 100644 index 0000000..0332b48 --- /dev/null +++ b/app/Components/Information/information.tsx @@ -0,0 +1,24 @@ +'use client'; + +interface InformationProps { + [key: string]: string | number | undefined; +} + +export default function Information(props: InformationProps) { + // Obtenemos las entradas (key + value) y filtramos los que sean undefined + const entries = Object.entries(props).filter(([_, value]) => value !== undefined); + + if (entries.length === 0) return null; // no mostrar nada si no hay datos + + return ( +
    +
      + {entries.map(([key, value]) => ( +
    • + {key}: {value} +
      • + ))} +
    +
    + ); +} \ No newline at end of file diff --git a/app/Components/Login/Login.css b/app/Components/Login/Login.css index 68ed2d6..acfadc0 100644 --- a/app/Components/Login/Login.css +++ b/app/Components/Login/Login.css @@ -2,6 +2,13 @@ width: 300px; } +.center{ + display: grid; + grid-template-columns: auto 400px; + justify-content: center; + align-items: center; +} + .relative { position: relative; } @@ -17,3 +24,9 @@ background-size: cover; cursor: pointer; } + +@media(max-width:800px){ + .center{ + display: flex; + } +} \ No newline at end of file diff --git a/app/Components/Login/Login.tsx b/app/Components/Login/Login.tsx index b0d2bcb..2920d9d 100644 --- a/app/Components/Login/Login.tsx +++ b/app/Components/Login/Login.tsx @@ -2,7 +2,7 @@ import "./Login.css"; function Login() { return ( -
    +
    -
    - - { - const value = e.target.value; - if (/^\d*$/.test(value)) { - setFolio(value); - } - }} - placeholder='Numero de folio...' - inputMode='numeric' - pattern='[0-9]*' - /> -
    -
    - - { - const value = e.target.value; +
    - if (/^\d*\.?\d*$/.test(value)) { - const numericValue = parseFloat(value); - if (value === '' || (numericValue <= 1000)) { - setAmount(value); - } else { - setAlert('') - setError('El monto no puede superar $1000.00') +
    + + { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setFolio(value); } - } - }} - placeholder='Monto recibido...' - inputMode='numeric' - pattern="^\d*\.?\d+$" - /> -
    + }} + placeholder='Numero de folio...' + inputMode='numeric' + pattern='[0-9]*' + /> +
    -
    - - setDate(e.target.value)} - min={minFecha} - max={maxFecha} - /> -
    +
    + + { + const value = e.target.value; -
    + if (/^\d*\.?\d*$/.test(value)) { + const numericValue = parseFloat(value); - {error && -
    - {error} -
    - } - {alert && -
    - {alert} -
    - } + if (value === '' || (numericValue <= 1000)) { + setAmount(value); + } else { + setAlert('') + setError('El monto no puede superar $1000.00') + } + } + }} + placeholder='Monto recibido...' + inputMode='numeric' + pattern="^\d*\.?\d+$" + /> +
    + +
    + + setDate(e.target.value)} + min={minFecha} + max={maxFecha} + /> +
    + +
    + + + {error && +
    + {error} +
    + } + {alert && +
    + {alert} +
    + } +
    ) diff --git a/app/Components/SearchUser/searchUser.tsx b/app/Components/SearchUser/searchUser.tsx index ca07352..1ea0931 100644 --- a/app/Components/SearchUser/searchUser.tsx +++ b/app/Components/SearchUser/searchUser.tsx @@ -1,11 +1,12 @@ 'use client' import { useState } from "react"; +import Information from "../Information/information"; function SearchUser() { const [numAccount, setNumAccount] = useState(''); return ( <> -
    +
    - -
    - - - - -
    + + ) } diff --git a/app/Components/Selection/Selection.tsx b/app/Components/Selection/Selection.tsx index 0ab749e..2d5e7ec 100644 --- a/app/Components/Selection/Selection.tsx +++ b/app/Components/Selection/Selection.tsx @@ -15,10 +15,6 @@ function Selection() { name: "MACINTOSH", img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg", }, - { - name: "LINUX", - img: "https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg", - }, { name: "PROFESORES", img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png", diff --git a/app/Components/StepNavigator/StepNavigator.css b/app/Components/StepNavigator/StepNavigator.css index fae51a9..0141353 100644 --- a/app/Components/StepNavigator/StepNavigator.css +++ b/app/Components/StepNavigator/StepNavigator.css @@ -1,4 +1,5 @@ -.receipt { +.stepNavigator { + position: relative; max-width: 600px; margin-top: 1rem; border: 1px solid #e5e7eb; diff --git a/app/Components/StepNavigator/StepNavigator.tsx b/app/Components/StepNavigator/StepNavigator.tsx index 9197eca..a91a7e2 100644 --- a/app/Components/StepNavigator/StepNavigator.tsx +++ b/app/Components/StepNavigator/StepNavigator.tsx @@ -24,10 +24,10 @@ export default function StepNavigator({ totalSteps, children, onFinish }: StepNa }; return ( -
    +
    {children[step - 1]} -
    +
    {step > 1 && ( + {step < totalSteps && + +}
    -
    +
    ); } diff --git a/app/Components/Toggle/Toggle.tsx b/app/Components/Toggle/Toggle.tsx new file mode 100644 index 0000000..4a9dcff --- /dev/null +++ b/app/Components/Toggle/Toggle.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { useState, ReactNode } from "react"; + +interface ToggleOption { + key: string; + label: string; + content: ReactNode; +} + +interface ToggleProps { + options: ToggleOption[]; + defaultView?: string; +} + +export default function Toggle({ options, defaultView }: ToggleProps) { + const [view, setView] = useState(defaultView || options[0].key); + + return ( +
    +
    + {options.map((opt) => ( + + ))} +
    + +
    + {options.find((opt) => opt.key === view)?.content} +
    +
    + ); +} diff --git a/app/Impresiones/page.tsx b/app/Impresiones/page.tsx index 9ab2463..3f85226 100644 --- a/app/Impresiones/page.tsx +++ b/app/Impresiones/page.tsx @@ -1,51 +1,48 @@ -'use client' +'use client'; -import { useState } from "react"; -import Receipt from "../Components/Receipt/Receipt"; import SearchUser from "../Components/SearchUser/searchUser"; -import "@/app/globals.css" +import Receipt from "../Components/Receipt/Receipt"; import Impressions from "../Components/Impressions/impressions"; +import Toggle from "../Components/Toggle/Toggle"; + +import "@/app/globals.css"; export default function Page() { - const [view, setView] = useState('impresiones'); - return ( -
    -

    IMPRESIONES Y PLOTEO

    +
    +

    IMPRESIONES Y PLOTEO

    -
    -
    - - -
    - - {view === 'impresiones' && ( - - )} - - {view === 'recibo' && ( - <> - - - - - )} - -
    + , + }, + { + key: "2", + label: "Impresiones B/N", + content: , + }, + { + key: "3", + label: "Impresiones color", + content: , + }, + { + key: "4", + label: "Plotter", + content: , + }, + { + key: "5", + label: "Escaner", + content: , + }, + ]} + />
    ); } diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx index 875e864..159cb73 100644 --- a/app/InformacionEquipo/page.tsx +++ b/app/InformacionEquipo/page.tsx @@ -1,11 +1,70 @@ import SearchUser from "../Components/SearchUser/searchUser"; +import Toggle from "../Components/Toggle/Toggle"; export default function Page() { return ( -
    +

    INFORMACION DE EQUIPOS

    - + + + setUser(e.target.value)} + placeholder='Coloca un número de cuenta...' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + setUser(e.target.value)} + placeholder='Coloca ' + /> + + + + +
    , + }, + { + key: "2", + label: "Programa por equipo", + content: <>, + }, + ]} + />
    ); diff --git a/app/Inscripciones/page.tsx b/app/Inscripciones/page.tsx index 1541352..b169df1 100644 --- a/app/Inscripciones/page.tsx +++ b/app/Inscripciones/page.tsx @@ -1,5 +1,4 @@ 'use client'; - import Receipt from "../Components/Receipt/Receipt"; import SearchUser from "../Components/SearchUser/searchUser"; import Selection from "../Components/Selection/Selection"; @@ -8,7 +7,7 @@ import "./inscriptions.css" export default function Page() { return ( -
    +

    INSCRIPCION

    diff --git a/app/Inscritos/page.tsx b/app/Inscritos/page.tsx new file mode 100644 index 0000000..44b48fd --- /dev/null +++ b/app/Inscritos/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
    +

    INSCRITOS

    + + +
    + + ); +} +//IO \ No newline at end of file diff --git a/app/Mensajes/page.tsx b/app/Mensajes/page.tsx index 5edf534..4eb2f9c 100644 --- a/app/Mensajes/page.tsx +++ b/app/Mensajes/page.tsx @@ -1,11 +1,9 @@ -import SearchUser from "../Components/SearchUser/searchUser"; export default function Page() { return ( -
    +

    MENSAJES

    -
    ); diff --git a/app/Monitor/Page.module.css b/app/Monitor/Page.module.css new file mode 100644 index 0000000..8f3544d --- /dev/null +++ b/app/Monitor/Page.module.css @@ -0,0 +1,71 @@ +.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%; +} + +.machineTable { + 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; +} + +.machineTable th { + position: sticky; + top: 0px; + background-color: rgb(1, 92, 184); + color: white; +} + +.machineTable tr { + min-width: 400px; +} + +.disponible { + display: flex; + width: 100%; + height: 100%; + background-color: green; + color: green; + font-weight: bold; +} + +.ocupado { + color: red; + font-weight: bold; +} + + +.actions { + 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; +} + +.resetButton:hover { + background-color: #cc0000; +} \ No newline at end of file diff --git a/app/Monitor/page.tsx b/app/Monitor/page.tsx index 0dcd0f9..a1a92a7 100644 --- a/app/Monitor/page.tsx +++ b/app/Monitor/page.tsx @@ -1,13 +1,164 @@ -import SearchUser from "../Components/SearchUser/searchUser"; +"use client"; + +import { useState } from "react"; +import styles from "./Page.module.css"; // importamos el css export default function Page() { + const [machines] = useState([ + { + ubicacion: "Laboratorio 1", + nombre: "PC-01", + plataforma: "Windows 10", + area: "Diseño", + disponible: true, + }, + { + ubicacion: "Laboratorio 2", + nombre: "PC-15", + plataforma: "Linux", + area: "Programación", + disponible: false, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, { + ubicacion: "Laboratorio 3", + nombre: "PC-23", + plataforma: "MacOS", + area: "Edición", + disponible: true, + }, + ]); + return ( -
    -

    MONITOR DE MAQUINAS DISPONIBLES

    +
    +

    MONITOR DE MÁQUINAS DISPONIBLES

    - +
    + +
    + +
    + + + + + + + + + + + + {machines.map((machine, index) => ( + + + + + + + + ))} + +
    UbicaciónNombre EquipoPlataformaÁreaDisponible
    {machine.ubicacion}{machine.nombre}{machine.plataforma}{machine.area} + {machine.disponible ? "si" : "no"} +
    +
    - ); } //IO \ No newline at end of file diff --git a/app/Programas/page.tsx b/app/Programas/page.tsx index 3ffe784..3824c7f 100644 --- a/app/Programas/page.tsx +++ b/app/Programas/page.tsx @@ -2,10 +2,9 @@ import SearchUser from "../Components/SearchUser/searchUser"; export default function Page() { return ( -
    +

    PROGRAMAS

    -
    ); diff --git a/app/QuitarSancion/page.tsx b/app/QuitarSancion/page.tsx new file mode 100644 index 0000000..495e523 --- /dev/null +++ b/app/QuitarSancion/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
    +

    QuitarSanciones

    + + +
    + + ); +} +//IO \ No newline at end of file diff --git a/app/Recibo/page.tsx b/app/Recibo/page.tsx new file mode 100644 index 0000000..3cffc70 --- /dev/null +++ b/app/Recibo/page.tsx @@ -0,0 +1,13 @@ +import SearchUser from "../Components/SearchUser/searchUser"; + +export default function Page() { + return ( +
    +

    RECIBO

    + + +
    + + ); +} +//IO \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 317347b..dea32eb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -13,6 +13,8 @@ body { } header { + display: grid; + grid-template-columns: auto 1fr; padding: 5px 40px; position: relative; overflow: hidden; @@ -61,8 +63,8 @@ footer { } .container { - display: grid; - grid-template-columns: 1fr 400px; + display: flex; + flex-direction: column; align-items: center; justify-items: center; position: relative; @@ -81,17 +83,17 @@ footer { } .containerSection { + position: relative; + width: 100%; + height: 100%; display: flex; flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - max-width: 500px; - height: 400px; - border-radius: 4px; - padding: 1.5rem; } +.containerForm{ + width: 100%; + max-width: 450px; +} .img { position: absolute; @@ -114,23 +116,18 @@ footer { background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0)); } -input { +input, +select { flex: 1; min-width: 200px; padding: 0.5rem; border: 1px solid #cfcfcf; + background-color: #fff; border-radius: 4px; font-size: 1rem; color: black; } -select { - padding: 0.5rem; - border-radius: 4px; - border: 1px solid #cfcfcf; - background-color: white; -} - .groupInput { display: flex; flex-wrap: wrap; @@ -169,7 +166,10 @@ select { } -.buttonContainer { +.absoluteButton { + position: absolute; + bottom: 1rem; + right: 1rem; display: flex; gap: 1rem; } @@ -184,7 +184,7 @@ ul { margin-bottom: 10px; } -.label { +.label{ font-size: 1rem; font-weight: bold; display: block; @@ -198,18 +198,14 @@ a { display: flex; flex-direction: column; border: 1px solid #e5e7eb; - padding: 1rem; border-radius: 4px; background-color: #f3f4f6; - margin-top: 1rem; + width: 100%; + max-width: 400px; } -.containerForm { - position: relative; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; +.information ul{ + padding: 1rem; } .title { @@ -227,10 +223,23 @@ form { display: flex; flex-direction: column; width: 100%; +} + +.padding { + display: flex; + flex-direction: column; + padding: 1rem; + gap: 1rem; +} + +.gap { + display: flex; + flex-direction: column; gap: 1rem; } .toggleSection { + width: 100%; max-width: 600px; margin-top: 1rem; border: 1px solid #e5e7eb; @@ -258,6 +267,7 @@ form { .toggleButton.active { background-color: #e5e7eb; + border-radius: 4px 4px 0 0; } .toggleButton.active { @@ -266,7 +276,7 @@ form { @media(max-width:800px) { header { - padding: 7px; + padding: 6px 16px; } .container { @@ -307,6 +317,14 @@ form { right: 0; background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0)); } + + .title { + text-align: center; + } + + .containerSection { + align-items: center; + } } @media(max-height:960px) {