From d1a8c0836d46c92e3076fd726ef9741e36656152 Mon Sep 17 00:00:00 2001 From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx> Date: Mon, 8 Sep 2025 11:11:33 -0600 Subject: [PATCH] agregue nuevas vistas --- app/ActivosMantenimiento/page.tsx | 122 +++++++++++++++++++- app/AsignacionEquipo/asignacionEquipos..css | 36 ++++++ app/AsignacionEquipo/page.tsx | 66 ++++++++--- app/InformacionEquipo/page.tsx | 2 +- app/Programas/page.tsx | 19 ++- app/Programas/programas.css | 9 ++ package-lock.json | 12 +- package.json | 7 +- 8 files changed, 241 insertions(+), 32 deletions(-) create mode 100644 app/AsignacionEquipo/asignacionEquipos..css create mode 100644 app/Programas/programas.css diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx index e440840..b149055 100644 --- a/app/ActivosMantenimiento/page.tsx +++ b/app/ActivosMantenimiento/page.tsx @@ -1,12 +1,126 @@ +"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 ( -
-

ACTIVOS Y EN MANTENIMIENTO

+
+

EQUIPOS ACTIVOS Y EN MANTENIMIENTO

+
+ {/* Toggle component for 'Asignar' and 'Liberar' tabs */} + + + +
+ +
+ + +
+
+ + ), + }, + { + key: "Areas", + label: "Areas", + content: ( + <> +
+ +
+ +
+ + +
+ +
+
+ + ), + }, + { + key: "Mesas", + label: "Liberar mesa", + content: ( + <> +
+ +
+ +
+ + +
+ +
+
+ + ), + }, + ]} + /> + + {/* This is the new component to display available tables */} +
- ); } -//IO \ No newline at end of file +//IO diff --git a/app/AsignacionEquipo/asignacionEquipos..css b/app/AsignacionEquipo/asignacionEquipos..css new file mode 100644 index 0000000..dcd6a6c --- /dev/null +++ b/app/AsignacionEquipo/asignacionEquipos..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/AsignacionEquipo/page.tsx b/app/AsignacionEquipo/page.tsx index 73b22de..2e1cb1d 100644 --- a/app/AsignacionEquipo/page.tsx +++ b/app/AsignacionEquipo/page.tsx @@ -1,28 +1,56 @@ +"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 EQUIPOS

+
+

ASIGNACION DE EQUIPOS

- , - }, - { - key: "CancelTime", - label: "Cancelar tiempo", - content:<>, - }, - ]} - /> +
+ {/* Toggle component for 'Asignar' and 'Liberar' tabs */} + + + +
+ + ), + }, + { + key: "Liberar", + label: "Canceñlar tiempo", + content: ( + <> +
+ {" "} + + +
+ + + ), + }, + ]} + /> + + {/* This is the new component to display available tables */} +
- ); } -//IO \ No newline at end of file diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx index a5bb630..a8b6099 100644 --- a/app/InformacionEquipo/page.tsx +++ b/app/InformacionEquipo/page.tsx @@ -27,7 +27,7 @@ export default function Page() { type="text" //value={user} //onChange={(e) => setUser(e.target.value)} - placeholder="Coloca un número de cuenta..." + placeholder="Coloca" /> diff --git a/app/Programas/page.tsx b/app/Programas/page.tsx index 3824c7f..8ae3ff9 100644 --- a/app/Programas/page.tsx +++ b/app/Programas/page.tsx @@ -1,12 +1,23 @@ import SearchUser from "../Components/SearchUser/searchUser"; +import "./programas.css"; export default function Page() { return ( -
-

PROGRAMAS

+
+

PROGRAMAS

+ + setUser(e.target.value)} + placeholder="Coloca " + /> +
+ + +
- ); } -//IO \ No newline at end of file +//IO diff --git a/app/Programas/programas.css b/app/Programas/programas.css new file mode 100644 index 0000000..61fdc11 --- /dev/null +++ b/app/Programas/programas.css @@ -0,0 +1,9 @@ +.containersection { + width: 100%; /* Que use todo el ancho */ + display: block; /* Evita que Flex/Grid lo centre */ + text-align: left; /* Alinea el texto e inputs a la izquierda */ + margin: 20px 0 0 20px; /* Espacio arriba y a la izquierda */ +} +.margin { + margin: 10px 10px; +} diff --git a/package-lock.json b/package-lock.json index 1ba5ef9..7dea0f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "15.4.6", "react": "19.1.0", - "react-dom": "19.1.0" + "react-dom": "19.1.0", + "react-icons": "^5.5.0" }, "devDependencies": { "@types/node": "^20", @@ -840,6 +841,15 @@ "react": "^19.1.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/scheduler": { "version": "0.26.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", diff --git a/package.json b/package.json index 67bcd02..5cc1a44 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,15 @@ "lint": "next lint" }, "dependencies": { + "next": "15.4.6", "react": "19.1.0", "react-dom": "19.1.0", - "next": "15.4.6" + "react-icons": "^5.5.0" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^19", - "@types/react-dom": "^19" + "@types/react-dom": "^19", + "typescript": "^5" } }