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

Merge branch 'Carlos' of https://github.com/IO420/Nexus into Lino

Browse Source
This commit is contained in:
Lino
2025-09-08 13:34:09 -04:00
parent cf118d4cc2 d1a8c0836d
commit 9d9bbad34e
8 changed files with 128 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ActivosMantenimiento/page.tsx
+5 -191
View File
@@ -1,201 +1,15 @@
"use client";
import { useState } from "react";
import SearchUser from "../Components/SearchUser/searchUser";
import Toggle from "../Components/Toggle/Toggle";
import styles from "./Page.module.css"; // importamos el css
// Assuming you will create this new component
export default function Page() {
const [machines] = useState([
{
ubicacion: "1",
nombre: "PCD108",
plataforma: "Windows",
area: "PCNET1",
activo: true,
},
]);
const [tables] = useState([
{
mesa: "1",
activo: false,
},
]);
const [area, setArea] = useState("");
return (
<section className="containerSection">
<h2 className="title"> ACTIVOS Y EN MANTENIMIENTO</h2>
<section className='containerSection'>
<h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
<Toggle
defaultView="1"
options={[
{
key: "1",
label: "Equipos",
content: (
<>
<div className="groupInput">
<select
value={area}
onChange={(e) => setArea(e.target.value)}
>
<option value="">-- Selecciona un Area --</option>
<option value="ANEX03">ANEX03</option>
</select>
<button className="button buttonSearch" type="submit">
Buscar
</button>
</div>
<table className={styles.machineTable}>
<thead>
<tr>
<th>Ubicacion</th>
<th>Nombre</th>
<th>Plataforma</th>
<th>Area</th>
<th>Activo</th>
</tr>
</thead>
<tbody>
{machines.map((machine, index) => (
<tr key={index}>
<td>{machine.ubicacion}</td>
<td>{machine.nombre}</td>
<td>{machine.plataforma}</td>
<td>{machine.area}</td>
<td>
<input type="checkbox" />
</td>
</tr>
))}
</tbody>
</table>
</>
),
},
{
key: "2",
label: "Areas",
content: <></>,
},
{
key: "3",
label: "Mesas",
content: (
<>
<table className={styles.machineTable}>
<thead>
<tr>
<th>Mesa</th>
<th>Activo</th>
</tr>
</thead>
<tbody>
{tables.map((table, index) => (
<tr key={index}>
<td>{table.mesa}</td>
<td>
<input type="checkbox" />
</td>
</tr>
))}
</tbody>
</table>
</>
),
},
]}
/>
</section>
);
}
//IO
//
//
// .:--===--::.
// .-+*%%%%%%#%%%%%%%#+=:
// :=#%############%%%%%%@@@+
// .-*#######********##%%%%%%@%%
// .=######********+++**##%%%%%%@@:
// .=#####**********++++**##%%%%%%%@=
// -####**************+++**##%%%%%%%@+
// :*################***+***##%%%%%%%%%#
// =%#######%%%%%%%%##******###%%%%%%%%@%
// .+%###%%%%%%%%%%%%%##******##%%%%%%%%%%%
// .:::----:::.. .#%%%%%%@@@%%%%%%%%##******###%%%%%%%%%%#
// .-=+++++++++********+=-:. .#%%%%@@@@@@%%%%%%%##*******##%%%%%%%%%%%*
// .-+#*++++++***###%%#%########*+- .#%%%%@@@@@@@%%%%%%%#***+++**##%%%%%%%%%@%=
// :+##++===+++*#%%%%%%%%%%%%%%%%%%%%%+: .#%%%@@@@@@@@%%%%%%%%%#**+++**#%%%%%%%%%%%@:
// :*%#++=====+++*#%%%%%%%%%%%%%%@@%%%%@@@#=. +@@@@@@@@@@@@@%%%%%%%%#**++***##%%%%%%%%%%#
// #%#**++=====+++*##%%%%%%%%%%%%@@@@@%@@@@@%= ..:@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%%-
// *%##**+++===++++**##%%%%%%%%%%@@@@@@@@@@@@@#+*#%%@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%#
// +%%###**++===+++++*##%%%%%%%%%@@@@@@@@@@@@@%*+*%@@@@@@@@@@@@@@%%%%%%%%##**+++**##%%%%%%%%%-
// :%%%###**++===+++++*#%%%%%%%%%@@@@@@@@@@@@@%**%%@@@@@@@@@@@@@@%%%#####***++++**##%%%%%%%%*
// *%%%%##**+++++++++*#%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@@@@@@@@@@@@%%%%%##***++**##%%%%%%%%.
// .%%%%%##*+++==+++*#%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%=-=++++*#%@@@@@@@%%%%%%%%####%%%%%%%%%=
// +%%%%%#**++=+++*##%%%%%%%%%##%%%%@@@@@%%%%%%%%%#-=--=====++#%@@@@@@%%%%%%%%%%%%%%%%@@*
// .#%%%%%**++==++*##%%%%%#####%%%@@@%%%%%%%%%%%%%*------=======*%@@@@@%%%%%%%%%%%%%%@@#.
// :%%%%%**++==+++**########%%%@@@%%%%%%%%%%%%%%%*------:----====+%@@%%%%%%#%%@@@@@@@#.
// -%%%%#*++===++++****##%%%@@@@%%%%%%%%%%%%%%%%*-::--:-::--------*@%%%%%#####**%@@%.
// +%%%#*++===+++***##%%@@@@@@%%%%%%%%%%%%%%%%%*::::::::::::::-:::=%%%%%%###+. .=#:
// +%%%**+++++***#%%%@%@@@@@%%%%%%%%%%%%%%%%%%*:::::::::..:.::::.::%%%%###=
// +%%#*******#%%%%%%%@@@@@%###########%%%%%%+....................-%%%##=
// +%%######%%%@%#%%%@@@@@##################+ .. .. . *%##-
// -#%%%%%%%%@#*#%%%@@@@%##################= :%*:
// .*%%%%%@#:+*#%%%%@@%###################+ -.
// :+#%@+ .=##%%%%**###################+
// .: -#%%#-:####################+ .....
// .==.:#####################* ..........
// .###%##################* . ..............
// .#%##%%%%##########%#%%%# .........................
// *%%%%%%%%%%%%%%%%%%%%%%%# .........................
// =%%%%%%%%%%%%%%%%%%%%%%%%%...........................
// .%%%%%%%%%%%%%%%%%%%%%%%%%%............................
// +%%%%%%%%%%%%%%%%%%%%%%%%%%.........................:.:.
// %%%%%%%%%%%%%%%%%%%#*+++===::::::::.................:.::
// -%%%%%%%%%%%%%%*==::::::-=+=+=-:::::::::............:::::.
// *%%%%%%%%%%%%%%=:::.:-**+*******+:....:-::.......::::::::-
// #%%%%%%%%%%%%%%+::....-++=====+=.....::=.......:.:::::-:--
// .%%%%%%%%%%%%%%%*-::.....::--:::.....:-++....::.::::::----=
// .%%%%%%%%%%%%%%%%%*=:..............:-=++=...::::::::------=
// :%%%%%%%%%%%%%%%%%%%%*-.........::-+++++=:::::::::-----=-=:
// .+%%%%%%%%%%%%%%%%%%#=-=-:::::-----:-=++-:::::::-:-::-==-.
// :#%%%%%%%%%%%%%#=. :------------ :-----------::::.
// :*%%%%%%%%%%%= .--------------. .--------=-.
// .+%%#%%%%%%# :+#::::--------:*%*=-----==--:
// --#%%%%%%#%@=:::::::::::::=@%#*==+*+-:. .=+=:
// .:-=+++++=- .-*%%%%%%#::....:::::::.-@@%%%%%%%%%%#*+-.=%%%%%%+.
// .-*%#*+=--==*%%++*#%%%%%%%%@@-:...........:+@@@%%%%%%###**##%%%*--=*#%=.
// .#%#==:. :=*#%%##****###%%%%@@*::::.....::::*@@@%%%%%###########%%*=.:=##:
// -%%+-.:=#%%%#####******##%%@@@@-:::::.::::::#@@@%%%%###########%%%%%%=.=%%.
// :. .#%#*+#%%%###############%%@@@@*::::::::::::@@@@%%%%%%%%%%%%%%####%%%%*.##.
// :+*#%%+*%%%%%%%%%%%%%%%%%%%%%%@@@@%::::..:::::=@@@@@%%%%%%%%%%*++***+=-=+#-*+:.
// -#=#%%%#*+======+++==#%%%%%@%@@@=:....:::::+@@@%@%%%%%%%%#+#%%%%%%%%#+=+%#:
// ---+++++*##%%%%%%+:=#%%%%%%%%@@@*:....:...:-@@@@%%%%%%%%%#+%%%%%%%%%%%%%%%
// .#%%%%%%%%%%%%%+:+%%%%%%%%%%%@@@#:........::+@@@%%%%%%%%%%#*%%%%%%%%%%%%%#
// -%%%%%%%%%%%#:=#%%%%%%%%%%%%@@@=:.........::#@@%%%%%%%%%%%%+#%%%%%%%%%%%=
// *%%%%%%%%%*:*%%%%%%%%%%%%%%@@%:...........:=@@@%%%%%%%%%%%%#+#%%%%%%%%#.
// .%%%%%@%%+:#%###%%%%%%%%%%%@@#:...........::#@@%%%%%%#######%*+#@%%%@@=
// .#%%@@%%*-#%##########%%%%%@@%:.............+@@%%#############%+=%@%%@%
// .+%@%%%-#%##############%%@@@:.............-@@%###############%#-+@%#:
// :#%%*=%%###############%@@@+....::.:.....:@@%################%%+=+.
// -#=*%%%##%%%%%%%##%%%%@@@%....::::.....:@@%%###%%%%%%%%##%%%%%#-.
// -+%%%%%%%%%%%%%%%%%%%@@@*...::::.....:@@%%%%%%%%%%%%%%%%%%%%%%=
// ::#%%%%%%%%%%%%%%%%%%%@@@+..:::::....=@@%%%%%%%%%%%%%%%%%%%%%#+.
// .::+%%%%%%%%%%%%%%%%%%@@@@+:::--:....#@@%%%%%%%%%%%%%%%#*+-:....
// .:-=*%%%%%%%%%%%%%%%%%@@@@+::--::..+@@@%%%%%%%%%%%%#+:.
// ::+#%%%%%%%%%%%%%%%@@@@+----::=@@@%%%%%%%%%%%*:
// .:+*%%%%%%%%%%%%%@@@@+----+@@@%%%%%%%%%%+.
// .-+#%%%%%%%%%%%@@@@===*@@@%%%%%%%%%#:
// .-=*%%%%%%%%%@@@@#=#@@@@%%%%%%%%*.
// .-+*%%%%%%%%@@@@#@@@@%%%%%%%@+.
// .=+#%%@%%%@@@@@@@@%%%%@@@%-
// :+#%@@@@@@@@@@@@@@@@@@#:
// .=#@@@@@@@@@@@@@@@@%=
// :+%@@@@@@@@@@@@%+.
// .:-=++**###+.
//
// By Tyrannuss
//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
@@ -26,7 +26,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"
}
}