From 03efc1bd361c77d2c42919f745dc413f195cb786 Mon Sep 17 00:00:00 2001 From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx> Date: Fri, 5 Sep 2025 12:11:32 -0600 Subject: [PATCH] =?UTF-8?q?a=C3=B1adi=20nuevas=20=20vistas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/AsignacionMesas/asignacionmesas.css | 36 +++ app/AsignacionMesas/page.tsx | 106 ++++---- app/InformacionEquipo/informacionequipo.css | 86 ++++++ app/InformacionEquipo/page.tsx | 280 ++++++++++++++++---- app/Mensajes/mensaje.css | 94 +++++++ app/Mensajes/page.tsx | 120 ++++++++- app/globals.css | 22 +- 7 files changed, 630 insertions(+), 114 deletions(-) create mode 100644 app/AsignacionMesas/asignacionmesas.css create mode 100644 app/InformacionEquipo/informacionequipo.css create mode 100644 app/Mensajes/mensaje.css diff --git a/app/AsignacionMesas/asignacionmesas.css b/app/AsignacionMesas/asignacionmesas.css new file mode 100644 index 0000000..dcd6a6c --- /dev/null +++ b/app/AsignacionMesas/asignacionmesas.css @@ -0,0 +1,36 @@ +/* Add these new styles to your CSS file */ +.mainContainer { + display: flex; + justify-content: space-between; + gap: 20px; /* Adjust the spacing as needed */ + flex-wrap: wrap; /* Allows components to wrap on smaller screens */ +} + +.availableTablesContainer { + /* You can add specific styles for the table list here */ + width: 45%; /* Adjust width to fit the layout */ + background-color: #f9f9f9; + border-radius: 8px; + padding: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.tableList { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; /* Or use flex-wrap to make it a grid */ + height: 200px; /* Or a fixed height with overflow */ + overflow-y: auto; +} + +.tableList li { + padding: 8px; + border-bottom: 1px solid #ddd; + cursor: pointer; + transition: background-color 0.2s; +} + +.tableList li:hover { + background-color: #f0f0f0; +} diff --git a/app/AsignacionMesas/page.tsx b/app/AsignacionMesas/page.tsx index 336fcfa..23259b5 100644 --- a/app/AsignacionMesas/page.tsx +++ b/app/AsignacionMesas/page.tsx @@ -1,59 +1,75 @@ -'use client' +"use client"; 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(""); + const [selectedTable, setSelectedTable] = useState(null); return ( -
-

ASIGNACION DE MESAS

+
+

ASIGNACION DE MESAS

- - +
+ {/* Toggle component for 'Asignar' and 'Liberar' tabs */} + + -
- - -
- - -
-
- , - }, - { - key: "Liberarmesa", - label: "Liberar mesa", - content: <>, - }, - ]} - /> +
+ +
+ + +
+
+ + ), + }, + { + key: "Liberar", + label: "Liberar mesa", + content: ( + <> +
+ {" "} + + +
+ + + ), + }, + ]} + /> + {/* This is the new component to display available tables */} +
- ); } -//IO \ No newline at end of file diff --git a/app/InformacionEquipo/informacionequipo.css b/app/InformacionEquipo/informacionequipo.css new file mode 100644 index 0000000..1c9ae13 --- /dev/null +++ b/app/InformacionEquipo/informacionequipo.css @@ -0,0 +1,86 @@ +.cuadro { + display: flex; + padding-left: 10px; + margin: 10px 0; + width: 500px; + align-items: start; + justify-content: start; +} + +.margin { + margin: 10px 0; + display: flex; + gap: 50px; +} +.conteinercuadro { + display: flex; + flex-direction: column; + align-items: start; +} +.form-container label { + font-size: 14px; + margin-right: 10px; /* espacio entre "Salas" y la caja */ + display: inline-block; /* lo hace estar en la misma línea */ + vertical-align: middle; /* alinea verticalmente con el select */ +} + +.form-container select { + font-size: 13px; + padding: 4px 8px; + border: 1px solid #ccc; + border-radius: 6px; + outline: none; + vertical-align: middle; /* asegura alineación */ + transition: all 0.2s ease-in-out; +} + +.form-container select:hover { + border-color: #007bff; + box-shadow: 0px 0px 0px rgba(0, 123, 255, 0.3); +} + +.form-container select:focus { + border-color: #c2c3c5; /* azul al enfocar */ + box-shadow: 0 0 4px rgba(59, 130, 246, 0.4); + outline: none; +} + +.checkbox-grid { + display: grid; + grid-template-columns: repeat(3, 240px); /* ancho fijo por columna */ + gap: 6px 20px; + margin-bottom: 20px; +} + +.checkbox-grid label { + display: flex; + align-items: center; + font-size: 13px; + cursor: pointer; + white-space: nowrap; +} + +.checkbox-grid input[type="checkbox"] { + all: unset; /* elimina TODOS los estilos del navegador */ + appearance: checkbox; /* lo vuelve a mostrar como checkbox */ + margin: 0; + margin-right: 1px; /* espacio mínimo entre el box y el texto */ +} +input[type="checkbox"] { + accent-color: #2563eb; +} + +.btn { + display: inline-block; + background: #2563eb; + color: white; + border: none; + padding: 8px 16px; + border-radius: 6px; + cursor: pointer; + transition: 0.2s ease; +} + +.btn:hover { + background: #1d4ed8; +} diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx index 12401c1..a5bb630 100644 --- a/app/InformacionEquipo/page.tsx +++ b/app/InformacionEquipo/page.tsx @@ -1,9 +1,10 @@ import Toggle from "../Components/Toggle/Toggle"; +import "./informacionequipo.css"; export default function Page() { return ( -
-

