Spaces:

JairoDanielMT
/

ReactOptica

Build error

App Files Files Community

3v324v23 commited on Dec 12, 2023

Commit

19f9ce5

1 Parent(s): 93052d8

despliegue

Browse files

Files changed (38) hide show

.eslintrc.cjs +20 -0
.gitignore +25 -0
Dockerfile +23 -0
index.html +13 -0
package-lock.json +0 -0
package.json +32 -0
postcss.config.js +6 -0
public/logo.svg +10 -0
public/vite.svg +1 -0
src/App.jsx +82 -0
src/Carrito.jsx +81 -0
src/Catalogo.jsx +106 -0
src/NavBar.jsx +42 -0
src/Prescripcion.jsx +392 -0
src/assets/lentes-prueba.png +0 -0
src/assets/lunas.jpg +0 -0
src/assets/lunas.webp +0 -0
src/assets/react.svg +1 -0
src/components/BarraBusquedaCliente.jsx +36 -0
src/components/CarritoItem.jsx +119 -0
src/components/CarritoItemLunas.jsx +48 -0
src/components/CatalogoMonturaCard.jsx +81 -0
src/components/DatosCliente.jsx +31 -0
src/components/DetalleClienteModalPrescripcion.jsx +20 -0
src/components/DetalleTablaMedidas.jsx +94 -0
src/components/DropdownClientesItem.jsx +23 -0
src/components/ErrorMessage.jsx +11 -0
src/components/Modal.jsx +128 -0
src/components/ModalBoleta.jsx +145 -0
src/components/ModalPrescripcion.jsx +83 -0
src/components/ModalVerCarrito.jsx +84 -0
src/components/TablaMedidas.jsx +247 -0
src/index.css +9 -0
src/lib/conexionApi.js +134 -0
src/lib/funciones.js +22 -0
src/main.jsx +13 -0
tailwind.config.js +9 -0
vite.config.js +7 -0

.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,20 @@

+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,25 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

Dockerfile ADDED Viewed

	@@ -0,0 +1,23 @@

+# Usa la imagen de Node con la etiqueta 20.10-alpine3.18 como base
+FROM node:20.10-alpine3.18
+# Establece el directorio de trabajo en la aplicación
+WORKDIR /usr/src/app
+# Copia los archivos de configuración y el package.json a la imagen
+COPY package*.json ./
+# Instala las dependencias
+RUN npm install
+# Copia el resto de la aplicación a la imagen
+COPY . .
+# Otorga permisos de lectura, escritura y ejecución a todos los archivos y directorios
+RUN chmod -R 777 /usr/src/app
+# Expone el puerto 7860 (ajusta según sea necesario)
+EXPOSE 7860
+# Comando para ejecutar la aplicación
+CMD ["npm", "run", "dev"]

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Arte Visual</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,32 @@

+{
+  "name": "intento5",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 7860 --host 0.0.0.0",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.20.1",
+    "react-router-dom": "6.20.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.32",
+    "standard": "^17.1.0",
+    "tailwindcss": "^3.3.5",
+    "vite": "^5.0.0"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/logo.svg ADDED Viewed

public/vite.svg ADDED Viewed

src/App.jsx ADDED Viewed

	@@ -0,0 +1,82 @@

+import { Route, Routes } from "react-router-dom";
+import { NavBar } from "./NavBar";
+import { Prescripcion } from "./Prescripcion";
+import { Catalogo } from "./Catalogo";
+import { useEffect, useState } from "react";
+import { Carrito } from "./Carrito";
+import { obtenerGet } from "./lib/conexionApi";
+const Home = () => {
+  return <div>Home</div>;
+};
+const Pedidos = () => {
+  return <div>Pedidos</div>;
+};
+const fecha = new Date();
+let dia = fecha.getDate();
+let mes = fecha.getMonth() + 1; // Los meses en JavaScript empiezan desde 0
+let año = fecha.getFullYear();
+// Asegurándose de que el día y el mes sean de dos dígitos
+if (dia < 10) dia = '0' + dia;
+if (mes < 10) mes = '0' + mes;
+const fechaFormateada = dia + '/' + mes + '/' + año;
+export default function App() {
+  const [carrito, setCarrito] = useState([]);
+  const [monturas, setMonturas] = useState([]);
+  const [errorConsultaMonturas, setsetErrorConsultaMonturas] = useState(false);
+  const [precioTotal, setPrecioTotal] = useState(0);
+  const [prescripcion, setPrescripcion] = useState([]);
+  const [fecha, setFecha] = useState('')
+  useEffect(() => {
+    obtenerGet("monturas", setMonturas, setsetErrorConsultaMonturas);
+  }, []);
+  useEffect(() => {
+    setFecha(fechaFormateada)
+  }, []);
+  return (
+    <div className="flex flex-col items-center h-screen">
+      <NavBar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/pedidos" element={<Pedidos />} />
+        <Route path="/prescripcion" element={<Prescripcion />} />
+        <Route
+          path="/catalogo"
+          element={
+            <Catalogo
+              setCarrito={setCarrito}
+              carrito={carrito}
+              monturas={monturas}
+              setMonturas={setMonturas}
+              setPrecioTotal={setPrecioTotal}
+              setPrescripcion={setPrescripcion}
+              prescripcion={prescripcion}
+            />
+          }
+        />
+        <Route
+          path="/carrito"
+          element={
+            <Carrito
+              setCarrito={setCarrito}
+              carrito={carrito}
+              precioTotal={precioTotal}
+              setPrecioTotal={setPrecioTotal}
+              fecha={fecha}
+              prescripcion={prescripcion}
+              setPrescripcion={setPrescripcion}
+            />
+          }
+        />
+      </Routes>
+    </div>
+  );
+}

src/Carrito.jsx ADDED Viewed

	@@ -0,0 +1,81 @@

+import React, { useEffect, useState } from 'react'
+import { CarritoItem } from './components/CarritoItem'
+import { actualizarPut, cargarApi, obtenerEspecifico, registrarPost, obtenerGet } from "./lib/conexionApi";
+import ModalBoleta from './components/ModalBoleta';
+import {CarritoItemLunas} from './components/CarritoItemLunas';
+export const Carrito = ({setCarrito, carrito, precioTotal, setPrecioTotal, fecha, prescripcion, setPrescripcion}) => {
+  const [modalBoleta, setModalBoleta] = useState(false)
+  const [adelanto, setAdelanto] = useState('')
+  const [precioLunas, setPrecioLunas] = useState('')
+  const [error, setError] = useState('')
+  const [errorPrecioLuna, setErrorPrecioLuna] = useState('')
+  const [precioTotalMostrado, setPrecioTotalMostrado] = useState(0)
+  useEffect(() => {
+    setPrecioTotal(carrito.reduce((total, carritoItem) => total + (carritoItem["cantidad"]*carritoItem["monturaInventario"]["precio_unit"]), 0))
+  }, [])
+  const handleContinuarClick = () => {
+    if (adelanto === '' || precioLunas === '') {
+      setError('todos los campos son obligatorios')
+    } else if (isNaN(parseFloat(adelanto)) || isNaN(parseFloat(precioLunas))) {
+      setError('Ingresar campos válidos')
+    } else if (adelanto < (precioTotal+parseFloat(precioLunas))*0.3) {
+      setError('El adelanto debe ser mayor al 30% del total')
+    } else {
+      setModalBoleta(true)
+      setError('')
+      setErrorPrecioLuna('')
+    }
+  }
+  return (
+    <div className='w-3/5'>
+        <div className='flex justify-between'>
+          <h1 className="my-10 text-4xl font-semibold text-center">Carrito de compras</h1>
+          <button className='bg-slate-700 text-white my-8 rounded-lg hover:bg-slate-800 uppercase text-xl font-semibold px-5' onClick={handleContinuarClick}>
+              Continuar
+          </button>
+        </div>
+        <div className='border-t border-black w-full'>
+            {(carrito.length > 0) && carrito.map((item) => {
+                return <CarritoItem key={item["monturaInventario"]["codigo"]} carritoItem={item} setCarrito={setCarrito} precioTotal={precioTotal} setPrecioTotal={setPrecioTotal} carrito={carrito} />
+            })}
+            {  prescripcion.length !== 0 &&  <CarritoItemLunas prescripcion={prescripcion} precioLunas={precioLunas} setPrecioLunas={setPrecioLunas} setPrecioTotal={setPrecioTotal} precioTotal={precioTotal} />}
+        </div>
+        <div className='flex justify-end mt-10 items-center'>
+          <label htmlFor="input-buscar-cliente" className='mr-2 font-semibold'>Adelanto: S/.</label>
+            <input
+              className="border w-[6rem] py-2 px-3 rounded-md text-right"
+              id="input-buscar-cliente "
+              type="text"
+              placeholder="00.00"
+              onChange={(e) => {
+                setAdelanto(e.target.value)
+              }}
+              value={adelanto}
+            />
+          </div>
+        {(modalBoleta && precioTotal !== 0) && (
+          <ModalBoleta
+            fecha={fecha}
+            setModalBoleta={setModalBoleta}
+            precioTotal={precioTotal+parseFloat(precioLunas)}
+            carrito={carrito}
+            prescripcion={prescripcion}
+            adelanto={adelanto}
+            precioLunas={precioLunas}
+            setPrescripcion={setPrescripcion}
+            setPrecioTotal={setPrecioTotal}
+            setCarrito={setCarrito}
+          />
+        )}
+        {errorPrecioLuna && <p className="text-red-500 text-xl">{errorPrecioLuna}</p>}
+        {error && <p className="text-red-500 text-xl">{error}</p>}
+    </div>
+  )
+}

src/Catalogo.jsx ADDED Viewed

	@@ -0,0 +1,106 @@

+import React, { useEffect, useState } from "react";
+import CatalogoMonturaCard from "./components/CatalogoMonturaCard";
+import {
+  actualizarPut,
+  cargarApi,
+  obtenerEspecifico,
+  registrarPost,
+  obtenerGet,
+  prescripcionPdff,
+} from "./lib/conexionApi";
+import ModalVerCarrito from "./components/ModalVerCarrito";
+import { Navigate } from "react-router";
+export const Catalogo = ({ setCarrito, carrito, monturas, setMonturas, setPrecioTotal, setPrescripcion, prescripcion }) => {
+  // Se obtienen primero los detalles de cada montura
+  // se obtienen los datos de precio, stock y código
+  const [monturasInventario, setmonturasInventario] = useState([]);
+  const [montura, setMontura] = useState({})
+  const [monturaInventario, setMonturaInventario] = useState({})
+  const [errorConsultaMonturasInv, setsetErrorConsultaMonturasInv] =
+    useState(false);
+  const [errorUltimaPrescripcion, setsetErrorUltimaPrescripcion] =
+    useState(false);
+  const [btnBuscarMonturaCodigo, setbtnBuscarMonturaCodigo] = useState(false);
+  const [modalVerCarrito, setModalVerCarrito] = useState(false)
+  const [irAlCarrito, setIrAlCarrito] = useState(false)
+  useEffect(() => {
+  }, []);
+  // obtener catalogo de monturas
+  useEffect(() => {
+    obtenerGet(
+      "monturas_inventario",
+      setmonturasInventario,
+      setsetErrorConsultaMonturasInv
+    );
+  }, []);
+  useEffect(() => {
+    const pdfPrescripcion = async () => {
+      await obtenerGet("prescripciones/ultimoregistro", setPrescripcion, setsetErrorUltimaPrescripcion);
+      await prescripcionPdff(prescripcion[0]["id_prescripcion"])
+    }
+    pdfPrescripcion()
+  }, []);
+  return (
+    <div className="mx-20 mt-5">
+      <div className="flex flex-col justify-center items-center">
+        <h1 className="my-10 text-5xl font-semibold text-center">Catálogo de monturas</h1>
+        {/* <div className="flex flex-row gap-2 mb-2 w-1/3">
+          <input
+            className="border w-3/4 py-2 px-3 rounded-md"
+            id="input-buscar-cliente "
+            type="text"
+            placeholder="Código de  montura"
+          />
+          <button className="rounded-md w-1/4 bg-slate-700 hover:bg-slate-800 text-white font-semibold px-2 text-center">
+            Buscar
+          </button>
+        </div> */}
+      </div>
+      <div className="mt-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+        {monturasInventario.map((monturaInventario) => {
+          const montura = monturas.find(
+            (montura) =>
+              montura["id_montura"] === monturaInventario["id_montura"]
+          );
+          return (
+            <CatalogoMonturaCard
+              key={montura["id_montura"]}
+              montura={montura}
+              monturaInventario={monturaInventario}
+              setModalVerCarrito={setModalVerCarrito}
+              setMontura={setMontura}
+              setMonturaInventario={setMonturaInventario}
+              setCarrito={setCarrito}
+              carrito={carrito}
+              setPrecioTotal={setPrecioTotal}
+            />
+          );
+        })}
+      </div>
+      {modalVerCarrito && (
+        <ModalVerCarrito montura={montura} monturaInventario={monturaInventario} setModalVerCarrito={setModalVerCarrito} carrito={carrito} setMontura={setMontura} setMonturaInventario={setMonturaInventario} setIrAlCarrito={setIrAlCarrito} />
+      )}
+      {irAlCarrito && (
+        <Navigate to="/carrito" replace={true}/>
+      )}
+    </div>
+  );
+};

