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

merge carlos

Browse Source
This commit is contained in:
Lino
2025-09-08 13:35:46 -04:00
parent 9d9bbad34e
commit 978b58c03c
5 changed files with 163 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ActivosMantenimiento/page.tsx
+114 -3
View File
@@ -5,10 +5,121 @@ import Toggle from "../Components/Toggle/Toggle";
// Assuming you will create this new component
export default function Page() {
return (
<section className='containerSection'>
<h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
const [tiempo, setTiempo] = useState("");
const [selectedTable, setSelectedTable] = useState(null);
return (
<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>
);
}
app/Components/BarNavigation/BarNavigation.css
+14 -1
View File
@@ -2,6 +2,7 @@
text-align: center;
background-color: rgb(1, 92, 184);
padding: 0 20px;
display: flex;
}
.barNavigation ul {
@@ -91,6 +92,7 @@
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
font-size: 1.5rem;
}
.containerLinks {
@@ -105,6 +107,11 @@
color: white;
width: 100%;
height: 100%;
font-size: 1.5rem;
}
thead,tbody{
font-size: 1.25rem;
}
@media (max-width: 800px) {
@@ -118,10 +125,12 @@
.menuToggle.center {
align-items: center;
margin: 0;
}
.barNavigation {
font-size: 15px;
display: block;
}
.barNavigation ul {
@@ -140,7 +149,7 @@
}
.barNavigation li:hover {
background-color: rgba(0, 61, 121, 1);
background-color: #d59f0f;
color: white;
border-radius: 0;
border: none;
@@ -152,5 +161,9 @@
position: relative;
background-color: rgba(0, 61, 121, 1);
}
thead,tbody{
font-size: 1rem;
}
}
app/Components/BarNavigation/BarNavigation.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function BarNavigation() {
return (
<nav className="barNavigation">
<div
className={`menuToggle ${openMenu ? 'center' : ''}`}
className={`menuToggle ${openMenu ? '' : ''}`}
onClick={toggleMenu}>
<div></div>
<div></div>
app/Components/Selection/Selection.css
+2
View File
@@ -21,6 +21,7 @@
border: 2px solid #5b8cc9;
background-color: #f0f0f0;
transition: all 0.3s ease;
padding: 5px;
}
.buttonSelection:hover {
@@ -36,6 +37,7 @@
.buttonLabel {
margin-top: 8px;
font-weight: bold;
font-size: 1.25rem;
color: #333;
text-align: center;
}
app/globals.css
+32 -13
View File
@@ -4,6 +4,17 @@
color: #333333;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
position: relative;
font-family: var(--font-poppins), sans-serif;
@@ -128,14 +139,27 @@ select {
flex: 1;
min-width: 200px;
max-width: 500px;
padding: 0.5rem;
padding: 1rem;
border: 1px solid #cfcfcf;
background-color: #fff;
border-radius: 4px;
font-size: 1rem;
font-size: 1.5rem;
color: black;
}
label {
font-size: 1.5rem;
font-weight: bold;
display: block;
}
button {
font-size: 1.5rem;
padding: 1rem 1.75rem;
border-radius: 4px;
cursor: pointer;
}
.groupInput {
display: flex;
flex-wrap: wrap;
@@ -145,13 +169,9 @@ select {
}
.button {
padding: 0.5rem 1.25rem;
font-size: 1rem;
font-weight: bold;
border: none;
color: #ffffff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
max-width: 240px;
}
@@ -182,6 +202,7 @@ select {
ul {
list-style: none;
font-size: 1.5rem;
}
.containerInput {
@@ -198,12 +219,6 @@ ul {
width: 100%;
}
.label {
font-size: 1rem;
font-weight: bold;
display: block;
}
a {
text-decoration: none;
}
@@ -227,7 +242,7 @@ a {
top: 0;
left: 0;
width: 100%;
font-size: 1.75rem;
font-size: 2.5rem;
font-weight: bold;
text-align: start;
border-bottom: 1px solid #cfcfcf;
@@ -289,6 +304,10 @@ form {
border-bottom: 1px solid rgb(1, 92, 184);
}
p{
font-size: 1.5rem;
}
@media (max-width: 800px) {
header {
padding: 6px 16px;