kiosco_desk/renderer/pages/inicio.tsx

import React, { useEffect, useState } from "react";
import Layout from "../components/Layout/Layout";
import Depositar from "../components/Depositar/Depositar";
import Imprimir from "../components/Imprimir/Imprimir";
import { useRouter } from "next/router";
import axios from "axios";
import Swal from "sweetalert2";

export interface alumno {
  nombre: string;
  apellidoP: string;
  apellidoM: string;
  tipoUsuario: string;
  noCuenta: string;
  adscripcion: null;
  carrera: string;
  saldo: number;
}

export default function inicio() {
  const [activeTab, setActiveTab] = useState<string>("Inicio");
  const [alumno, setAlumno] = useState<alumno>({
    nombre: "",
    apellidoP: "",
    apellidoM: "",
    tipoUsuario: "",
    noCuenta: "",
    adscripcion: null,
    carrera: "",
    saldo: 0,
  });
  const [saldo, setSaldo] = useState<number>(0);
  const [deposito, setDeposito] = useState<number>(0);
  const [api, setApi] = useState("");
  const [getsaldo, setGetSaldo] = useState<boolean>(false);
  const [transaccion, setTransaccion] = useState<string>("Impresion");
  const [plataforma, setPlataforma] = useState<string>("Windows");
  const router = useRouter();

  useEffect(() => {
    const loadApi = () => {
      window.ipc.on("getApi", (message: string) => {
        setApi(message);
      });
      window.ipc.send("getApi", "");
    };

    const config = () => {
      window.ipc.send("statusPuerto", "");

      window.ipc.on("LimpiarDinero", (dinero: number) => {
        setSaldo(dinero);
      });

      // Escucha la respuesta del evento statusPuerto del proceso principal
      window.ipc.on("statusPuerto", (event: { abierto: boolean }, arg) => {
        if (!event.abierto) {
          router.push("/configuracionMonedero");
          Swal.fire({
            icon: "error",
            title: "Error :(",
            text: "El monedero del kiosco no esta abierto.",
          });
        }
      });
    };

    setAlumno({
      nombre: localStorage.getItem("kioscoAcatlanNombre"),
      apellidoP: localStorage.getItem("kioscoAcatlanApellidoP"),
      apellidoM: localStorage.getItem("kioscoAcatlanApellidoM"),
      tipoUsuario: localStorage.getItem("kioscoAcatlanTipoUsuario"),
      noCuenta: localStorage.getItem("kioscoAcatlanNumeroCuenta"),
      adscripcion: null,
      carrera: localStorage.getItem("kioscoAcatlanCarreraAds"),
      saldo: parseFloat(localStorage.getItem("kioscoAcatlanSaldo")),
    });

    loadApi();
    config();
  }, []);

  useEffect(() => {
    if (api) {
      const loadSaldo = async () => {
        try {
          axios.defaults.headers.common.Authorization =
            localStorage.getItem("Token");
          await axios
            .get(`http://localhost:3000/persona/saldo`, {
              headers: {
                Authorization: `Bearer ${localStorage.getItem("Token")}`,
              },
            })
            .then((res) => {
              setSaldo(res.data);
            })
            .catch((error) => {
              console.log(error);
            });
        } catch (error) {}
      };

      loadSaldo();
    }
  }, [api, getsaldo]);

  const handleChangeTab = (tab: string) => {
    if (deposito !== 0 && tab !== "Inicio") {
      Swal.fire({
        icon: "warning",
        title: "Espera",
        text: "Finaliza tu deposito antes de cabiar de vista",
      });
    } else {
      setActiveTab(tab);
    }
  };

  return (
    <Layout>
      <ul
        className="nav justify-content-center  flex-column ms-3  mt-3 fs-4"
        style={{ width: "18%" }}
      >
        {/*
        <li className="nav-item" onClick={() => handleChangeTab("Inicio")}>
          <p
            className="nav-link shadow bg-white rounded"
            style={{
              borderRight:
                activeTab === "Inicio"
                  ? "8px solid #BB8800"
                  : "8px solid #1E3C70",
            }}
          >
            Depositar
          </p>
        </li>
          */}
        {/* <li className="nav-item" onClick={() => handleChangeTab("Imprimir")}>
          <p
            className="nav-link shadow  bg-white rounded"
            style={{
              borderRight:
                activeTab === "Imprimir"
                  ? "8px solid #BB8800"
                  : "8px solid #1E3C70",
            }}
          >
            Imprimir
          </p>
        </li> */}
        <li
          className="nav-item"
          onClick={() => {
            if (deposito !== 0) {
              Swal.fire({
                icon: "warning",
                title: "Espera",
                text: "Finaliza tu deposito antes de cerrar sesión",
              });
            } else {
              localStorage.removeItem("kioscoAcatlanApellidoM");
              localStorage.removeItem("kioscoAcatlanApellidoP");
              localStorage.removeItem("kioscoAcatlanCarreraAds");
              localStorage.removeItem("kioscoAcatlanTipoUsuario");
              localStorage.removeItem("kioscoAcatlanSaldo");
              localStorage.removeItem("kioscoAcatlanNombre");
              localStorage.removeItem("kioscoAcatlanNumeroCuenta");
              router.push("/home");
            }
          }}
        >
          <p
            className="nav-link shadow  bg-white rounded"
            style={{ borderRight: " 8px solid #C51E3A" }}
          >
            Cerrar sesión
          </p>
        </li>
      </ul>
      <div className="mt-3 mx-3 w-100 d-flex flex-column align-items-center ">
        <div className="shadow bg-white rounded py-3 px-4 w-75">
          <div className="d-flex justify-content-between ">
            <p className="fs-5">
              <b>Alumno:</b> {alumno.nombre} {alumno.apellidoP}{" "}
              {alumno.apellidoM}
            </p>
            <p className="fs-5">
              <b>No. Cuenta:</b> {alumno.noCuenta}
            </p>
          </div>
          <p className="fs-5 text-danger">
            <b>Saldo:</b> ${saldo}
          </p>
        </div>
        <div className="w-100 mt-3 d-flex flex-column align-items-center">
          {activeTab === "Inicio" && (
            <Depositar
              api={api}
              setSaldo={setSaldo}
              saldo={saldo}
              changeTab={setActiveTab}
              deposito={deposito}
              setDeposito={setDeposito}
              setGetSaldo={setGetSaldo}
              getSaldo={getsaldo}
              transaccion={transaccion}
              setTransaccion={setTransaccion}
              plataforma={plataforma}
              setPlataforma={setPlataforma}
            />
          )}
          {/* {activeTab === "Imprimir" && (
            <Imprimir api={api} setSaldo={setSaldo} saldo={saldo} />
          )} */}
        </div>
      </div>
    </Layout>
  );
}