src/NavBar.jsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import React from "react";
+import { NavLink } from "react-router-dom";
+export const NavBar = () => {
+  return (
+    <header className="w-full mb-10">
+      <div className="bg-slate-500 text-white text-center pt-20 pb-10">
+        <h1 className="text-4xl font-semibold ">Óptica Arte Visual</h1>
+        <p className="mt-5">La mejor calidad en monturas con modelos exclusivos y resinas de alta calidad</p>
+      </div>
+      <nav className="bg-slate-700">
+        <ul id="nav-ul" className="flex flex-row justify-center text-xl">
+          <NavLink className="w-1/5 text-center" to="/">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Home
+            </li>
+          </NavLink>
+          <NavLink className="w-1/5 text-center" to="/pedidos">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Pedidos
+            </li>
+          </NavLink>
+          <NavLink className="w-1/5 text-center" to="/prescripcion">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Emitir Prescripción
+            </li>
+          </NavLink>
+          <NavLink className="w-1/5 text-center" to="/catalogo">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Catálogo
+            </li>
+          </NavLink>
+          <NavLink className="w-1/5 text-center" to="/carrito">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Carrito de compras
+            </li>
+          </NavLink>
+        </ul>
+      </nav>
+    </header>
+  );
+};

src/Prescripcion.jsx ADDED Viewed

	@@ -0,0 +1,392 @@

