pull lino
This commit is contained in:
jls846
@@ -0,0 +1 @@
|
||||
NEXT_PUBLIC_API_URL=
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie"; // Para leer cookies en el cliente
|
||||
import "../../styles/layout/agregarEquipo.scss";
|
||||
import Cookies from "js-cookie";
|
||||
import toast from "react-hot-toast";
|
||||
import "../../styles/layout/agregarEquipo.scss";
|
||||
|
||||
export default function page() {
|
||||
export default function Page() {
|
||||
const [formData, setFormData] = useState({
|
||||
serie: "",
|
||||
marca: "",
|
||||
@@ -31,23 +31,15 @@ export default function page() {
|
||||
const [procesadores, setProcesadores] = useState<string[]>([]);
|
||||
|
||||
const [suggestions, setSuggestions] = useState({
|
||||
marca: [] as string[],
|
||||
modelo: [] as string[],
|
||||
estado: [] as string[],
|
||||
adscripcion: [] as string[],
|
||||
tipoEquipo: [] as string[],
|
||||
sistemaOperativo: [] as string[],
|
||||
procesador: [] as string[],
|
||||
tipoUso: [] as string[],
|
||||
});
|
||||
|
||||
const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
|
||||
|
||||
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const token = Cookies.get("token"); // Token desde cookies
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
try {
|
||||
@@ -76,11 +68,11 @@ export default function page() {
|
||||
setTiposEquipo(tiposEquipoRes.data);
|
||||
setSistemasOperativos(sistemasOperativosRes.data);
|
||||
setProcesadores(procesadoresRes.data);
|
||||
} catch (err: any) {
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
if (err.response) {
|
||||
toast.error(
|
||||
err.response.data?.message || "No se pudo conectar con el api"
|
||||
err.response.data?.message || "No se pudo conectar con el API"
|
||||
);
|
||||
} else if (err.request) {
|
||||
toast.error("No se pudo conectar con el servidor");
|
||||
@@ -96,21 +88,8 @@ export default function page() {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (
|
||||
field: string,
|
||||
value: string,
|
||||
options: string[]
|
||||
) => {
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
|
||||
if (value.length >= 3) {
|
||||
const filtered = options.filter((opt) =>
|
||||
opt.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
setSuggestions((prev) => ({ ...prev, [field]: filtered }));
|
||||
} else {
|
||||
setSuggestions((prev) => ({ ...prev, [field]: [] }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectSuggestion = (field: string, value: string) => {
|
||||
@@ -118,25 +97,16 @@ export default function page() {
|
||||
setSuggestions((prev) => ({ ...prev, [field]: [] }));
|
||||
};
|
||||
|
||||
const handleGuardar = () => {
|
||||
console.log("Formulario enviado:", formData);
|
||||
alert("Equipo guardado (vista solo)");
|
||||
const handleGuardar = async () => {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
await axios.post(`${api_url}/equipos/crear`, formData, { headers });
|
||||
toast.success("Equipo guardado");
|
||||
};
|
||||
|
||||
const handleCancelar = () => {
|
||||
alert("Acción cancelada");
|
||||
};
|
||||
|
||||
const handleChange = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => {
|
||||
let updated = { ...prev, [name]: value };
|
||||
if (value === "Impresora") {
|
||||
updated.sistemaOperativo = "";
|
||||
updated.procesador = "";
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
toast.success("Acción cancelada");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -152,34 +122,23 @@ export default function page() {
|
||||
type="text"
|
||||
placeholder="Ingresa serie"
|
||||
value={formData.serie}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, serie: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleInputChange("serie", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Marca</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ingresa marca"
|
||||
<select
|
||||
value={formData.marca}
|
||||
onChange={(e) =>
|
||||
handleInputChange("marca", e.target.value, marcas)
|
||||
}
|
||||
/>
|
||||
{suggestions.marca.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.marca.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() => handleSelectSuggestion("marca", s)}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
onChange={(e) => handleInputChange("marca", e.target.value)}
|
||||
>
|
||||
<option value="">Selecciona una marca</option>
|
||||
{marcas.map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
@@ -188,58 +147,40 @@ export default function page() {
|
||||
type="text"
|
||||
placeholder="Ingresa modelo"
|
||||
value={formData.modelo}
|
||||
onChange={(e) =>
|
||||
handleInputChange("modelo", e.target.value, [])
|
||||
}
|
||||
onChange={(e) => handleInputChange("modelo", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Tipo de equipo</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Selecciona tipo"
|
||||
<select
|
||||
value={formData.tipoEquipo}
|
||||
onChange={(e) =>
|
||||
handleInputChange("tipoEquipo", e.target.value, tiposEquipo)
|
||||
handleInputChange("tipoEquipo", e.target.value)
|
||||
}
|
||||
/>
|
||||
{suggestions.tipoEquipo.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.tipoEquipo.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() => handleSelectSuggestion("tipoEquipo", s)}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
>
|
||||
<option value="">Selecciona tipo de equipo</option>
|
||||
{tiposEquipo.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Estado</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Selecciona estado"
|
||||
<select
|
||||
value={formData.estado}
|
||||
onChange={(e) =>
|
||||
handleInputChange("estado", e.target.value, estados)
|
||||
}
|
||||
/>
|
||||
{suggestions.estado.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.estado.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() => handleSelectSuggestion("estado", s)}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
onChange={(e) => handleInputChange("estado", e.target.value)}
|
||||
>
|
||||
<option value="">Selecciona estado</option>
|
||||
{estados.map((e) => (
|
||||
<option key={e} value={e}>
|
||||
{e}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -247,88 +188,53 @@ export default function page() {
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Tipo uso</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ingresa tipo de uso"
|
||||
<select
|
||||
value={formData.tipoUso}
|
||||
onChange={(e) =>
|
||||
handleInputChange("tipoUso", e.target.value, tiposUso)
|
||||
}
|
||||
/>
|
||||
{suggestions.tipoUso.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.tipoUso.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() => handleSelectSuggestion("tipoUso", s)}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
onChange={(e) => handleInputChange("tipoUso", e.target.value)}
|
||||
>
|
||||
<option value="">Selecciona tipo de uso</option>
|
||||
{tiposUso.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{mostrarCamposComputadora && (
|
||||
<>
|
||||
<div className="formGroup">
|
||||
<label>Procesador</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Selecciona procesador"
|
||||
<select
|
||||
value={formData.procesador}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"procesador",
|
||||
e.target.value,
|
||||
procesadores
|
||||
)
|
||||
handleInputChange("procesador", e.target.value)
|
||||
}
|
||||
/>
|
||||
{suggestions.procesador.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.procesador.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() =>
|
||||
handleSelectSuggestion("procesador", s)
|
||||
}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
>
|
||||
<option value="">Selecciona procesador</option>
|
||||
{procesadores.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Sistema operativo</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Selecciona sistema operativo"
|
||||
<select
|
||||
value={formData.sistemaOperativo}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"sistemaOperativo",
|
||||
e.target.value,
|
||||
sistemasOperativos
|
||||
)
|
||||
handleInputChange("sistemaOperativo", e.target.value)
|
||||
}
|
||||
/>
|
||||
{suggestions.sistemaOperativo.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.sistemaOperativo.map((s) => (
|
||||
<li
|
||||
key={s}
|
||||
onClick={() =>
|
||||
handleSelectSuggestion("sistemaOperativo", s)
|
||||
}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
>
|
||||
<option value="">Selecciona sistema operativo</option>
|
||||
{sistemasOperativos.map((so) => (
|
||||
<option key={so} value={so}>
|
||||
{so}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -340,11 +246,7 @@ export default function page() {
|
||||
placeholder="Selecciona adscripción"
|
||||
value={formData.adscripcion}
|
||||
onChange={(e) =>
|
||||
handleInputChange(
|
||||
"adscripcion",
|
||||
e.target.value,
|
||||
adscripciones
|
||||
)
|
||||
handleInputChange("adscripcion", e.target.value)
|
||||
}
|
||||
/>
|
||||
{suggestions.adscripcion.length > 0 && (
|
||||
@@ -360,18 +262,6 @@ export default function page() {
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Responsable</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Selecciona responsable"
|
||||
value={formData.responsable}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, responsable: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna Derecha */}
|
||||
@@ -381,25 +271,25 @@ export default function page() {
|
||||
<textarea
|
||||
placeholder="Ingresa lugar"
|
||||
value={formData.lugar}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, lugar: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleInputChange("lugar", e.target.value)}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Observaciones</label>
|
||||
<textarea
|
||||
placeholder="Ingresa observaciones"
|
||||
value={formData.observaciones}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, observaciones: e.target.value })
|
||||
handleInputChange("observaciones", e.target.value)
|
||||
}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formActions">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -1,247 +1,11 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import "../../styles/layout/agregarEquipo.scss";
|
||||
import "./editar.css";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
export default function Home() {
|
||||
const searchParams = useSearchParams();
|
||||
const equipoId = searchParams.get("equipoId"); // 🔹 Obtener ID del equipo
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
serie: "",
|
||||
marca: "",
|
||||
modelo: "",
|
||||
tipoEquipo: "", // Nuevo campo
|
||||
estado: "",
|
||||
sistemaOperativo: "",
|
||||
procesador: "",
|
||||
tipoUso: "",
|
||||
observaciones: "",
|
||||
adscripcion: "",
|
||||
lugar: "",
|
||||
responsable: "",
|
||||
});
|
||||
const Editar = dynamic(() => import("@/components/Editar"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
// Si viene un equipoId, precargarlo
|
||||
useEffect(() => {
|
||||
if (equipoId) {
|
||||
setFormData((prev) => ({ ...prev, serie: equipoId }));
|
||||
}
|
||||
}, [equipoId]);
|
||||
|
||||
// Estado para saber si mostramos los campos de SO y Procesador
|
||||
const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
|
||||
|
||||
const handleGuardar = () => {
|
||||
console.log("Formulario enviado:", formData);
|
||||
alert(`Equipo ${formData.serie} guardado (vista solo)`);
|
||||
};
|
||||
|
||||
const handleCancelar = () => {
|
||||
alert("Acción cancelada");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="agregarEquipoContainer">
|
||||
<div className="innerContainer">
|
||||
<h2 className="information">
|
||||
{equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
|
||||
<span>Inventario:</span>
|
||||
<span>Fecha de censo:</span>
|
||||
</h2>
|
||||
|
||||
<form className="equipoForm">
|
||||
{/* Columna 1 */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Serie</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ingresa serie"
|
||||
value={formData.serie}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, serie: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="formGroup">
|
||||
<label>Marca</label>
|
||||
<select
|
||||
value={formData.marca}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, marca: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Ingresa marca</option>
|
||||
<option value="Dell">Dell</option>
|
||||
<option value="HP">HP</option>
|
||||
<option value="Lenovo">Lenovo</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="formGroup">
|
||||
<label>Modelo</label>
|
||||
<select
|
||||
value={formData.modelo}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, modelo: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Ingresa modelo</option>
|
||||
<option value="XPS 15">XPS 15</option>
|
||||
<option value="EliteBook">EliteBook</option>
|
||||
<option value="ThinkPad">ThinkPad</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="formGroup">
|
||||
<label>Estado</label>
|
||||
<select
|
||||
value={formData.estado}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, estado: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona estado</option>
|
||||
<option value="Activado">Activado</option>
|
||||
<option value="Desactivado">Desactivado</option>
|
||||
<option value="En reparación">En reparación</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Tipo uso</label>
|
||||
<select
|
||||
value={formData.tipoUso}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, tipoUso: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Ingresa tipo de uso</option>
|
||||
<option value="administrativo">administrativo</option>
|
||||
<option value="educacional">educacional</option>
|
||||
<option value="laboratorio">laboratorio</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="column">
|
||||
{mostrarCamposComputadora && (
|
||||
<>
|
||||
<div className="formGroup">
|
||||
<label>Procesador</label>
|
||||
<select
|
||||
value={formData.procesador}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, procesador: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona procesador</option>
|
||||
<option value="Ryzen 3">Ryzen 3</option>
|
||||
<option value="Intel i5">Intel i5</option>
|
||||
<option value="AMD Ryzen 5">AMD Ryzen 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Sistema operativo</label>
|
||||
<select
|
||||
value={formData.sistemaOperativo}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
sistemaOperativo: e.target.value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona sistema operativo</option>
|
||||
<option value="Windows 10">Windows 10</option>
|
||||
<option value="Windows 11">Windows 11</option>
|
||||
<option value="Linux">Linux</option>
|
||||
<option value="macOS">macOS</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Adscripción</label>
|
||||
<select
|
||||
value={formData.adscripcion}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, adscripcion: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona adscripción</option>
|
||||
<option value="Cedetec">Cedetec</option>
|
||||
<option value="Laboratorio">Laboratorio</option>
|
||||
<option value="Administración">Administración</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Responsable</label>
|
||||
<select
|
||||
value={formData.responsable}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, responsable: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona responsable</option>
|
||||
<option value="Lino">Lino</option>
|
||||
<option value="Ana">Ana</option>
|
||||
<option value="Carlos">Carlos</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Lugar</label>
|
||||
<textarea
|
||||
placeholder="Ingresa lugar"
|
||||
value={formData.lugar}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, lugar: e.target.value })
|
||||
}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Observaciones</label>
|
||||
<textarea
|
||||
placeholder="Ingresa observaciones"
|
||||
value={formData.observaciones}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, observaciones: e.target.value })
|
||||
}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formActions">
|
||||
<button
|
||||
type="button"
|
||||
className="btnGuardar"
|
||||
onClick={handleGuardar}
|
||||
>
|
||||
Guardar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btnCancelar"
|
||||
onClick={handleCancelar}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default function Page() {
|
||||
return <Editar />;
|
||||
}
|
||||
|
||||
@@ -2,51 +2,62 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import "../../styles/layout/escaner.scss"; // Importación global
|
||||
import "../../styles/layout/escaner.scss";
|
||||
import BarcodeScanner from "@/components/BarcodeScanner";
|
||||
import axios from "axios";
|
||||
import Image from "next/image";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export default function Dashboard() {
|
||||
const router = useRouter();
|
||||
const [isScanning, setIsScanning] = useState(false);
|
||||
const [equipos, setEquipos] = useState();
|
||||
const [search, setSearch] = useState("");
|
||||
const [lastScan, setLastScan] = useState<string | null>(null);
|
||||
|
||||
interface equipo {
|
||||
id: number;
|
||||
}
|
||||
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
||||
|
||||
const buscarEquipo = async () => {
|
||||
const encontrado: equipo = await axios.get("");
|
||||
if (!search) return toast.error("Ingresa un número de inventario");
|
||||
|
||||
if (encontrado) {
|
||||
// Redirige a la vista de edición con el ID del equipo
|
||||
router.push(`/Editar?equipoId=${encontrado.id}`);
|
||||
} else {
|
||||
alert("Equipo no encontrado.");
|
||||
try {
|
||||
const { data } = await axios.get(`${api_url}/equipos/${search}`);
|
||||
|
||||
if (data) {
|
||||
router.push(`/Editar?equipoId=${data.id}`);
|
||||
} else {
|
||||
toast.error("Equipo no encontrado");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Equipo no encontrado");
|
||||
}
|
||||
};
|
||||
|
||||
const handleScan = async (code: string) => {
|
||||
setLastScan(code);
|
||||
setIsScanning(false);
|
||||
|
||||
const encontrado: equipo = await axios.get("");
|
||||
if (!code) return;
|
||||
|
||||
if (encontrado) {
|
||||
router.push(`/Editar?equipoId=${encontrado.id}`);
|
||||
} else {
|
||||
try {
|
||||
const { data } = await axios.get(`${api_url}/equipos/${code}`);
|
||||
|
||||
if (data) {
|
||||
router.push(`/Editar?equipoId=${data.id}`);
|
||||
} else {
|
||||
router.push(`/AgregarEquipo?equipoId=${code}`);
|
||||
}
|
||||
} catch (error) {
|
||||
router.push(`/AgregarEquipo?equipoId=${code}`);
|
||||
}
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Cerrar sesión
|
||||
const cerrarSesion = () => {
|
||||
localStorage.removeItem("loggedIn");
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
=======
|
||||
>>>>>>> c46e561af1c3cf0aa2835fee6eec718099d403cd
|
||||
return (
|
||||
<div className="dashboardContainer">
|
||||
<main className="scanView">
|
||||
@@ -56,7 +67,12 @@ export default function Dashboard() {
|
||||
<BarcodeScanner onScan={handleScan} />
|
||||
) : (
|
||||
<div className="scannerFrame">
|
||||
<img src="/barcode_scanner.png" alt="Marco de escaneo" />
|
||||
<Image
|
||||
src="/barcode_scanner.png"
|
||||
alt="Marco de escaneo"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -70,11 +86,10 @@ export default function Dashboard() {
|
||||
className="scanButton"
|
||||
onClick={() => setIsScanning(!isScanning)}
|
||||
>
|
||||
<img src="/photo_camera.png" alt="cámara" />
|
||||
<Image src="/photo_camera.png" alt="cámara" width={20} height={20} />
|
||||
{isScanning ? "Cancelar" : "Escanear"}
|
||||
</button>
|
||||
|
||||
{/* 🔍 Búsqueda manual */}
|
||||
<div className="searchBox">
|
||||
<input
|
||||
type="text"
|
||||
@@ -83,7 +98,7 @@ export default function Dashboard() {
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<button onClick={buscarEquipo} className="searchButton">
|
||||
<img src="/search.png" alt="Buscar" />
|
||||
<Image src="/search.png" alt="Buscar" width={50} height={50} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BarcodeScanner from "../../components/BarcodeScanner";
|
||||
import "../styles/components/dashboard.scss";
|
||||
|
||||
type Equipo = {
|
||||
id: string;
|
||||
nombre: string;
|
||||
estado: string;
|
||||
};
|
||||
|
||||
const initialEquipos: Equipo[] = [
|
||||
{ id: "001", nombre: "PC Aula 1", estado: "Disponible" },
|
||||
{ id: "002", nombre: "PC Aula 2", estado: "En reparación" },
|
||||
];
|
||||
|
||||
export default function Dashboard() {
|
||||
const router = useRouter();
|
||||
const [equipos, setEquipos] = useState<Equipo[]>(initialEquipos);
|
||||
const [search, setSearch] = useState("");
|
||||
const [lastScan, setLastScan] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const loggedIn = localStorage.getItem("loggedIn");
|
||||
if (!loggedIn) router.push("/");
|
||||
}, [router]);
|
||||
|
||||
const buscarEquipo = () => {
|
||||
const resultado = equipos.filter(
|
||||
e => e.id.includes(search) || e.nombre.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
setEquipos(resultado);
|
||||
};
|
||||
|
||||
const cerrarSesion = () => {
|
||||
localStorage.removeItem("loggedIn");
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
const handleScan = (code: string) => {
|
||||
setLastScan(code);
|
||||
|
||||
const encontrado = equipos.find(e => e.id === code);
|
||||
if (encontrado) {
|
||||
alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
|
||||
} else {
|
||||
const nombre = prompt("Equipo no registrado. Ingresa el nombre:");
|
||||
if (nombre) {
|
||||
setEquipos([...equipos, { id: code, nombre, estado: "Disponible" }]);
|
||||
alert("Equipo agregado al inventario");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dashboard-container">
|
||||
<div className="header">
|
||||
<h2>Dashboard Inventario Escolar</h2>
|
||||
<button onClick={cerrarSesion}>Cerrar sesión</button>
|
||||
</div>
|
||||
|
||||
<div className="search-section">
|
||||
<h3>Buscar equipo</h3>
|
||||
<div style={{ display: "flex", marginTop: "10px" }}>
|
||||
<input type="text" placeholder="ID o nombre" value={search} onChange={(e) => setSearch(e.target.value)} />
|
||||
<button onClick={buscarEquipo}>Buscar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scanner-section">
|
||||
<h3>Escanear código de barras</h3>
|
||||
<BarcodeScanner onDetected={handleScan} />
|
||||
{lastScan && <p>Último código escaneado: <strong>{lastScan}</strong></p>}
|
||||
</div>
|
||||
|
||||
<div className="equipos-section">
|
||||
<h3>Equipos</h3>
|
||||
<ul>
|
||||
{equipos.map((e) => (
|
||||
<li key={e.id}>
|
||||
<span>{e.id} - {e.nombre}</span>
|
||||
<span className={e.estado === "Disponible" ? "estado-disponible" : "estado-reparacion"}>{e.estado}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+2
-6
@@ -1,9 +1,8 @@
|
||||
import Header from "../components/header";
|
||||
import { Inter, Montserrat } from "next/font/google";
|
||||
import "../app/styles/base/globales.scss"; // si tienes estilos globales
|
||||
import "../app/styles/base/globales.scss";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
|
||||
// Carga optimizada de fuentes
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
@@ -24,10 +23,7 @@ export default function RootLayout({
|
||||
<html lang="es" className={`${inter.variable} ${montserrat.variable}`}>
|
||||
<body suppressHydrationWarning>
|
||||
<Header />
|
||||
<Toaster
|
||||
position="top-left"
|
||||
reverseOrder={false}
|
||||
/>
|
||||
<Toaster position="top-left" reverseOrder={false} />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,13 +12,11 @@ import toast from "react-hot-toast";
|
||||
export default function Login() {
|
||||
const [nombre, setNombre] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
@@ -32,7 +30,11 @@ export default function Login() {
|
||||
|
||||
document.cookie = `token=${token}; path=/; SameSite=Strict`;
|
||||
router.push("/Escaner");
|
||||
<<<<<<< HEAD
|
||||
} catch (err: unknown) {
|
||||
=======
|
||||
} catch (err) {
|
||||
>>>>>>> c46e561af1c3cf0aa2835fee6eec718099d403cd
|
||||
if (axios.isAxiosError(err)) {
|
||||
if (err.response) {
|
||||
toast.error(
|
||||
@@ -46,8 +48,6 @@ export default function Login() {
|
||||
} else {
|
||||
toast.error("Ocurrió un error inesperado");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+14
-13
@@ -1,13 +1,10 @@
|
||||
import './reporte.css';
|
||||
import "./reporte.css";
|
||||
|
||||
export default function Reporte() {
|
||||
return (
|
||||
<div>
|
||||
<header className="encabezado">
|
||||
<div className="encabezado-sup"></div>
|
||||
<div className="logo">
|
||||
<img src="fes-logo.jpg" alt="" className="logo-img" />
|
||||
</div>
|
||||
|
||||
<div className="pestaña">
|
||||
<span>Escanear código</span>
|
||||
@@ -20,8 +17,8 @@ export default function Reporte() {
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div className='contenedor'>
|
||||
<div className='titulo-reporte'>
|
||||
<div className="contenedor">
|
||||
<div className="titulo-reporte">
|
||||
<p>REPORTE</p>
|
||||
</div>
|
||||
|
||||
@@ -30,10 +27,10 @@ export default function Reporte() {
|
||||
<button type="submit">Buscar</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className='tabla-rec'></div>
|
||||
<button className='boton-descargar'>Descargar</button>
|
||||
<div className="tabla-rec"></div>
|
||||
<button className="boton-descargar">Descargar</button>
|
||||
|
||||
<div className='filtro-rec'>
|
||||
<div className="filtro-rec">
|
||||
<form className="editar">
|
||||
{/* Columna 1 */}
|
||||
<div className="columna">
|
||||
@@ -78,11 +75,15 @@ export default function Reporte() {
|
||||
</select>
|
||||
</div>
|
||||
<div className="botones-filtro">
|
||||
<button type="reset" className="limpiar">Limpiar filtros</button>
|
||||
<button type="submit" className="aplicar">Aplicar filtros</button>
|
||||
</div>
|
||||
<button type="reset" className="limpiar">
|
||||
Limpiar filtros
|
||||
</button>
|
||||
<button type="submit" className="aplicar">
|
||||
Aplicar filtros
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@ textarea {
|
||||
height: 100%;
|
||||
.btnGuardar {
|
||||
background-color: #ffb700;
|
||||
color: #000;
|
||||
color: #0056b3;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
|
||||
@@ -1,28 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation"; // ✅ Importa useRouter
|
||||
import { useRouter } from "next/navigation";
|
||||
import "../app/styles/layout/BarNavigation.scss";
|
||||
import Link from "next/link";
|
||||
|
||||
function BarNavigation() {
|
||||
const router = useRouter(); // ✅ Para redirigir
|
||||
const router = useRouter();
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
|
||||
|
||||
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||
const toggleSubMenu = (index: number) => {
|
||||
if (typeof window !== "undefined" && window.innerWidth <= 800) {
|
||||
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||
}
|
||||
};
|
||||
|
||||
const cerrarSesion = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.removeItem("loggedIn");
|
||||
router.push("/"); // ✅ Redirige al inicio
|
||||
router.push("/");
|
||||
}
|
||||
setOpenMenu(false); // Cierra menú móvil
|
||||
setOpenMenu(false);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,19 +1,8 @@
|
||||
// components/BarcodeScanner.tsx
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Quagga from "@ericblade/quagga2";
|
||||
|
||||
// Tipos mínimos para el resultado de Quagga
|
||||
interface CodeResult {
|
||||
code: string;
|
||||
format: string;
|
||||
}
|
||||
|
||||
interface QuaggaResult {
|
||||
codeResult: CodeResult | null;
|
||||
}
|
||||
|
||||
// Tipos para la configuración (opcional, pero mejora legibilidad)
|
||||
interface QuaggaConfig {
|
||||
inputStream: {
|
||||
|
||||
@@ -0,0 +1,337 @@
|
||||
"use client";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import "../app/styles/layout/agregarEquipo.scss";
|
||||
import "./editar.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export default function Editar() {
|
||||
const searchParams = useSearchParams();
|
||||
const equipoId = searchParams.get("equipoId");
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
serie: "",
|
||||
marca: "",
|
||||
modelo: "",
|
||||
tipoEquipo: "",
|
||||
estado: "",
|
||||
sistemaOperativo: "",
|
||||
procesador: "",
|
||||
tipoUso: "",
|
||||
observaciones: "",
|
||||
adscripcion: "",
|
||||
lugar: "",
|
||||
responsable: "",
|
||||
});
|
||||
|
||||
const [tiposUso, setTiposUso] = useState<string[]>([]);
|
||||
const [marcas, setMarcas] = useState<string[]>([]);
|
||||
const [estados, setEstados] = useState<string[]>([]);
|
||||
const [adscripciones, setAdscripciones] = useState<string[]>([]);
|
||||
const [tiposEquipo, setTiposEquipo] = useState<string[]>([]);
|
||||
const [sistemasOperativos, setSistemasOperativos] = useState<string[]>([]);
|
||||
const [procesadores, setProcesadores] = useState<string[]>([]);
|
||||
|
||||
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
||||
const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCatalogos = async () => {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
try {
|
||||
const [
|
||||
usosRes,
|
||||
marcasRes,
|
||||
estadosRes,
|
||||
adscripcionesRes,
|
||||
tiposEquipoRes,
|
||||
sistemasOperativosRes,
|
||||
procesadoresRes,
|
||||
] = await Promise.all([
|
||||
axios.get(`${api_url}/equipos/usos`, { headers }),
|
||||
axios.get(`${api_url}/equipos/marcas`, { headers }),
|
||||
axios.get(`${api_url}/equipos/estados`, { headers }),
|
||||
axios.get(`${api_url}/equipos/adscripciones`, { headers }),
|
||||
axios.get(`${api_url}/equipos/tipos-equipo`, { headers }),
|
||||
axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
|
||||
axios.get(`${api_url}/equipos/procesadores`, { headers }),
|
||||
]);
|
||||
|
||||
setTiposUso(usosRes.data);
|
||||
setMarcas(marcasRes.data);
|
||||
setEstados(estadosRes.data);
|
||||
setAdscripciones(adscripcionesRes.data);
|
||||
setTiposEquipo(tiposEquipoRes.data);
|
||||
setSistemasOperativos(sistemasOperativosRes.data);
|
||||
setProcesadores(procesadoresRes.data);
|
||||
} catch (error) {
|
||||
console.error("Error cargando catálogos:", error);
|
||||
toast.error("No se pudieron cargar los catálogos de datos");
|
||||
}
|
||||
};
|
||||
|
||||
fetchCatalogos();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEquipo = async () => {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${api_url}/equipos/${equipoId}`, {
|
||||
headers,
|
||||
});
|
||||
setFormData(response.data);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener el equipo:", error);
|
||||
toast.error("No se pudo cargar la información del equipo.");
|
||||
}
|
||||
};
|
||||
|
||||
if (equipoId) fetchEquipo();
|
||||
}, [equipoId]);
|
||||
|
||||
const handleGuardar = async () => {
|
||||
try {
|
||||
await axios.patch(`${api_url}/equipos/update/${equipoId}`, formData);
|
||||
toast.success("Equipo actualizado correctamente");
|
||||
} catch (error) {
|
||||
console.error("Error al guardar:", error);
|
||||
toast.error("Hubo un error al guardar el equipo.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelar = () => {
|
||||
toast("Acción cancelada");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="agregarEquipoContainer">
|
||||
<div className="innerContainer">
|
||||
<h2 className="information">
|
||||
{equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
|
||||
</h2>
|
||||
|
||||
<form className="equipoForm">
|
||||
{/* Columna 1 */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Serie</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ingresa serie"
|
||||
value={formData.serie}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, serie: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Marca</label>
|
||||
<select
|
||||
value={formData.marca}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, marca: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona marca</option>
|
||||
{marcas.map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Modelo</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ingresa modelo"
|
||||
value={formData.modelo}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, modelo: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Tipo de equipo</label>
|
||||
<select
|
||||
value={formData.tipoEquipo}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, tipoEquipo: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona tipo de equipo</option>
|
||||
{tiposEquipo.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Estado</label>
|
||||
<select
|
||||
value={formData.estado}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, estado: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona estado</option>
|
||||
{estados.map((e) => (
|
||||
<option key={e} value={e}>
|
||||
{e}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Tipo de uso</label>
|
||||
<select
|
||||
value={formData.tipoUso}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, tipoUso: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona tipo de uso</option>
|
||||
{tiposUso.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{mostrarCamposComputadora && (
|
||||
<>
|
||||
<div className="formGroup">
|
||||
<label>Procesador</label>
|
||||
<select
|
||||
value={formData.procesador}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, procesador: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona procesador</option>
|
||||
{procesadores.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Sistema operativo</label>
|
||||
<select
|
||||
value={formData.sistemaOperativo}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
sistemaOperativo: e.target.value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona sistema operativo</option>
|
||||
{sistemasOperativos.map((so) => (
|
||||
<option key={so} value={so}>
|
||||
{so}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Adscripción</label>
|
||||
<select
|
||||
value={formData.adscripcion}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, adscripcion: e.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">Selecciona adscripción</option>
|
||||
{adscripciones.map((a) => (
|
||||
<option key={a} value={a}>
|
||||
{a}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Responsable</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.responsable}
|
||||
disabled
|
||||
placeholder="Responsable asignado"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="column">
|
||||
<div className="formGroup">
|
||||
<label>Lugar</label>
|
||||
<textarea
|
||||
placeholder="Ingresa lugar"
|
||||
value={formData.lugar}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, lugar: e.target.value })
|
||||
}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label>Observaciones</label>
|
||||
<textarea
|
||||
placeholder="Ingresa observaciones"
|
||||
value={formData.observaciones}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, observaciones: e.target.value })
|
||||
}
|
||||
rows={5}
|
||||
className="textAreaLarge"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formActions">
|
||||
<button
|
||||
type="button"
|
||||
className="btnGuardar"
|
||||
onClick={handleGuardar}
|
||||
>
|
||||
Guardar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btnCancelar"
|
||||
onClick={handleCancelar}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ import BarNavigation from "./BarNavigation";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
function Header() {
|
||||
const pathname = usePathname(); // obtenemos la ruta actual
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className={header.header}>
|
||||
|
||||
Reference in New Issue
Block a user