INFORMACION DE EQUIPOS

+
+

INFORMACION DE EQUIPOS

- - setUser(e.target.value)} - placeholder='Coloca un número de cuenta...' - /> + content: ( +
+
+ {" "} + + +
+ + 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 ' - /> + + 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: - <> - - - , + content: ( +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ ), }, { key: "3", label: "Programa por sala", - content: - <> + content: ( +
+
+ + - , +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ ), }, ]} />
- ); } -//IO \ No newline at end of file +//IO diff --git a/app/Mensajes/mensaje.css b/app/Mensajes/mensaje.css new file mode 100644 index 0000000..648daf6 --- /dev/null +++ b/app/Mensajes/mensaje.css @@ -0,0 +1,94 @@ +.card { + background: #fff; + padding: 20px 30px; + border-radius: 12px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); + width: 700px; + margin: 40px auto; + font-family: Arial, sans-serif; +} + +/* Título */ +.cardTitle { + font-size: 18px; + margin-bottom: 15px; + font-weight: 600; + color: #333; +} + +/* Tabs */ +.tabs { + display: flex; + margin-bottom: 20px; + border-bottom: 1px solid #ddd; +} + +.tab { + flex: 1; + background: none; + border: none; + padding: 10px; + font-size: 14px; + cursor: pointer; + transition: 0.3s; + color: #333; +} + +.active { + font-weight: 600; + color: #0056d2; + border-bottom: 2px solid #0056d2; +} + +/* Formulario */ +.formGroup { + display: flex; + flex-direction: column; + margin-bottom: 15px; +} + +.formGroup label { + font-size: 14px; + margin-bottom: 6px; + color: #444; + font-weight: 500; +} + +.formGroup select, +.formGroup input { + padding: 8px 10px; + border: 1px solid #ddd; + border-radius: 6px; + font-size: 14px; + transition: border 0.3s, box-shadow 0.3s; +} + +.formGroup select:focus, +.formGroup input:focus { + border-color: #0056d2; + box-shadow: 0px 0px 4px rgba(0, 86, 210, 0.3); + outline: none; +} + +/* Botones */ +.actions { + text-align: right; +} + +.btn { + padding: 8px 16px; + border-radius: 6px; + font-size: 14px; + cursor: pointer; + border: none; + transition: 0.3s; +} + +.btnPrimary { + background: #0056d2; + color: white; +} + +.btnPrimary:hover { + background: #0041a8; +} diff --git a/app/Mensajes/page.tsx b/app/Mensajes/page.tsx index 4eb2f9c..bdd61ed 100644 --- a/app/Mensajes/page.tsx +++ b/app/Mensajes/page.tsx @@ -1,11 +1,123 @@ +"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(""); // <-- AQUÍ defines el estado return ( -
-

MENSAJES

+
+

Enviar mensaje

+ +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + +
+
+ + ), + }, + + { + key: "CancelTime", + label: "Sala", + content: ( + <> +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + +
+
+ + ), + }, + ]} + />
- ); } -//IO \ No newline at end of file +//IO diff --git a/app/globals.css b/app/globals.css index dea32eb..1aca8db 100644 --- a/app/globals.css +++ b/app/globals.css @@ -90,7 +90,7 @@ footer { flex-direction: column; } -.containerForm{ +.containerForm { width: 100%; max-width: 450px; } @@ -101,7 +101,7 @@ footer { right: 0; width: 400px; height: 615px; - background-image: url('/rock.jpg'); + background-image: url("/rock.jpg"); background-size: cover; background-position: center; overflow: hidden; @@ -110,7 +110,7 @@ footer { } .img::after { - content: ''; + content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0)); @@ -136,7 +136,6 @@ select { justify-content: space-between; } - .button { padding: 0.5rem 1.25rem; font-size: 1rem; @@ -165,7 +164,6 @@ select { background-color: #15803d; } - .absoluteButton { position: absolute; bottom: 1rem; @@ -184,7 +182,7 @@ ul { margin-bottom: 10px; } -.label{ +.label { font-size: 1rem; font-weight: bold; display: block; @@ -204,7 +202,7 @@ a { max-width: 400px; } -.information ul{ +.information ul { padding: 1rem; } @@ -274,7 +272,7 @@ form { background-color: #f9fafb; } -@media(max-width:800px) { +@media (max-width: 800px) { header { padding: 6px 16px; } @@ -300,7 +298,7 @@ form { .img::before, .img::after { - content: ''; + content: ""; position: absolute; top: 0; bottom: 0; @@ -327,8 +325,8 @@ form { } } -@media(max-height:960px) { +@media (max-height: 960px) { .container { - margin: 0 + margin: 0; } -} \ No newline at end of file +}