+import { useEffect, useState } from "react";
+import { actualizarPut, cargarApi, obtenerEspecifico, registrarPost } from "./lib/conexionApi";
+import Modal from "./components/Modal";
+import ModalPrescripcion from "./components/ModalPrescripcion";
+import TablaMedidas from "./components/TablaMedidas";
+import BarraBusquedaCliente from "./components/BarraBusquedaCliente";
+import DatosCliente from "./components/DatosCliente";
+import { Navigate } from "react-router-dom";
+import ErrorMessage from "./components/ErrorMessage";
+const fecha = new Date();
+let dia = fecha.getDate();
+let mes = fecha.getMonth() + 1; // Los meses en JavaScript empiezan desde 0
+let año = fecha.getFullYear();
+// Asegurándose de que el día y el mes sean de dos dígitos
+if (dia < 10) dia = '0' + dia;
+if (mes < 10) mes = '0' + mes;
+const fechaFormateada = dia + '/' + mes + '/' + año;
+export const Prescripcion = () => {
+  // States para la búsqueda de clientes
+  const [clienteBusqueda, setClienteBusqueda] = useState("");
+  const [btnBuscarClick, setBtnBuscarClick] = useState(false);
+  const [clientes, setClientes] = useState([]);
+  const [cliente, setCliente] = useState({});
+  const [openModal, setOpenModal] = useState(false);
+  const [openModalPrescripcion, setOpenModalPrescripcion] = useState(false)
+  // States para medidas
+  const [medidas, setMedidas] = useState([]);
+  const [medidasEncontradas, setMedidasEncontradas] = useState(false);
+  const [asignacionNuevasMedidas, setAsignacionNuevasMedidas] = useState(false)
+  const [actualizacionMedidas, setActualizacionMedidas] = useState(false)
+  // lejos
+  const [esferaODlejos, setEsferaODLejos] = useState(0);
+  const [cilindroODlejos, setCilindroODlejos] = useState(0);
+  const [ejeODlejos, setEjeODlejos] = useState(0);
+  const [agudezavisualODlejos, setAgudezavisualODlejos] = useState(0);
+  const [esferaOIlejos, setEsferaOIlejos] = useState(0);
+  const [cilindroOIlejos, setCilindroOIlejos] = useState(0);
+  const [ejeOIlejos, setEjeOIlejos] = useState(0);
+  const [agudezavisualOIlejos, setAgudezavisualOIlejos] = useState(0);
+  // cerca
+  const [esferaODcerca, setEsferaODcerca] = useState(0);
+  const [cilindroODcerca, setCilindroODcerca] = useState(0);
+  const [ejeODcerca, setEjeODcerca] = useState(0);
+  const [agudezavisualODcerca, setAgudezavisualODcerca] = useState(0);
+  const [esferaOIcerca, setEsferaOIcerca] = useState(0);
+  const [cilindroOIcerca, setCilindroOIcerca] = useState(0);
+  const [ejeOIcerca, setEjeOIcerca] = useState(0);
+  const [agudezavisualOIcerca, setAgudezavisualOIcerca] = useState(0);
+  // States para crear nuevo cliente
+  const [nombresYApellidos, setNombresYApellidos] = useState("");
+  const [edad, setEdad] = useState("");
+  const [telefono, setTelefono] = useState("");
+  const [direccion, setDireccion] = useState("");
+  // States para crear nueva prescripción
+  const [notaAdicional, setNotaAdicional] = useState("");
+  const [prescripcionLista, setPrescripcionLista] = useState(false)
+  const [prescripcionRegistrada, setPrescripcionRegistrada] = useState(false)
+  // errores
+  const [error, setError] = useState(false)
+  useEffect(() => {
+    cargarApi()
+  }, []);
+  useEffect(() => {
+    if (btnBuscarClick) {
+      obtenerEspecifico(
+        "clientes/busqueda",
+        { nombres_y_apellidos: clienteBusqueda },
+        setClientes, setError
+      );
+    } else return;
+  }, [btnBuscarClick]);
+  useEffect(() => {
+    if (Object.keys(cliente).length !== 0 || asignacionNuevasMedidas) {
+      obtenerEspecifico(
+        "medidas/busqueda",
+        { "id_cliente": parseInt(cliente["id_cliente"]) },
+        setMedidas, setError
+      );
+      console.log('medidas encontradas');
+    } else return;
+  }, [cliente, asignacionNuevasMedidas]);
+   useEffect(() => {
+    if (Object.keys(cliente).length !== 0 || actualizacionMedidas) {
+      obtenerEspecifico(
+        "medidas/busqueda",
+        { "id_cliente": parseInt(cliente["id_cliente"]) },
+        setMedidas, setError
+      );
+      console.log('medidas encontradas');
+    } else return
+  }, [actualizacionMedidas])
+  useEffect(() => {
+    if (medidas.length !== 0) {
+      setMedidasEncontradas(true);
+      setEsferaODLejos(medidas[0]["Esfera_OD_lejos"]);
+      setCilindroODlejos(medidas[0]["Cilindro_OD_lejos"]);
+      setEjeODlejos(medidas[0]["Eje_OD_lejos"]);
+      setAgudezavisualODlejos(medidas[0]["Agudeza_visual_OD_lejos"]);
+      setEsferaOIlejos(medidas[0]["Esfera_OI_lejos"]);
+      setCilindroOIlejos(medidas[0]["Cilindro_OI_lejos"]);
+      setEjeOIlejos(medidas[0]["Eje_OI_lejos"]);
+      setAgudezavisualOIlejos(medidas[0]["Agudeza_visual_OI_lejos"]);
+      setEsferaODcerca(medidas[0]["Esfera_OD_cerca"]);
+      setCilindroODcerca(medidas[0]["Cilindro_OD_cerca"]);
+      setEjeODcerca(medidas[0]["Eje_OD_cerca"]);
+      setAgudezavisualODcerca(medidas[0]["Agudeza_visual_OD_cerca"]);
+      setEsferaOIcerca(medidas[0]["Esfera_OI_cerca"]);
+      setCilindroOIcerca(medidas[0]["Cilindro_OI_cerca"]);
+      setEjeOIcerca(medidas[0]["Eje_OI_cerca"]);
+      setAgudezavisualOIcerca(medidas[0]["Agudeza_visual_OI_cerca"]);
+    } else {
+      setMedidasEncontradas(false);
+      setEsferaODLejos(0);
+      setCilindroODlejos(0);
+      setEjeODlejos(0);
+      setAgudezavisualODlejos(0);
+      setEsferaOIlejos(0);
+      setCilindroOIlejos(0);
+      setEjeOIlejos(0);
+      setAgudezavisualOIlejos(0);
+      setEsferaODcerca(0);
+      setCilindroODcerca(0);
+      setEjeODcerca(0);
+      setAgudezavisualODcerca(0);
+      setEsferaOIcerca(0);
+      setCilindroOIcerca(0);
+      setEjeOIcerca(0);
+      setAgudezavisualOIcerca(0);
+    }
+  }, [medidas]);
+  const handleButtonBuscarCliente = (e) => {
+    e.preventDefault();
+    if (clienteBusqueda !== "") {
+      setBtnBuscarClick(true);
+    } else setBtnBuscarClick(false);
+    //console.log(clientes);
+  };
+  const handleSubmitEmitirPrescripcion = (e) => {
+    e.preventDefault()
+    if (Object.keys(cliente).length !== 0) {
+      const nuevoMonturas = {
+        "Esfera_OD_lejos": parseFloat(esferaODlejos),
+        "Cilindro_OD_lejos": parseFloat(cilindroODlejos),
+        "Eje_OD_lejos": parseFloat(ejeODlejos),
+        "Agudeza_visual_OD_lejos": parseFloat(agudezavisualODlejos),
+        "Esfera_OI_lejos": parseFloat(esferaOIlejos),
+        "Cilindro_OI_lejos": parseFloat(cilindroOIlejos),
+        "Eje_OI_lejos": parseFloat(ejeOIlejos),
+        "Agudeza_visual_OI_lejos": parseFloat(agudezavisualOIlejos),
+        "Esfera_OD_cerca": parseFloat(esferaODcerca),
+        "Cilindro_OD_cerca": parseFloat(cilindroODcerca),
+        "Eje_OD_cerca": parseFloat(ejeODcerca),
+        "Agudeza_visual_OD_cerca": parseFloat(agudezavisualODcerca),
+        "Esfera_OI_cerca": parseFloat(esferaOIcerca),
+        "Cilindro_OI_cerca": parseFloat(cilindroOIcerca),
+        "Eje_OI_cerca": parseFloat(ejeOIcerca),
+        "Agudeza_visual_OI_cerca": parseFloat(agudezavisualOIcerca),
+        "id_cliente": cliente["id_cliente"],
+      };
+      if (!medidasEncontradas ) {
+        registrarPost('medidas', nuevoMonturas)
+        console.log('medidas registradas');
+        setAsignacionNuevasMedidas(true)
+        console.log('medidas encontradas');
+      } else {
+        if (medidas.length !== 0) {
+          const actualizarMonturas = {
+            "id_medidas": medidas[0]["id_medidas"],
+            "Esfera_OD_lejos": parseFloat(esferaODlejos),
+            "Cilindro_OD_lejos": parseFloat(cilindroODlejos),
+            "Eje_OD_lejos": parseFloat(ejeODlejos),
+            "Agudeza_visual_OD_lejos": parseFloat(agudezavisualODlejos),
+            "Esfera_OI_lejos": parseFloat(esferaOIlejos),
+            "Cilindro_OI_lejos": parseFloat(cilindroOIlejos),
+            "Eje_OI_lejos": parseFloat(ejeOIlejos),
+            "Agudeza_visual_OI_lejos": parseFloat(agudezavisualOIlejos),
+            "Esfera_OD_cerca": parseFloat(esferaODcerca),
+            "Cilindro_OD_cerca": parseFloat(cilindroODcerca),
+            "Eje_OD_cerca": parseFloat(ejeODcerca),
+            "Agudeza_visual_OD_cerca": parseFloat(agudezavisualODcerca),
+            "Esfera_OI_cerca": parseFloat(esferaOIcerca),
+            "Cilindro_OI_cerca": parseFloat(cilindroOIcerca),
+            "Eje_OI_cerca": parseFloat(ejeOIcerca),
+            "Agudeza_visual_OI_cerca": parseFloat(agudezavisualOIcerca),
+            "id_cliente": cliente["id_cliente"],
+          };
+          actualizarPut("medidas",actualizarMonturas)
+          setActualizacionMedidas(true)
+        }
+      }
+    }
+    setOpenModalPrescripcion(true)
+    console.log('submit');
+  }
+  return (
+    <div className=" w-3/5 flex flex-row my-5 p-5 h-auto">
+      <div className="w-2/5">
+        {(btnBuscarClick && error) && <ErrorMessage mensaje={'No se encontraron resultados'}/>}
+        <div className=" flex flex-row">
+          <div className="w-full pr-5">
+            {/* BARRA DE BÚSQUEDA DE CLIENTE */}
+            <BarraBusquedaCliente
+            clienteBusqueda = {clienteBusqueda}
+            setClienteBusqueda = {setClienteBusqueda}
+            setBtnBuscarClick = {setBtnBuscarClick}
+            setAsignacionNuevasMedidas = {setAsignacionNuevasMedidas}
+            handleButtonBuscarCliente = {handleButtonBuscarCliente}
+            setError = {setError}
+            />
+            {/* DROPDOWN DE CLIENTES ENCONTRADOS */}
+              {clientes && clienteBusqueda !== "" && btnBuscarClick !== false
+                ? <ul>
+                  {clientes.map((cli) => {
+                    return (
+                      <li
+                      key={cli["id_cliente"]}
+                      onClick={() => {
+                        setBtnBuscarClick(false);
+                        setClienteBusqueda("");
+                        setCliente(cli);
+                        setNotaAdicional("");
+                      }}
+                      className="cursor-pointer hover:font-semibold hover:bg-slate-50 p-2 "
+                      >
+                      <p>{cli["nombres_y_apellidos"]}</p>
+                      <p className="text-sm text-slate-400">{cli["edad"]}</p>
+                      <p className="text-sm text-slate-400">{cli["telefono"]}</p>
+                      <p className="text-sm text-slate-400">{cli["direccion"]}</p>
+                    </li>
+                    );
+                  })}
+                </ul>
+                : ""}
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icon-tabler-user-plus cursor-pointer hover:stroke-slate-800 mr-5"
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            strokeWidth="2.5"
+            stroke="#334155"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            /* ABRIR MODAL PARA AGREGAR CLIENTE */
+            onClick={() => {
+              console.log("agregar");
+              setOpenModal(true);
+            }}
+            >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+            <path d="M16 19h6" />
+            <path d="M19 16v6" />
+            <path d="M6 21v-2a4 4 0 0 1 4 -4h4" />
+          </svg>
+        </div>
+      </div>
+      {/* MOSTRAR CLIENTE SELECCIONADO */}
+      {Object.keys(cliente).length !== 0 ? (
+        <form onSubmit={handleSubmitEmitirPrescripcion} className="px-5  flex flex-col w-3/5 h-full pb-5 border-l-2">
+          <DatosCliente
+            cliente={cliente}
+            notaAdicional={notaAdicional}
+            setNotaAdicional={setNotaAdicional}
+          />
+          {!medidasEncontradas && (
+            <p className="mt-5 text-center text-xl text-gray-500">
+              Llena las medidas del nuevo cliente
+            </p>
+          )}
+          <TablaMedidas
+            esferaODlejos={esferaODlejos}
+            setEsferaODLejos={setEsferaODLejos}
+            cilindroODlejos={cilindroODlejos}
+            setCilindroODlejos={setCilindroODlejos}
+            ejeODlejos={ejeODlejos}
+            setEjeODlejos={setEjeODlejos}
+            agudezavisualODlejos={agudezavisualODlejos}
+            setAgudezavisualODlejos={setAgudezavisualODlejos}
+            esferaOIlejos={esferaOIlejos}
+            setEsferaOIlejos={setEsferaOIlejos}
+            cilindroOIlejos={cilindroOIlejos}
+            setCilindroOIlejos={setCilindroOIlejos}
+            ejeOIlejos={ejeOIlejos}
+            setEjeOIlejos={setEjeOIlejos}
+            agudezavisualOIlejos={agudezavisualOIlejos}
+            setAgudezavisualOIlejos={setAgudezavisualOIlejos}
+            esferaODcerca={esferaODcerca}
+            setEsferaODcerca={setEsferaODcerca}
+            cilindroODcerca={cilindroODcerca}
+            setCilindroODcerca={setCilindroODcerca}
+            ejeODcerca={ejeODcerca}
+            setEjeODcerca={setEjeODcerca}
+            agudezavisualODcerca={agudezavisualODcerca}
+            setAgudezavisualODcerca={setAgudezavisualODcerca}
+            esferaOIcerca={esferaOIcerca}
+            setEsferaOIcerca={setEsferaOIcerca}
+            cilindroOIcerca={cilindroOIcerca}
+            setCilindroOIcerca={setCilindroOIcerca}
+            ejeOIcerca={ejeOIcerca}
+            setEjeOIcerca={setEjeOIcerca}
+            agudezavisualOIcerca={agudezavisualOIcerca}
+            setAgudezavisualOIcerca={setAgudezavisualOIcerca}
+          />
+          <button type="submit" className="rounded-md w-full py-3 mt-10 bg-slate-700 hover:bg-slate-800 text-white font-semibold uppercase ">
+            Emitir Prescripción
+          </button>
+        </form>
+      ) : (
+        <div className="px-5  flex flex-col  w-3/5 h-full pb-20 border-l-2">
+          <p className="text-gray-400 text-2xl font-semibold">
+            No se ha seleccionado ningún cliente
+          </p>
+        </div>
+      )}
+      {openModal && (
+        <Modal
+          openModal={openModal}
+          setOpenModal={setOpenModal}
+          nombresYApellidos={nombresYApellidos}
+          setNombresYApellidos={setNombresYApellidos}
+          edad={edad}
+          setEdad={setEdad}
+          telefono={telefono}
+          setTelefono={setTelefono}
+          direccion={direccion}
+          setDireccion={setDireccion}
+          setError={setError}
+          setClienteBusqueda={setClienteBusqueda}
+        />
+      )}
+      {openModalPrescripcion && (
+        <ModalPrescripcion
+        setOpenModalPrescripcion={setOpenModalPrescripcion}
+        setPrescripcionLista={setPrescripcionLista}
+        cliente={cliente}
+        medidas={medidas}
+        fechaFormateada={fechaFormateada}
+        notaAdicional={notaAdicional}
+        setActualizacionMedidas={setActualizacionMedidas}
+        setAsignacionNuevasMedidas={setAsignacionNuevasMedidas}
+        setPrescripcionRegistrada={setPrescripcionRegistrada}
+        />
+      )}
+      {prescripcionRegistrada && (
+        <Navigate to="/catalogo" replace={true} />
+      )}
+    </div>
+  );
+}

