IO/front-AT
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

agregue nuevas vistas

Browse Source
This commit is contained in:
Carlos Alberto Flores Reséndiz
2025-09-08 11:11:33 -06:00
parent 03efc1bd36
commit d1a8c0836d
8 changed files with 241 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ActivosMantenimiento/page.tsx
+118 -4
View File
@@ -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 (
<section className='containerSection'>
<h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
<section className="containerSection">
<h2 className="title"> EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
<div className="mainContainer">
{/* Toggle component for 'Asignar' and 'Liberar' tabs */}
<Toggle
defaultView="Equipos"
options={[
{
key: "Equipos",
label: "Equipos",
content: (
<>
<SearchUser />
<form className="containerForm">
<label className="label">Equipos disponibles</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Equipos disponibles --</option>
<option value="15">1 </option>
<option value="30">2 </option>
<option value="45">3 </option>
<option value="60">4 </option>
<option value="90">5 </option>
<option value="120">6 </option>
</select>
<button className="button buttonSearch" type="submit">
Asignar
</button>
</div>
</form>
</>
),
},
{
key: "Areas",
label: "Areas",
content: (
<>
<form className="containerForm">
<label className="label">Areas Disponibles</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Areas disponibles --</option>
<option value="15">PECERA </option>
<option value="30">JAULA </option>
<option value="45">HUACAL </option>
<option value="60">PCNET1 </option>
<option value="90">PCNET2 </option>
</select>
<div>
<label>
<input type="checkbox" /> Activo
</label>
<label>
<input type="checkbox" /> Mantenimiento
</label>
</div>
<button className="button buttonSearch" type="submit">
Actualizar
</button>
</div>
</form>
</>
),
},
{
key: "Mesas",
label: "Liberar mesa",
content: (
<>
<form className="containerForm">
<label className="label">Mesas Disponibles</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Mesas disponibles --</option>
<option value="15">1 </option>
<option value="30">4 </option>
<option value="45">7 </option>
<option value="60"> </option>
<option value="90">15 </option>
</select>
<div>
<label></label>
<label>
<input type="checkbox" /> Mantenimiento
</label>
</div>
<button className="button buttonSearch" type="submit">
Confirmar
</button>
</div>
</form>
</>
),
},
]}
/>
{/* This is the new component to display available tables */}
</div>
</section>
);
}
//IO
//IO
app/AsignacionEquipo/asignacionEquipos..css
+36
View File
@@ -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;
}
app/AsignacionEquipo/page.tsx
+47 -19
View File
@@ -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 (
<section className='containerSection'>
<h2 className='title'> ASIGNACION DE EQUIPOS </h2>
<section className="containerSection">
<h2 className="title"> ASIGNACION DE EQUIPOS </h2>
<Toggle
defaultView="AsigTime"
options={[
{
key: "AsigTime",
label: "Asignar tiempo",
content: <SearchUser />,
},
{
key: "CancelTime",
label: "Cancelar tiempo",
content:<></>,
},
]}
/>
<div className="mainContainer">
{/* Toggle component for 'Asignar' and 'Liberar' tabs */}
<Toggle
defaultView="Asignar"
options={[
{
key: "Asignar",
label: "Asignar tiempo",
content: (
<>
<SearchUser />
<form className="containerForm"></form>
</>
),
},
{
key: "Liberar",
label: "Canceñlar tiempo",
content: (
<>
<div className="checkbox-grid">
{" "}
<label>
<input type="checkbox" /> Mesa
</label>
<label>
<input type="checkbox" /> Cuenta
</label>
</div>
<SearchUser />
</>
),
},
]}
/>
{/* This is the new component to display available tables */}
</div>
</section>
);
}
//IO
app/InformacionEquipo/page.tsx
+1 -1
View File
@@ -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"
/>
<label className="label">Nombre</label>
app/Programas/page.tsx
+15 -4
View File
@@ -1,12 +1,23 @@
import SearchUser from "../Components/SearchUser/searchUser";
import "./programas.css";
export default function Page() {
return (
<section className='containerSection'>
<h2 className='title'> PROGRAMAS </h2>
<section className="containersection">
<h2 className="title"> PROGRAMAS </h2>
<label className="label">Programas</label>
<input
type="text"
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca "
/>
<div className="margin">
<button className="button buttonSearch">Insertar</button>
<button className="button buttonSearch">Cancelar</button>
</div>
</section>
);
}
//IO
//IO
app/Programas/programas.css
+9
View File
@@ -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;
}
package-lock.json
Generated
+11 -1
View File
@@ -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",
package.json
+4 -3
View File
@@ -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"
}
}