src/assets/lentes-prueba.png ADDED Viewed

src/assets/lunas.jpg ADDED Viewed

src/assets/lunas.webp ADDED Viewed

src/assets/react.svg ADDED Viewed

src/components/BarraBusquedaCliente.jsx ADDED Viewed

	@@ -0,0 +1,36 @@

+import React from "react";
+const BarraBusquedaCliente = ({
+    clienteBusqueda,
+    setClienteBusqueda,
+    setBtnBuscarClick,
+    setAsignacionNuevasMedidas,
+    handleButtonBuscarCliente,
+    setError
+}) => {
+  return (
+    <li className="flex flex-row gap-2 mb-2">
+      <input
+        className="border w-3/4 py-2 px-3 rounded-md"
+        id="input-buscar-cliente "
+        type="text"
+        placeholder="Nombre del cliente"
+        onChange={(e) => {
+          setClienteBusqueda(e.target.value);
+          setBtnBuscarClick(false);
+          setAsignacionNuevasMedidas(false);
+          setError(false)
+        }}
+        value={clienteBusqueda}
+      />
+      <button
+        className="rounded-md w-1/4 bg-slate-700 hover:bg-slate-800 text-white font-semibold px-2 text-center"
+        onClick={handleButtonBuscarCliente}
+      >
+        Buscar
+      </button>
+    </li>
+  );
+};
+export default BarraBusquedaCliente;

src/components/CarritoItem.jsx ADDED Viewed

	@@ -0,0 +1,119 @@

+import React, { useState } from "react";
+import { formatearStringUrlImagen } from "../lib/funciones";
+export const CarritoItem = ({
+  carritoItem,
+  setCarrito,
+  precioTotal,
+  setPrecioTotal,
+  carrito,
+}) => {
+  const imagen = carritoItem["montura"]["imagen"];
+  const { src, alt, border } = formatearStringUrlImagen(imagen);
+  const [cantidad, setCantidad] = useState(carritoItem["cantidad"]);
+  return (
+    <div className="w-full p-10 flex justify-between items-center border-b border-black">
+      <div className="">
+        <img width={200} src={src} alt={alt} border={border} />
+      </div>
+      <div className="block w-[350px]">
+        <p className="truncate uppercase text-xl font-semibold">
+          {carritoItem["montura"]["nombre_montura"]}
+        </p>
+        <p className="mb-3 text-gray-500">{carritoItem["montura"]["marca"]}</p>
+        <p>
+          Material:{" "}
+          <span className="uppercase">
+            {carritoItem["montura"]["material"]}
+          </span>
+        </p>
+        <p>
+          Color:{" "}
+          <span className="uppercase">{carritoItem["montura"]["color"]}</span>
+        </p>
+      </div>
+      <div className="w-[80px] text-center">
+        S/.{carritoItem["monturaInventario"]["precio_unit"]} c/u
+      </div>
+      <div className="flex">
+        <button
+          className="bg-gray-200 h-8 w-8 text-lg hover:bg-gray-300 disabled:cursor-default disabled:text-gray-400 disabled:hover:bg-gray-200"
+          onClick={() => {
+            // falta eliminar
+            carritoItem["cantidad"] = cantidad - 1;
+            setCantidad(cantidad - 1);
+            console.log(carritoItem);
+            setPrecioTotal(
+              carrito.reduce(
+                (total, carritoItem) =>
+                  total +
+                  carritoItem["cantidad"] *
+                    carritoItem["monturaInventario"]["precio_unit"],
+                0
+              )
+            );
+          }}
+          disabled={cantidad === 1}
+        >
+          -
+        </button>
+        <p className="mx-2 h-8 w-10 text-center">{cantidad}</p>
+        <button
+          className="bg-gray-200 h-8 w-8 text-lg hover:bg-gray-300 disabled:cursor-default disabled:text-gray-400 disabled:hover:bg-gray-200"
+          onClick={() => {
+            // falta eliminar
+            carritoItem["cantidad"] = cantidad + 1;
+            setCantidad(cantidad + 1);
+            console.log(carritoItem);
+            setPrecioTotal(
+              carrito.reduce(
+                (total, carritoItem) =>
+                  total +
+                  carritoItem["cantidad"] *
+                    carritoItem["monturaInventario"]["precio_unit"],
+                0
+              )
+            );
+          }}
+          disabled={cantidad === carritoItem["monturaInventario"]["stock"]}
+        >
+          +
+        </button>
+      </div>
+      <div className="w-[80px] text-center text-sm font-semibold">
+        S/.{" "}
+        <span className="text-2xl">
+          {cantidad * carritoItem["monturaInventario"]["precio_unit"]}
+        </span>
+      </div>
+      <div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="icon icon-tabler icon-tabler-trash cursor-pointer"
+          width="30"
+          height="30"
+          viewBox="0 0 24 24"
+          strokeWidth="1"
+          stroke="#ff0000"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          onClick={() => {
+            setCarrito(carrito.filter((carritoItemFiltrado) => carritoItemFiltrado["monturaInventario"]["codigo"] !== carritoItem["monturaInventario"]["codigo"]));
+            setPrecioTotal(precioTotal - (carritoItem["cantidad"]*carritoItem["monturaInventario"]["precio_unit"]))
+          }}
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M4 7l16 0" />
+          <path d="M10 11l0 6" />
+          <path d="M14 11l0 6" />
+          <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+          <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+        </svg>
+      </div>
+    </div>
+  );
+};

src/components/CarritoItemLunas.jsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import React from 'react'
+// cantidad 1 prescripcion[0]["detalle_lunas"] input precio precio*cantidad
+export const CarritoItemLunas = ({ prescripcion, precioLunas, setPrecioLunas, setPrecioTotal, precioTotal }) => {
+  return (
+    <div className="w-full p-10 flex justify-between items-center border-b border-black">
+      <div className="">
+        <img width={200} src="../src/assets/lunas.jpg" alt="lunas" border="0" />
+      </div>
+      <div className="block w-[350px]">
+        <p className="truncate text-xl ">
+          Detalle de lunas: <span className='font-semibold uppercase'>{ prescripcion.length !== 0 && prescripcion[0]["detalle_lunas"] }</span>
+        </p>
+      </div>
+      <div className="flex">
+        <button
+          className="bg-gray-200 h-8 w-8 text-lg hover:bg-gray-300 disabled:cursor-default disabled:text-gray-400 disabled:hover:bg-gray-200"
+          onClick={() => {
+          }}
+          disabled={true}
+        >
+          -
+        </button>
+        <p className="mx-2 h-8 w-10 text-center">{1}</p>
+        <button
+          className="bg-gray-200 h-8 w-8 text-lg hover:bg-gray-300 disabled:cursor-default disabled:text-gray-400 disabled:hover:bg-gray-200"
+          onClick={() => {
+          }}
+          disabled={true}
+        >
+          +
+        </button>
+      </div>
+      <div className="w-[80px] flex items-end">
+          <p className='text-sm'>S/.</p>
+          <input className='text-2xl border w-20 text-center ml-2' type="text" placeholder='00.00' value={precioLunas} onChange={e => {
+            setPrecioLunas(e.target.value)
+            //setPrecioTotal(pre)
+            }} />
+      </div>
+    </div>
+  )
+}

src/components/CatalogoMonturaCard.jsx ADDED Viewed

	@@ -0,0 +1,81 @@

+import { formatearStringUrlImagen } from "../lib/funciones";
+const CatalogoMonturaCard = ({
+  montura = {
+    "id_montura": 10,
+    "nombre_montura": "Nombre monturaaaaaaaaaaaaaaaaaaa",
+    "imagen":
+      '<img src="https://i.ibb.co/jHWcz8B/EBJ8-NK3-Ko81-301-C5-Frontal.png" alt="EBJ8-NK3-Ko81-301-C5-Frontal" border="0">',
+    "marca": "Marca montura",
+    "color": "Color montura",
+    "material": "Material Montura",
+  },
+  monturaInventario = {
+    "id_montura_inventario": 10,
+    "id_montura": 8,
+    "precio_unit": 90,
+    "stock": 20,
+    "codigo": "montura8",
+  },
+  setModalVerCarrito,
+  setMontura,
+  setMonturaInventario,
+  setCarrito,
+  carrito,
+  setPrecioTotal
+}) => {
+  const { src, alt, border } = formatearStringUrlImagen(montura["imagen"]);
+  return (
+    <div className="p-5 hover:bg-slate-50 w-[360px]">
+      <div className="w-30 h-[150px] p-5">
+        <img src={src} alt={alt} border={border} className="  mb-5" />
+      </div>
+      <div className="flex flex-col items-center">
+        <h3 className="text-center px-6 w-full uppercase text-xl font-semibold truncate ">{montura["nombre_montura"]}</h3>
+        <div className="flex flex-row gap-2 items-center">
+          <p className="text-sm ">S/.
+            <span className="text-2xl">
+              {monturaInventario["precio_unit"]}
+            </span>
+          </p>
+          <div className="hover:bg-slate-300 rounded-full p-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon icon-tabler icon-tabler-shopping-cart-plus"
+              width="30"
+              height="30"
+              viewBox="0 0 24 24"
+              strokeWidth="1.5"
+              stroke="#000000"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              onClick={(e) => {
+                e.preventDefault();
+                setMontura(montura);
+                setMonturaInventario(monturaInventario);
+                setModalVerCarrito(true)
+                setCarrito([...carrito, {
+                  "montura":montura,
+                  "monturaInventario":monturaInventario,
+                  "cantidad":1,
+                }])
+              }}
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+              <path d="M12.5 17h-6.5v-14h-2" />
+              <path d="M6 5l14 1l-.86 6.017m-2.64 .983h-10.5" />
+              <path d="M16 19h6" />
+              <path d="M19 16v6" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CatalogoMonturaCard;

src/components/DatosCliente.jsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import React from "react";
+const DatosCliente = ({
+    cliente,
+    setNotaAdicional,
+    notaAdicional,
+}) => {
+  return (
+    <div className="w-full">
+      <p className=" font-semibold text-4xl mb-8">
+        {cliente["nombres_y_apellidos"]}
+      </p>
+      <div className="flex flex-row">
+        <p className="w-1/2 mb-2">Edad: {cliente["edad"]}</p>
+        <p className="w-1/2 mb-2">Teléfono: {cliente["telefono"]}</p>
+      </div>
+      <p className="mb-2"> Dirección: {cliente["direccion"]}</p>
+      <label htmlFor="notaAdicional">Nota adicional: {""}</label>
+      <textarea
+        className="mt-2 border w-full py-2 px-3 rounded-md"
+        id="notaAdicional"
+        type="text"
+        placeholder="Detalle de lunas"
+        onChange={(e) => setNotaAdicional(e.target.value)}
+        value={notaAdicional}
+      ></textarea>
+    </div>
+  );
+};
+export default DatosCliente;

src/components/DetalleClienteModalPrescripcion.jsx ADDED Viewed

	@@ -0,0 +1,20 @@

+import React from "react";
+const DetalleClienteModalPrescripcion = ({ cliente, notaAdicional }) => {
+  return (
+    (cliente && Object.keys(cliente).length !== 0) > 0 && (
+      <div className="w-full h-full mr-5 flex flex-row justify-center">
+        <div className="flex flex-col w-full">
+          <p className=" mb-2">Edad: {cliente["edad"]}</p>
+          <p className=" mb-2">Teléfono: {cliente["telefono"]}</p>
+        </div>
+        <div className="flex flex-col w-full">
+          <p className=" mb-2"> Dirección: {cliente["direccion"]}</p>
+          <p className=" mb-2"> Nota adicional: {notaAdicional}</p>
+        </div>
+      </div>
+    )
+  );
+};
+export default DetalleClienteModalPrescripcion;

src/components/DetalleTablaMedidas.jsx ADDED Viewed

	@@ -0,0 +1,94 @@

+import React from "react";
+const DetalleTablaMedidas = ({ medidas }) => {
+  return (
+    (medidas && medidas.length > 0) && (
+      <div className=" flex flex-col gap-5 w-[462.3px] items-center justify-center px-5 mt-5">
+        <div className=" flex flex-col items-center justify-center">
+          <h3 className="font-semibold text-gray-500 mb-2 uppercase ">Lejos</h3>
+          <div className="w-full flex items-end mb-8">
+            <div className="">
+              <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                OD
+              </p>
+              <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                OI
+              </p>
+            </div>
+            <table className="rounded-lg text-center border-2 table-fixed w-full border-separate lg:border-collapse h-[6.5rem]">
+              <thead className="border-2">
+                <tr>
+                  <th className="border">Esfera</th>
+                  <th className="border">Cilindro</th>
+                  <th className="border">Eje</th>
+                  <th className="border">A/Y</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="border">{medidas[0]["Esfera_OD_lejos"]}</td>
+                  <td className="border">{medidas[0]["Cilindro_OD_lejos"]}</td>
+                  <td className="border">{medidas[0]["Eje_OD_lejos"]}</td>
+                  <td className="border">
+                    {medidas[0]["Agudeza_visual_OD_lejos"]}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border">{medidas[0]["Esfera_OI_lejos"]}</td>
+                  <td className="border">{medidas[0]["Cilindro_OI_lejos"]}</td>
+                  <td className="border">{medidas[0]["Eje_OI_lejos"]}</td>
+                  <td className="border">
+                    {medidas[0]["Agudeza_visual_OI_lejos"]}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div className=" flex flex-col items-center justify-center">
+          <h3 className="font-semibold text-gray-500 mb-2 uppercase ">Cerca</h3>
+          <div className="w-full flex items-end mb-8">
+            <div className="">
+              <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                OD
+              </p>
+              <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                OI
+              </p>
+            </div>
+            <table className="w-full rounded-lg bg-white text-center border-2 table-fixed  border-separate lg:border-collapse h-[6.5rem]">
+              <thead className="border-2">
+                <tr>
+                  <th className="border">Esfera</th>
+                  <th className="border">Cilindro</th>
+                  <th className="border">Eje</th>
+                  <th className="border">A/Y</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="border">{medidas[0]["Esfera_OD_cerca"]}</td>
+                  <td className="border">{medidas[0]["Cilindro_OD_cerca"]}</td>
+                  <td className="border">{medidas[0]["Eje_OD_cerca"]}</td>
+                  <td className="border">
+                    {medidas[0]["Agudeza_visual_OD_cerca"]}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="border">{medidas[0]["Esfera_OI_cerca"]}</td>
+                  <td className="border">{medidas[0]["Cilindro_OI_cerca"]}</td>
+                  <td className="border">{medidas[0]["Eje_OI_cerca"]}</td>
+                  <td className="border">
+                    {medidas[0]["Agudeza_visual_OI_cerca"]}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+export default DetalleTablaMedidas;

src/components/DropdownClientesItem.jsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import React from "react";
+const DropdownClientesItem = ({ cli, setBtnBuscarClick, setCliente, setClienteBusqueda, setNotaAdicional }) => {
+  return (
+    <li
+      key={cli["id_cliente"]}
+      onClick={() => {
+        setBtnBuscarClick(false);
+        setClienteBusqueda("");
+        setCliente(cli);
+        setNotaAdicional("");
+      }}
+      className="cursor-pointer hover:font-semibold hover:bg-slate-50 p-2 "
+    >
+      <p>{cli["nombres_y_apellidos"]}</p>
+      <p className="text-sm text-slate-400">{cli["edad"]}</p>
+      <p className="text-sm text-slate-400">{cli["telefono"]}</p>
+      <p className="text-sm text-slate-400">{cli["direccion"]}</p>
+    </li>
+  );
+};
+export default DropdownClientesItem;

src/components/ErrorMessage.jsx ADDED Viewed

	@@ -0,0 +1,11 @@

+const ErrorMessage = ({ mensaje }) => {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative my-2 mr-5" role="alert ">
+        <strong className="font-bold">Error: </strong>
+        <span className="block sm:inline">{mensaje}</span>
+      </div>
+    );
+};
+export default ErrorMessage;

src/components/Modal.jsx ADDED Viewed

	@@ -0,0 +1,128 @@

+import React from "react";
+import { registrarPost } from "../lib/conexionApi";
+const Modal = ({
+  openModal,
+  setOpenModal,
+  nombresYApellidos,
+  setNombresYApellidos,
+  edad,
+  setEdad,
+  telefono,
+  setTelefono,
+  direccion,
+  setDireccion,
+  setError,
+  setClienteBusqueda
+}) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
+      <div className="bg-white p-5 w-1/3 shadow-md rounded-lg">
+        <form>
+          <h3 className="text-center text-3xl text-bold mb-8">
+            Agregar nuevo cliente
+          </h3>
+          <div className="">
+            <label htmlFor="nombresYApellidos" className="block">
+              Nombres y apellidos
+            </label>
+            <input
+              type="text"
+              id="nombresYApellidos"
+              className="block w-full border p-2 rounded-md"
+              placeholder="Ej. Juan Perez"
+              onChange={(e) => setNombresYApellidos(e.target.value)}
+              value={nombresYApellidos}
+            />
+          </div>
+          <div className="flex flex-row gap-3 my-3">
+            <div className="w-1/2">
+              <label htmlFor="edad" className="block">
+                Edad
+              </label>
+              <input
+                type="number"
+                id="edad"
+                className="block w-full border p-2 rounded-md"
+                placeholder="Ej. 40"
+                onChange={(e) => setEdad(e.target.value)}
+                value={edad}
+              />
+            </div>
+            <div className="w-1/2">
+              <label htmlFor="telefono" className="">
+                Telefono
+              </label>
+              <input
+                type="text"
+                id="telefono"
+                className="block w-full border p-2 rounded-md"
+                placeholder="Ej. 999888777"
+                onChange={(e) => setTelefono(e.target.value)}
+                value={telefono}
+              />
+            </div>
+          </div>
+          <div>
+            <label htmlFor="direccion" className="">
+              Direccion
+            </label>
+            <input
+              type="text"
+              id="direccion"
+              className="block w-full border p-2 rounded-md"
+              placeholder="Ej. Calle 123"
+              onChange={(e) => setDireccion(e.target.value)}
+              value={direccion}
+            />
+          </div>
+          <div>
+            <div>
+              <button
+                type="submit"
+                className="cursor-pointer py-2 w-full bg-slate-700 hover:bg-slate-800 text-white font-semibold text-center rounded-md mt-5"
+                onClick={(e) => {
+                  e.preventDefault();
+                  const nuevoCliente = {
+                    nombres_y_apellidos: nombresYApellidos,
+                    edad: edad,
+                    telefono: telefono,
+                    direccion: direccion,
+                  };
+                  registrarPost("clientes", nuevoCliente);
+                  setOpenModal(false);
+                  setNombresYApellidos("");
+                  setEdad("");
+                  setTelefono("");
+                  setDireccion("");
+                  setError(false);
+                  setClienteBusqueda("");
+                }}
+              >
+                Agregar cliente
+              </button>
+            </div>
+            <div>
+              <button
+                className="cursor-pointer py-2 w-full bg-slate-300 hover:bg-slate-400 text-gray-700 font-semibold text-center rounded-md mt-2"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setOpenModal(false);
+                  setNombresYApellidos("");
+                  setEdad("");
+                  setTelefono("");
+                  setDireccion("");
+                  setClienteBusqueda("");
+                }}
+              >
+                Cancelar
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+export default Modal;

src/components/ModalBoleta.jsx ADDED Viewed

	@@ -0,0 +1,145 @@

+import React, { useEffect, useState } from "react";
+import { obtenerEspecifico, obtenerGet, procesarBoleta, registrarPost } from "../lib/conexionApi";
+import { Navigate } from "react-router";
+const ModalBoleta = ({
+  fecha,
+  setModalBoleta,
+  precioTotal,
+  carrito,
+  prescripcion,
+  adelanto,
+  precioLunas,
+  setPrescripcion,
+  setPrecioTotal,
+  setCarrito
+}) => {
+    const [clienteBoleta, setClienteBoleta] = useState({})
+    const [errorClienteBoleta, setErrorClienteBoleta] = useState(false)
+    const [boleta, setBoleta] = useState({})
+    const [errorBoleta, setErrorBoleta] = useState(false)
+    const [boletaEmitida, setBoletaEmitida] = useState(false)
+    useEffect(() => {
+        obtenerEspecifico("clientes/prescripcion", { "id_prescripcion": prescripcion[0]["id_prescripcion"] }, setClienteBoleta, setErrorClienteBoleta)
+    }, [])
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
+      <div className="bg-white p-10 shadow-md rounded-lg w-[50rem]">
+        <div className="  flex flex-col w-full h-full ">
+          <div className="flex flex-col w-full h-full p-5 px-10 mb-5 border-2 pt-5 rounded-lg">
+            <p className="text-4xl font-bold mb-2">Arte Visual</p>
+            <div className="flex">
+              <div className="w-2/3">
+                <p>Av. Los Héroes 632 S. J. M</p>
+                <div className="flex gap-1 mb-5">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="icon icon-tabler icon-tabler-brand-whatsapp"
+                    width="25"
+                    height="25"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1"
+                    stroke="#000000"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
+                    <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
+                  </svg>
+                  <p>902 501 054/968 600 415</p>
+                </div>
+                <p>Señor(a): {clienteBoleta["nombres_y_apellidos"]}</p>
+                <p>Dirección: {clienteBoleta["direccion"]}</p>
+                <p>Teléfono: {clienteBoleta["telefono"]}</p>
+              </div>
+              <div className="w-1/3 text-right">
+                <p className="uppercase">NOTA DE PEDIDO</p>
+                <p>00000{prescripcion[0]["id_prescripcion"]}</p>
+                <p>Fecha: {fecha}</p>
+              </div>
+            </div>
+            <p className="mt-8">Tabla de productos</p>
+            <div className="flex justify-center items-center w-full my-5">
+              <table className="rounded-lg bg-white text-center border-2 table-fixed w-full border-separate lg:border-collapse">
+                <thead className="border-2">
+                  <tr>
+                    <th className="border w-[7rem] font-semibold">Cantidad</th>
+                    <th className="border font-semibold">Descripción</th>
+                    <th className="border w-[8rem] font-semibold">Precio Unit.</th>
+                    <th className="border w-[8rem] font-semibold">Importe</th>
+                  </tr>
+                </thead>
+                <tbody>
+                    {carrito.map(item => {
+                        return (
+                            <tr key={item["monturaInventario"]["codigo"]}>
+                                <td className="border">{item["cantidad"]}</td>
+                                <td className="border">{item["montura"]["nombre_montura"]}</td>
+                                <td className="border">S/.{item["monturaInventario"]["precio_unit"]}</td>
+                                <td className="border">S/.{item["monturaInventario"]["precio_unit"]*item["cantidad"]}</td>
+                            </tr>
+                        )
+                    })}
+                    <tr>
+                      <td className="border">{1}</td>
+                      <td className="border">detalle de lunas: {prescripcion[0]["detalle_lunas"]}</td>
+                      <td className="border">S/.{parseFloat(precioLunas)}</td>
+                      <td className="border">S/.{1*parseFloat(precioLunas)}</td>
+                    </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="flex justify-between">
+              <p>Adelanto: S/.{adelanto}</p>
+              <p>Saldo: S/.{precioTotal-adelanto}</p>
+              <p>Total: S/.{precioTotal}</p>
+            </div>
+          </div>
+          <h3 className="text-center text-2xl text-bold mb-8">
+            ¿Emitir boleta?
+          </h3>
+          <div className="flex gap-5">
+            <button
+              className="cursor-pointer py-2 w-1/2 bg-slate-300 hover:bg-slate-400 text-gray-700 font-semibold text-center rounded-md mt-2"
+              onClick={(e) => {
+                setModalBoleta(false)
+              }}
+            >
+              No
+            </button>
+            <button
+              type="submit"
+              className="w-1/2 mt-2 cursor-pointer py-2  bg-slate-700 hover:bg-slate-800 text-white font-semibold text-center rounded-md "
+              onClick={async (e) => {
+                const finalizarEmisionBoleta = async () => {
+                  await procesarBoleta(precioTotal, carrito, adelanto, prescripcion[0]["id_prescripcion"], prescripcion[0]["detalle_lunas"], precioLunas );
+                  // reiniciar precioTotal carrito, prescripcion,
+                  await setPrecioTotal(0)
+                  await setCarrito([])
+                  await setPrescripcion([])
+                }
+                finalizarEmisionBoleta()
+                setBoletaEmitida(true)
+              }}
+            >
+              Sí
+            </button>
+          </div>
+        </div>
+      </div>
+      {boletaEmitida && (
+        <Navigate to="/" replace={true}/>
+      )}
+    </div>
+  );
+};
+export default ModalBoleta;

src/components/ModalPrescripcion.jsx ADDED Viewed

	@@ -0,0 +1,83 @@

+import React from "react";
+import DetalleTablaMedidas from "./DetalleTablaMedidas";
+import DetalleClienteModalPrescripcion from "./DetalleClienteModalPrescripcion";
+import { registrarPost } from "../lib/conexionApi";
+const ModalPrescripcion = ({
+  setOpenModalPrescripcion,
+  setPrescripcionLista,
+  cliente,
+  medidas,
+  fechaFormateada,
+  notaAdicional,
+  setActualizacionMedidas,
+  setAsignacionNuevasMedidas,
+  setPrescripcionRegistrada
+}) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
+      <div className="bg-white p-10 shadow-md rounded-lg">
+        <form className="  flex flex-col w-full h-full ">
+          <div className="flex flex-col w-full h-full p-5 px-10 mb-5 border-2 pt-5 rounded-lg ">
+            <div className="flex flex-row justify-between text-gray-500">
+              <p className="italic text-left w-ful mb-5">Prescripción</p>
+              <p className="text-right w-ful mb-5">{fechaFormateada}</p>
+            </div>
+            <p className="font-semibold text-2xl mb-8 text-center">
+              {cliente["nombres_y_apellidos"]}
+            </p>
+            <div className="flex flex-col">
+              <div className="">
+                <DetalleClienteModalPrescripcion
+                  cliente={cliente}
+                  notaAdicional={notaAdicional}
+                />
+              </div>
+              <div>
+                <DetalleTablaMedidas medidas={medidas} />
+              </div>
+            </div>
+          </div>
+          <h3 className="text-center text-2xl text-bold mb-8">
+            ¿Estás seguro que deseas continuar?
+          </h3>
+          <div className="flex gap-5">
+            <button
+              className="cursor-pointer py-2 w-1/2 bg-slate-300 hover:bg-slate-400 text-gray-700 font-semibold text-center rounded-md mt-2"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log("No");
+                setOpenModalPrescripcion(false);
+                setActualizacionMedidas(false)
+                setAsignacionNuevasMedidas(false)
+                setPrescripcionLista(false);
+              }}
+            >
+              No
+            </button>
+              <button
+                type="submit"
+                className="w-1/2 mt-2 cursor-pointer py-2  bg-slate-700 hover:bg-slate-800 text-white font-semibold text-center rounded-md "
+                onClick={(e) => {
+                  e.preventDefault();
+                  const nuevaPrescripcion = {
+                    "id_medidas": medidas[0]["id_medidas"],
+                    "detalle_lunas": notaAdicional,
+                    "fecha": fechaFormateada,
+                  };
+                  registrarPost('prescripciones', nuevaPrescripcion)
+                  setPrescripcionRegistrada(true)
+                }}
+                >
+                Sí
+              </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+export default ModalPrescripcion;

src/components/ModalVerCarrito.jsx ADDED Viewed

	@@ -0,0 +1,84 @@

+import React from "react";
+import { formatearStringUrlImagen } from "../lib/funciones";
+const ModalVerCarrito = ({
+  montura = {
+    "id_montura": 10,
+    "nombre_montura": "Nombre monturaaaaaaaaaaaaaaaaaaa",
+    "imagen":
+      '<img src="https://i.ibb.co/jHWcz8B/EBJ8-NK3-Ko81-301-C5-Frontal.png" alt="EBJ8-NK3-Ko81-301-C5-Frontal" border="0">',
+    "marca": "Marca montura",
+    "color": "Color montura",
+    "material": "Material Montura",
+  },
+  monturaInventario = {
+    "id_montura_inventario": 10,
+    "id_montura": 8,
+    "precio_unit": 90,
+    "stock": 20,
+    "codigo": "montura8",
+  },
+  setModalVerCarrito,
+  carrito,
+  setMontura,
+  setMonturaInventario,
+  setIrAlCarrito
+}) => {
+  const { src, alt, border } = formatearStringUrlImagen(montura["imagen"]);
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
+      <div className="bg-white px-10 py-5 w-[790.5px] shadow-md rounded-lg ">
+        <div className=" flex items-center justify-between border-b-2 border-black pb-2">
+          <p className="uppercase">Recién añadido a tu carrito de compra</p>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icon-tabler-x w-10 h-10 rounded-full cursor-pointer p-1"
+            width="25"
+            height="25"
+            viewBox="0 0 24 24"
+            strokeWidth="2"
+            stroke="#000000"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            onClick={() => {
+                setMonturaInventario({})
+                setMontura({})
+                setModalVerCarrito(false)
+            }}
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </svg>
+        </div>
+        <div className="flex w-full my-10 ">
+          <div className="w-1/2">
+            <img src={src} alt={alt} border={border} />
+          </div>
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <p className="w-full text-xl truncate uppercase">
+                {montura["nombre_montura"]}
+              </p>
+              <p className="text-xl uppercase">{montura["marca"]}</p>
+              <p className="mt-3">
+                Color: <span className="uppercase">{montura["color"]}</span>
+              </p>
+              <p className="">
+                Material:{" "}
+                <span className="uppercase">{montura["material"]}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <button className="w-full text-xl py-4 uppercase border-2 cursor-pointer border-black hover:bg-gray-300" onClick={() => setIrAlCarrito(true)} >
+          Ver Carrito ({carrito.length})
+        </button>
+      </div>
+    </div>
+  );
+};
+export default ModalVerCarrito;

src/components/TablaMedidas.jsx ADDED Viewed

	@@ -0,0 +1,247 @@

+import React from 'react'
+const TablaMedidas = ({
+    esferaODlejos, setEsferaODLejos,
+    cilindroODlejos, setCilindroODlejos,
+    ejeODlejos, setEjeODlejos,
+    agudezavisualODlejos, setAgudezavisualODlejos,
+    esferaOIlejos, setEsferaOIlejos,
+    cilindroOIlejos, setCilindroOIlejos,
+    ejeOIlejos, setEjeOIlejos,
+    agudezavisualOIlejos, setAgudezavisualOIlejos,
+    esferaODcerca, setEsferaODcerca,
+    cilindroODcerca, setCilindroODcerca,
+    ejeODcerca, setEjeODcerca,
+    agudezavisualODcerca, setAgudezavisualODcerca,
+    esferaOIcerca, setEsferaOIcerca,
+    cilindroOIcerca, setCilindroOIcerca,
+    ejeOIcerca, setEjeOIcerca,
+    agudezavisualOIcerca, setAgudezavisualOIcerca
+}) => {
+  return (
+    <div className=" flex flex-col items-center justify-center mt-5 px-5">
+            <h3 className="font-semibold text-gray-500 mb-2 uppercase ">
+              Lejos
+            </h3>
+            <div className="w-full flex items-end mb-8">
+              <div className="">
+                <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                  OD
+                </p>
+                <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                  OI
+                </p>
+              </div>
+              <table className="rounded-lg bg-white text-center border-2 table-fixed  border-separate lg:border-collapse h-[6.5rem]">
+                <thead className="border-2">
+                  <tr>
+                    <th className="border">Esfera</th>
+                    <th className="border">Cilindro</th>
+                    <th className="border">Eje</th>
+                    <th className="border">A/Y</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setEsferaODLejos(e.target.value)
+                        }
+                        value={esferaODlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setCilindroODlejos(e.target.value)
+                        }
+                        value={cilindroODlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setEjeODlejos(e.target.value)
+                        }
+                        value={ejeODlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setAgudezavisualODlejos(e.target.value)
+                        }
+                        value={agudezavisualODlejos}
+                      />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setEsferaOIlejos(e.target.value)
+                        }
+                        value={esferaOIlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setCilindroOIlejos(e.target.value)
+                        }
+                        value={cilindroOIlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setEjeOIlejos(e.target.value)
+                        }
+                        value={ejeOIlejos}
+                      />
+                    </td>
+                    <td className="border">
+                      <input
+                        type="text"
+                        className="text-center w-full h-full"
+                        onChange={(e) =>
+                          setAgudezavisualOIlejos(e.target.value)
+                        }
+                        value={agudezavisualOIlejos}
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className=" flex flex-col items-center justify-center mt-5">
+              <h3 className="font-semibold text-gray-500 mb-2 uppercase ">
+                Cerca
+              </h3>
+              <div className="w-full flex items-end mb-8">
+                <div className="">
+                  <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                    OD
+                  </p>
+                  <p className="h-[34.81px] pr-2 font-semibold text-gray-500 text-center">
+                    OI
+                  </p>
+                </div>
+                <table className="rounded-lg bg-white text-center border-2 table-fixed  border-separate lg:border-collapse h-[6.5rem]">
+                  <thead className="border-2">
+                    <tr>
+                      <th className="border">Esfera</th>
+                      <th className="border">Cilindro</th>
+                      <th className="border">Eje</th>
+                      <th className="border">A/Y</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setEsferaODcerca(e.target.value)
+                          }
+                          value={esferaODcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setCilindroODcerca(e.target.value)
+                          }
+                          value={cilindroODcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setEjeODcerca(e.target.value)
+                          }
+                          value={ejeODcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setAgudezavisualODcerca(e.target.value)
+                          }
+                          value={agudezavisualODcerca}
+                        />
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setEsferaOIcerca(e.target.value)
+                          }
+                          value={esferaOIcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setCilindroOIcerca(e.target.value)
+                          }
+                          value={cilindroOIcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setEjeOIcerca(e.target.value)
+                          }
+                          value={ejeOIcerca}
+                        />
+                      </td>
+                      <td className="border">
+                        <input
+                          type="text"
+                          className="text-center w-full h-full"
+                          onChange={(e) =>
+                            setAgudezavisualOIcerca(e.target.value)
+                          }
+                          value={agudezavisualOIcerca}
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+  )
+}
+export default TablaMedidas

src/index.css ADDED Viewed

	@@ -0,0 +1,9 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+#nav-ul a.active li{
+    background-color: rgb(255 255 255);
+    color: black;
+    font-weight: 600;
+  }

src/lib/conexionApi.js ADDED Viewed

	@@ -0,0 +1,134 @@

+const url = import.meta.env.VITE_API_URL
+export const cargarApi = async () => {
+    const response = await fetch(url)
+    if (response.ok) {
+        const data = await response.json()
+        console.log(data);
+    }
+}
+export const obtenerGet = async (endpoint, funcionSet, funcionSetError) => {
+    const response = await fetch(`${url}/${endpoint}`)
+    const data = await response.json()
+    if (data.error || data.length === 0 || Object.keys(data).length === 0) {
+        funcionSetError(true)
+    }
+    funcionSet(data)
+}
+export const registrarPost = async (endpoint, data) => {
+    const response = await fetch(`${url}/${endpoint}`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+            'Content-type': 'application/json'
+        }
+    })
+    const res = await response.json()
+    return res
+}
+export const obtenerEspecifico = async (endpoint, dato, funcionSet, funcionSetError) => {
+    const response = await fetch(`${url}/${endpoint}`, {
+        method: 'POST',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify(dato),
+    })
+    const data = await response.json()
+    funcionSet(data)
+    if (data.error || data.length === 0) {
+        funcionSetError(true)
+    }
+}
+export const actualizarPut = async (endpoint, data) => {
+    const response = await fetch(`${url}/${endpoint}`, {
+        method: 'PUT',
+        body: JSON.stringify(data),
+        headers: {
+            'Content-type': 'application/json'
+        }
+    })
+    const res = await response.json()
+    return res
+}
+export const getEspecifico = async (endpoint, dato) => {
+    const response = await fetch(`${url}/${endpoint}`)
+    const data = await response.json()
+    return data
+}
+export const emitirPdfPrescripcion = (idPrescripcion) => {
+    const urlPdf = `${url}/prescripcion/pdf/${idPrescripcion}`
+    return urlPdf
+}
+export const procesarBoleta = async (precioTotal, carrito, adelanto, idprescripcion, descripcion, precioLunas) => {
+    const responseRegistrarBoleta = await fetch(`${url}/boletas`, {
+        method: 'POST',
+        body: JSON.stringify({
+            "precio_total": precioTotal,
+            "estado_recojo": "pendiente"
+        }),
+        headers: {
+            'Content-type': 'application/json'
+        }
+    })
+    const resRegistrarBoleta = await responseRegistrarBoleta.json()
+    console.log(resRegistrarBoleta)
+    const boleta = await fetch(`${url}/boleta/ultima`)
+    const responseBoleta = await boleta.json()
+    console.log(responseBoleta)
+    carrito.forEach(async item => {
+        console.log(item);
+        const responseMonturasPedidos = await fetch(`${url}/monturas_pedidos`, {
+            method: 'POST',
+            body: JSON.stringify({
+                "id_montura_inventario": item["monturaInventario"]["id_montura_inventario"],
+                "cantidad": item["cantidad"],
+                "precio": item["monturaInventario"]["precio_unit"]*item["cantidad"],
+                "id_boleta": responseBoleta["id_boleta"]
+            }),
+            headers: {
+                'Content-type': 'application/json'
+            }
+        })
+        const resMonturasPedidos = await responseMonturasPedidos.json()
+        console.log(resMonturasPedidos)
+    })
+    const lunasPedido = await fetch(`${url}/lunas_pedido`, {
+        method: 'POST',
+        body: JSON.stringify({
+            "id_prescripcion": idprescripcion,
+            "precio": parseFloat(precioLunas),
+            "id_boleta": responseBoleta["id_boleta"] ,
+            "descripcion": descripcion,
+            "cantidad": 1
+        }),
+        headers: {
+            'Content-type': 'application/json'
+        }
+    })
+    const resLunasPedido = await lunasPedido.json()
+    console.log(resLunasPedido);
+    const responsePDF = await fetch(`${url}/boleta/descargarPDF/${responseBoleta["id_boleta"]}/${adelanto}`)
+    window.open(responsePDF.url, "_blank");
+}
+export const prescripcionPdff = async (idPrescripcion) => {
+    const responsePDF = await fetch(`${url}/prescripcion/pdf/${idPrescripcion}`)
+    window.open(responsePDF.url, "_blank");
+}

src/lib/funciones.js ADDED Viewed

	@@ -0,0 +1,22 @@

+import { obtenerGet, registrarPost } from "./conexionApi";
+export function formatearStringUrlImagen(stringImagen='<img src="https://i.ibb.co/TTmWTjV/df-BBqw-TYjvfrontal-tom-silver-optimania.png" alt="df-BBqw-TYjvfrontal-tom-silver-optimania" border="0">') {
+    // Crear un elemento temporal para parsear el string HTML
+    const tempElement = document.createElement('div');
+    tempElement.innerHTML = stringImagen;
+    // Obtener los atributos necesarios del elemento
+    const src = tempElement.querySelector('img').getAttribute('src');
+    const alt = tempElement.querySelector('img').getAttribute('alt');
+    const border = tempElement.querySelector('img').getAttribute('border');
+    // Crear un objeto con los valores obtenidos
+    const imagenObj = {
+      src: src,
+      alt: alt,
+      border: border
+    };
+    return imagenObj;
+  }

src/main.jsx ADDED Viewed

	@@ -0,0 +1,13 @@

+import React from 'react'
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,9 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["index.html", "./src/**/*.jsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: []
+}

vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})