Conexon servicios

package.json

@@ -57,6 +57,7 @@
         "stylis": "4.3.1",
         "stylis-plugin-rtl": "2.1.1",
         "type-fest": "4.9.0",
+        "uuid": "^9.0.1",
         "web-vitals": "3.5.1",
         "yup": "^1.3.3",
         "zod": "3.22.4"

src/@fuse/core/FuseLoading/FuseLoading.tsx

@@ -32,7 +32,7 @@ function FuseLoading(props: FuseLoadingProps) {
 				className="-mb-16 text-13 font-medium sm:text-20"
 				color="text.secondary"
 			>
-				Loading
+				Cargando
 			</Typography>
 			<Box
 				id="spinner"

src/@mock-api/mock-api.json

@@ -32751,8 +32751,8 @@
             "password": "admin",
             "role": "admin",
             "data": {
-              "displayName": "Abbott Keitch",
-              "photoURL": "assets/images/avatars/brian-hughes.jpg",
+              "displayName": "Andres Alvarez",
+              "photoURL": "assets/images/avatars/user.jpg",
               "email": "admin@qsoftec.com",
               "settings": {
                 "layout": {},

src/app/auth/AuthRouteProvider.tsx

@@ -31,9 +31,20 @@ export type SignInPayload = {
 };
 
 export type SignUpPayload = {
-	displayName: string;
+	usuUsuario: string;
+	usuNombre: string;
+	detCodigo: number;
+	empIdentificacion: string;
+	empRazonSocial: string;
+	empNombreComercial: string;
+	empContacto: string;
+	empDireccion: string;
+	empMail: string;
+	empCodContribuyente: string;
+	empDescripcion: string;
+	empLlevaContabilidad: string;
 	password: string;
-	email: string;
+	passwordConfirm: string;
 };
 
 type AuthContext = {

src/app/auth/services/jwt/useJwtAuth.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { useState, useEffect, useCallback } from 'react';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import jwtDecode, { JwtPayload } from 'jwt-decode';
 import _ from '@lodash';
 import { PartialDeep } from 'type-fest';
+import { loginIn } from 'src/app/services/user.service';
 
 const defaultAuthConfig = {
 	tokenStorageKey: 'jwt_access_token',
@@ -47,6 +49,10 @@ export type JwtAuth<User, SignInPayload, SignUpPayload> = {
 	setIsLoading: (isLoading: boolean) => void;
 };
 
+type UserLogin = {
+	user: string;
+	password: string;
+};
 /**
  * useJwtAuth hook
  * Description: This hook handles the authentication flow using JWT
@@ -94,8 +100,8 @@ const useJwtAuth = <User, SignInPayload, SignUpPayload>(
 	/**
 	 * Handle sign-in success
 	 */
-	const handleSignInSuccess = useCallback((userData: User, accessToken: string) => {
-		setSession(accessToken);
+	const handleSignInSuccess = useCallback((userData: User) => {
+		// setSession(accessToken);
 
 		setIsAuthenticated(true);
 
@@ -182,7 +188,7 @@ const useJwtAuth = <User, SignInPayload, SignUpPayload>(
 
 					const userData = response?.data;
 
-					handleSignInSuccess(userData, accessToken);
+					handleSignInSuccess(userData);
 
 					return true;
 				} catch (error) {
@@ -215,10 +221,19 @@ const useJwtAuth = <User, SignInPayload, SignUpPayload>(
 	/**
 	 * Sign in
 	 */
-	const signIn = async (credentials: SignInPayload) => {
-		const response = axios.post(authConfig.signInUrl, credentials);
+	const signIn = async (credentials: UserLogin) => {
+		// const response = axios.post(authConfig.signInUrl, credentials);
+		const {error, bodyOut} = await loginIn(credentials.email, credentials.password);
 
-		response.then(
+		if(error.codigo === '0'){
+			const userData = bodyOut.data[0];
+
+			handleSignInSuccess(userData);
+
+		}
+		
+		return bodyOut.data[0];
+		/* response.then(
 			(res: AxiosResponse<{ user: User; access_token: string }>) => {
 				const userData = res?.data?.user;
 				const accessToken = res?.data?.access_token;
@@ -234,9 +249,9 @@ const useJwtAuth = <User, SignInPayload, SignUpPayload>(
 
 				return axiosError;
 			}
-		);
+		); */
 
-		return response;
+		// return response;
 	};
 
 	/**

src/app/configs/enviroment.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { v4 as uuidV4 } from 'uuid';
+
+interface Header {
+	dispositivo: string;
+	canal: string | null;
+	medio: string | null;
+	aplicacion: string;
+	tipoTransaccion: string | null;
+	usuario: string | number;
+	uuid: string;
+	fechaHora: string | null;
+	idioma: string | null;
+	empresa: string | null;
+	geolocalizacion: string | null;
+}
+
+interface User {
+	usercode: string | number;
+}
+
+const user: User = JSON.parse(localStorage.getItem('user'));
+
+const headerIn: Header = {
+	dispositivo: 'WeLaptop',
+	canal: null,
+	medio: null,
+	aplicacion: 'SINCOARV2',
+	tipoTransaccion: null,
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	usuario: user ? user.usercode : 'user',
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	uuid: uuidV4(),
+	fechaHora: null,
+	idioma: null,
+	empresa: null,
+	geolocalizacion: null
+};
+
+const url = 'http://services.qsoftec.com:18080/inventario-rs-services-1.0-SNAPSHOT/servicios'; // test
+// let url = 'https://tramitesarmas.ccffaa.mil.ec/sincoar/servicios' //produccion
+
+const config = {
+	api: url,
+	headerIn
+};
+
+export default config;

src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx

@@ -1,7 +1,7 @@
-import { useFormik } from "formik";
-import { Client } from "../../DataClientInterfaz";
-import AddClientRender from "./AddClientRender";
-import * as Yup from "yup";
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { Client } from '../../DataClientInterfaz';
+import AddClientRender from './AddClientRender';
 
 interface Props {
 	open: boolean;
@@ -12,38 +12,37 @@ function AddClient({ open, setOpen, handleSelectClient }: Props) {
 	const formik = useFormik<Client>({
 		initialValues: {
 			id: Math.floor(Math.random() * 100),
-      nombreComercial: "",
-      razonSocial: "",
-      identificacion: "",
-      direccion: "",
-      telefono: "",
-      correo: "",
+			nombreComercial: '',
+			razonSocial: '',
+			identificacion: '',
+			direccion: '',
+			telefono: '',
+			correo: ''
 		},
 		validationSchema: Yup.object({
-      nombreComercial: Yup.string().required("El campo es Obligatorio"),
-      razonSocial: Yup.string().required("El campo es Obligatorio"),
-      identificacion: Yup.string().required("El campo es Obligatorio"),
-      direccion: Yup.string().required("El campo es Obligatorio"),
-      telefono: Yup.string().required("El campo es Obligatorio"),
-      correo: Yup.string().required("El campo es Obligatorio")
-        .email("Correo no valido"),
+			nombreComercial: Yup.string().required('El campo es Obligatorio'),
+			razonSocial: Yup.string().required('El campo es Obligatorio'),
+			identificacion: Yup.string().required('El campo es Obligatorio'),
+			direccion: Yup.string().required('El campo es Obligatorio'),
+			telefono: Yup.string().required('El campo es Obligatorio'),
+			correo: Yup.string().required('El campo es Obligatorio').email('Correo no valido')
 		}),
 		onSubmit: (value) => {
-	  handleSaveClient(value)
-    },
+			handleSaveClient(value);
+		}
 	});
 
-  const handleOnChange = ({ target }) => {
-    const { name, value } = target;
+	const handleOnChange = (event: { target: HTMLInputElement }) => {
+		const { name, value } = event.target;
 		formik.setFieldValue(name, value);
 	};
 
 	// TODO: Guardar cliente en la base de datos y seleccionar
-  const handleSaveClient = (value) => {
-	handleSelectClient(value)
+	const handleSaveClient = (value: Client) => {
+		handleSelectClient(value);
 		formik.resetForm();
 		setOpen(false);
-  }
+	};
 
 	return (
 		<AddClientRender

src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx

@@ -1,14 +1,6 @@
-import {
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Button,
-  Grid,
-  TextField,
-  Dialog,
-} from "@mui/material";
-import { FormikProps } from "formik";
-import { Client } from "../../DataClientInterfaz";
+import { DialogActions, DialogContent, DialogTitle, Button, Grid, TextField, Dialog } from '@mui/material';
+import { FormikProps } from 'formik';
+import { Client } from '../../DataClientInterfaz';
 
 interface Props {
 	open: boolean;
@@ -18,25 +10,33 @@ interface Props {
 }
 function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
 	return (
-    <Dialog open={open} scroll="body" fullWidth maxWidth="md">
+		<Dialog
+			open={open}
+			scroll="body"
+			fullWidth
+			maxWidth="md"
+		>
 			<DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
 			<DialogContent dividers>
-        <Grid container spacing={2}>
-          <Grid item md={6} xs={12}>
+				<Grid
+					container
+					spacing={2}
+				>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Nombre Comercial"
 							variant="outlined"
 							fullWidth
 							name="nombreComercial"
-              value={formik.values.nombreComercial || ""}
+							value={formik.values.nombreComercial || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.nombreComercial && formik.touched.nombreComercial
-                  ? true
-                  : false
-              }
+							error={!!(formik.errors.nombreComercial && formik.touched.nombreComercial)}
 							helperText={
 								formik.errors.nombreComercial && formik.touched.nombreComercial
 									? formik.errors.nombreComercial
@@ -44,21 +44,21 @@ function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
 							}
 						/>
 					</Grid>
-          <Grid item md={6} xs={12}>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Razón Social"
 							variant="outlined"
 							fullWidth
 							name="razonSocial"
-              value={formik.values.razonSocial || ""}
+							value={formik.values.razonSocial || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.razonSocial && formik.touched.razonSocial
-                  ? true
-                  : false
-              }
+							error={!!(formik.errors.razonSocial && formik.touched.razonSocial)}
 							helperText={
 								formik.errors.razonSocial && formik.touched.razonSocial
 									? formik.errors.razonSocial
@@ -66,21 +66,21 @@ function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
 							}
 						/>
 					</Grid>
-          <Grid item md={6} xs={12}>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Identificación"
 							variant="outlined"
 							fullWidth
 							name="identificacion"
-              value={formik.values.identificacion || ""}
+							value={formik.values.identificacion || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.identificacion && formik.touched.identificacion
-                  ? true
-                  : false
-              }
+							error={!!(formik.errors.identificacion && formik.touched.identificacion)}
 							helperText={
 								formik.errors.identificacion && formik.touched.identificacion
 									? formik.errors.identificacion
@@ -88,66 +88,62 @@ function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
 							}
 						/>
 					</Grid>
-          <Grid item md={6} xs={12}>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Dirección"
 							variant="outlined"
 							fullWidth
 							name="direccion"
-              value={formik.values.direccion || ""}
+							value={formik.values.direccion || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.direccion && formik.touched.direccion
-                  ? true
-                  : false
-              }
+							error={!!(formik.errors.direccion && formik.touched.direccion)}
 							helperText={
-                formik.errors.direccion && formik.touched.direccion
-                  ? formik.errors.direccion
-                  : false
+								formik.errors.direccion && formik.touched.direccion ? formik.errors.direccion : false
 							}
 						/>
 					</Grid>
-          <Grid item md={6} xs={12}>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Teléfono"
 							variant="outlined"
 							fullWidth
 							name="telefono"
-              value={formik.values.telefono || ""}
+							value={formik.values.telefono || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.telefono && formik.touched.telefono ? true : false
-              }
+							error={!!(formik.errors.telefono && formik.touched.telefono)}
 							helperText={
-                formik.errors.telefono && formik.touched.telefono
-                  ? formik.errors.telefono
-                  : false
+								formik.errors.telefono && formik.touched.telefono ? formik.errors.telefono : false
 							}
 						/>
 					</Grid>
-          <Grid item md={6} xs={12}>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
 						<TextField
 							size="small"
 							label="Correo electrónico"
 							variant="outlined"
 							fullWidth
 							name="correo"
-              value={formik.values.correo || ""}
+							value={formik.values.correo || ''}
 							onChange={handleOnChange}
 							onBlur={formik.handleBlur}
-              error={
-                formik.errors.correo && formik.touched.correo ? true : false
-              }
-              helperText={
-                formik.errors.correo && formik.touched.correo
-                  ? formik.errors.correo
-                  : false
-              }
+							error={!!(formik.errors.correo && formik.touched.correo)}
+							helperText={formik.errors.correo && formik.touched.correo ? formik.errors.correo : false}
 						/>
 					</Grid>
 				</Grid>

src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx

@@ -63,12 +63,12 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
 					md={2}
 				>
 					<TextField
-					label='Serial'
-					size='small'
-					variant='outlined'
+						label="Serial"
+						size="small"
+						variant="outlined"
 						fullWidth
 						InputLabelProps={{
-						shrink: true,
+							shrink: true
 						}}
 					/>
 				</Grid>
@@ -78,13 +78,13 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
 					md={2}
 				>
 					<TextField
-					label='Fecha factura'
-					size='small'
-					variant='outlined'
-					type='date'
+						label="Fecha factura"
+						size="small"
+						variant="outlined"
+						type="date"
 						fullWidth
 						InputLabelProps={{
-						shrink: true,
+							shrink: true
 						}}
 					/>
 				</Grid>
@@ -94,13 +94,13 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
 					md={2}
 				>
 					<TextField
-					label='Fecha creada'
-					size='small'
-					variant='outlined'
-					type='date'
+						label="Fecha creada"
+						size="small"
+						variant="outlined"
+						type="date"
 						fullWidth
 						InputLabelProps={{
-						shrink: true,
+							shrink: true
 						}}
 					/>
 				</Grid>

src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@mui/material';
 import { Headers } from '../../DataInvoiceInterface';
 import TableInvoiceRender from './TableInvoiceRender';
 
@@ -10,7 +9,7 @@ function TableInvoice() {
 		{ id: 4, name: 'Valor unitario', style: 130 },
 		{ id: 5, name: 'Iva', style: 10 },
 		{ id: 6, name: 'Total', style: 130 },
-		{ id: 7, name: 'Acción', style: 10 },
+		{ id: 7, name: 'Acción', style: 10 }
 	];
 	return <TableInvoiceRender headers={headers} />;
 }

src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoiceRender.tsx

@@ -38,6 +38,11 @@ function TableInvoiceRender({ headers }: Props) {
 								</Typography>
 							</TableCell>
 						))}
+						{/* <TableCell style={{ width: 5 }}>
+							<IconButton>
+								<FuseSvgIcon>heroicons-outline:plus</FuseSvgIcon>
+							</IconButton>
+						</TableCell> */}
 					</TableRow>
 				</TableHead>
 				<TableBody>

src/app/main/sign-in/SignInPage.tsx

@@ -1,24 +1,9 @@
-import { Controller, useForm } from 'react-hook-form';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import _ from '@lodash';
 import Paper from '@mui/material/Paper';
-import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
-import AvatarGroup from '@mui/material/AvatarGroup';
-import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
 import { useState } from 'react';
 import JwtLoginTab from './tabs/JwtSignInTab';
-import FirebaseSignInTab from './tabs/FirebaseSignInTab';
 
 /**
  * Form Validation Schema
@@ -39,14 +24,9 @@ const tabs = [
 	}
 ];
 
-
 function SignInPage() {
 	const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
 
-	function handleSelectTab(id: string) {
-		setSelectedTabId("jwt");
-	}
-
 	return (
 		<div className="flex min-w-0 h-screen flex-auto flex-col justify-center items-center sm:justify-center md:p-32">
 			<Paper className="flex min-h-full w-full overflow-hidden justify-center items-center rounded-0 sm:min-h-auto sm:w-auto sm:rounded-2xl sm:shadow md:w-full md:max-w-6xl">
@@ -93,16 +73,17 @@ function SignInPage() {
 							/>
 						))}
 					</Tabs> */}
-						{selectedTabId === 'jwt' && <JwtLoginTab />}
+						{/* {selectedTabId === 'jwt' && <JwtLoginTab />} */}
+						<JwtLoginTab />
 
 						{/* 					{selectedTabId === 'firebase' && <FirebaseSignInTab />} */}
-
 					</div>
 				</div>
 
 				<Box
 					className="relative hidden h-auto justify-center items-center flex-auto p-64 md:flex lg:px-112"
-					sx={{ backgroundColor: 'primary.main' }}>
+					sx={{ backgroundColor: 'primary.main' }}
+				>
 					<svg
 						className="pointer-events-none absolute inset-0"
 						viewBox="0 0 960 540"
@@ -174,14 +155,20 @@ function SignInPage() {
 						</div>
 						<div className="flex overflow-hidden items-center mt-4 text-md leading-none text-gray-400">
 							<div>Soporte técnico: 0967722226</div>
-							<a aria-label="Chat WhatsApp" href="https://wa.me/967722226/?text=Hola!%20Necesito%20ayuda%20en%20el%20sistema%20de%20facturación">
-								<img className='w-52' alt="Chat WhatsApp" src="assets/images/logo/WhatsApp-Logo.wine.svg" />
+							<a
+								aria-label="Chat WhatsApp"
+								href="https://wa.me/967722226/?text=Hola!%20Necesito%20ayuda%20en%20el%20sistema%20de%20facturación"
+							>
+								<img
+									className="w-52"
+									alt="Chat WhatsApp"
+									src="assets/images/logo/WhatsApp-Logo.wine.svg"
+								/>
 							</a>
 						</div>
 						<div className="flex overflow-hidden mt-2 text-md leading-none text-gray-400">
 							<div>Correo eletrónico: info@qsoftec.com</div>
 						</div>
-
 					</div>
 				</Box>
 			</Paper>

src/app/main/sign-in/tabs/JwtSignInTab.tsx

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import _ from '@lodash';
-import { AxiosError } from 'axios';
+import axios, { AxiosError } from 'axios';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
@@ -16,7 +16,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
  * Form Validation Schema
  */
 const schema = z.object({
-	email: z.string().email('Debe ingresar un correo válido').nonempty('Debe ingresar un correo'),
+	email: z.string().nonempty('Debe ingresar un correo'),
 	password: z
 		.string()
 		.min(4, 'La contraseña es muy corta, debe ingresar almenos 4 caracteres.')
@@ -47,13 +47,57 @@ function jwtSignInTab() {
 	const { isValid, dirtyFields, errors } = formState;
 
 	useEffect(() => {
-		setValue('email', 'admin@qsoftec.com', { shouldDirty: true, shouldValidate: true });
-		setValue('password', 'admin', { shouldDirty: true, shouldValidate: true });
+		setValue('email', 'andres', { shouldDirty: true, shouldValidate: true });
+		setValue('password', '1234567Aa', { shouldDirty: true, shouldValidate: true });
 	}, [setValue]);
 
 	function onSubmit(formData: FormType) {
 		const { email, password } = formData;
 
+		/* const data = JSON.stringify({
+			headerIn: {
+				dispositivo: 'WeLaptop',
+				canal: null,
+				medio: null,
+				aplicacion: 'CardControlWeb',
+				tipoTransaccion: '0101001',
+				usuario: 'ADMIN',
+				uuid: '355b8668e50a06cf894e015c850d5bb9dc58a',
+				fechaHora: null,
+				idioma: null,
+				empresa: null,
+				geolocalizacion: '37.4215452, -122.0837541'
+			},
+			bodyIn: {
+				entidad: 'Usuario',
+				tipoConsulta: 1,
+				parametros: {
+					user: 'Nick',
+					password: '21365'
+				}
+			}
+		});
+
+		const config = {
+			method: 'post',
+			maxBodyLength: Infinity,
+			url: 'http://services.qsoftec.com:18080/inventario-rs-services-1.0-SNAPSHOT/servicios/autenticacion',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			data
+		};
+
+		axios
+			.request(config)
+			.then((response) => {
+				console.log(response.headers)
+				//console.log(JSON.stringify(response.data));
+			})
+			.catch((error) => {
+				console.log(error);
+			});
+ */
 		jwtService
 			.signIn({
 				email,
@@ -97,7 +141,7 @@ function jwtSignInTab() {
 							className="mb-24"
 							label="Correo electrónico"
 							autoFocus
-							type="email"
+							// type="email"
 							error={!!errors.email}
 							helperText={errors?.email?.message}
 							variant="outlined"

src/app/main/sign-up/SignUpPage.tsx

@@ -1,65 +1,44 @@
-import Typography from "@mui/material/Typography";
-import { Link } from "react-router-dom";
-import AvatarGroup from "@mui/material/AvatarGroup";
-import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import { useState } from "react";
-import _ from "../../../@lodash/@lodash";
-import JwtSignUpTab from "./tabs/JwSignUpTab";
-import FirebaseSignUpTab from "./tabs/FirebaseSignUpTab";
-
-const tabs = [
-  {
-    id: "jwt",
-    title: "JWT",
-    logo: "assets/images/logo/jwt.svg",
-    logoClass: "h-40 p-4 bg-black rounded-12",
-  },
-  {
-    id: "firebase",
-    title: "Firebase",
-    logo: "assets/images/logo/firebase.svg",
-    logoClass: "h-40",
-  },
-];
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import JwtSignUpTab from './tabs/JwSignUpTab';
+import FormRegister from './formRegister/FormRegister';
 
 /**
  * The sign up page.
  */
 function SignUpPage() {
-  const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
-
-  function handleSelectTab(id: string) {
-    setSelectedTabId(id);
-  }
-
 	return (
 		<div className="flex min-w-0 flex-1 flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start">
 			<Paper className="h-full w-full px-16 py-8 ltr:border-r-1 rtl:border-l-1 sm:h-auto sm:w-auto sm:rounded-2xl sm:p-48 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-64 md:shadow-none">
-        <div className="mx-auto w-full max-w-320 sm:mx-0 sm:w-320">
-          <img className="w-48" src="assets/images/logo/logo1.svg" alt="logo" />
+				<div className="mx-auto w-full max-w-400 sm:mx-0 sm:w-400">
+					<img
+						className="w-36"
+						src="assets/images/logo/logo1.svg"
+						alt="logo"
+					/>
 
-          <Typography className="mt-32 text-4xl font-extrabold leading-tight tracking-tight">
+					<Typography className="mt-32 text-3xl font-extrabold leading-tight tracking-tight">
 						Registrarse
 					</Typography>
 					<div className="mt-2 flex items-baseline font-medium">
 						<Typography>Ya tienes cuenta?</Typography>
-            <Link className="ml-4" to="/sign-in">
+						<Link
+							className="ml-4"
+							to="/sign-in"
+						>
 							Inicia sesión
 						</Link>
 					</div>
-
-          <JwtSignUpTab />
+					<FormRegister />
+					{/* <JwtSignUpTab /> */}
 				</div>
-		
 			</Paper>
 
 			<Box
-          className="relative hidden h-full flex-auto items-center justify-center overflow-hidden p-64 md:flex lg:px-112"
-          sx={{ backgroundColor: "primary.main" }}
+				className="relative hidden h-full flex-auto items-center justify-center overflow-hidden p-48 md:flex lg:px-112 w-3/5"
+				sx={{ backgroundColor: 'primary.main' }}
 			>
 				<svg
 					className="pointer-events-none absolute inset-0"
@@ -71,19 +50,23 @@ function SignUpPage() {
 				>
 					<Box
 						component="g"
-              sx={{ color: "primary.light" }}
+						sx={{ color: 'primary.light' }}
 						className="opacity-20"
 						fill="none"
 						stroke="currentColor"
 						strokeWidth="100"
 					>
-              <circle r="234" cx="796" cy="23" />
+						<circle
+							r="234"
+							cx="796"
+							cy="23"
+						/>
 					</Box>
 				</svg>
 				<Box
 					component="svg"
 					className="absolute -right-64 -top-64 opacity-20"
-            sx={{ color: "primary.light" }}
+					sx={{ color: 'primary.light' }}
 					viewBox="0 0 220 192"
 					width="220px"
 					height="192px"
@@ -98,7 +81,13 @@ function SignUpPage() {
 							height="20"
 							patternUnits="userSpaceOnUse"
 						>
-                <rect x="0" y="0" width="4" height="4" fill="currentColor" />
+							<rect
+								x="0"
+								y="0"
+								width="4"
+								height="4"
+								fill="currentColor"
+							/>
 						</pattern>
 					</defs>
 					<rect
@@ -115,10 +104,7 @@ function SignUpPage() {
 						alt="logo"
 					/>
 					<div className="text-3xl font-bold leading-loose text-gray-100">
-              <div>
-                Bienvenido al sistema que se encarga de tu facturación
-                electrónica.
-              </div>
+						<div>Bienvenido al sistema que se encarga de tu facturación electrónica.</div>
 					</div>
 					<div className="flex items-center mt-14 text-md leading-none text-gray-400">
 						<div>¿Necesitas ayuda? Comunícate con nosotros.</div>

src/app/main/sign-up/formRegister/FormRegister.tsx

@@ -0,0 +1,58 @@
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { registerUser } from 'src/app/services/user.service';
+import { SignUpPayload } from './interface';
+import FormRegisterRender from './FormRegisterRender';
+
+function FormRegister() {
+	const formik = useFormik<SignUpPayload>({
+		initialValues: {
+			detCodigo: 0,
+			empCodContribuyente: '',
+			empContacto: '',
+			empDescripcion: '',
+			empDireccion: '',
+			empIdentificacion: '',
+			empLlevaContabilidad: '',
+			empMail: '',
+			empNombreComercial: '',
+			empRazonSocial: '',
+			password: '',
+			passwordConfirm: '',
+			usuNombre: '',
+			usuUsuario: '',
+			rolCodigo: 2
+		},
+		validationSchema: Yup.object({
+			usuUsuario: Yup.string().required('Debe ingresar el usuario'),
+			usuNombre: Yup.string().required('Debe ingresar el nombre de usuario'),
+			detCodigo: Yup.number().test('len', 'Debe Seleccionar una opción', (val: number) => val !== 0),
+			empIdentificacion: Yup.string().required('Debe ingresar el número de identificación'),
+			empRazonSocial: Yup.string().required('Debe ingresar la razón social'),
+			empNombreComercial: Yup.string().required('Debe ingresar el nombre comercial'),
+			empContacto: Yup.string().required('Debe ingresar un contacto'),
+			empDireccion: Yup.string().required('Debe ingresar la dirección'),
+			empMail: Yup.string().email('Debe ingresar un correo válido').required('Debe ingresar un correo'),
+			empCodContribuyente: Yup.string().required('Debe ingresar el codigo'),
+			empDescripcion: Yup.string().required('Debe ingresar una descripción'),
+			empLlevaContabilidad: Yup.string().required('Debe seleccionar una opción'),
+			password: Yup.string()
+				.required('Por favor ingrese su contraseña.')
+				.min(4, 'La contraseña es muy corta, debe ingresar almenos 4 caracteres'),
+			passwordConfirm: Yup.string()
+				.oneOf([Yup.ref('password'), null], 'Las contraseñas no  coinciden')
+				.required('Campo Obligatorio')
+		}),
+		onSubmit: (value) => {
+			console.log('first');
+			console.log(value);
+			registerUser(value).then((response) => {
+				console.log(response);
+			});
+		}
+	});
+
+	return <FormRegisterRender formik={formik} />;
+}
+
+export default FormRegister;

src/app/main/sign-up/formRegister/FormRegisterRender.tsx

@@ -0,0 +1,298 @@
+import { FormikProps } from 'formik';
+import { Button, MenuItem, TextField } from '@mui/material';
+import { SignUpPayload } from './interface';
+
+interface Props {
+	formik: FormikProps<SignUpPayload>;
+}
+
+const tipoEmpresa = [
+	{ detCodigo: 1, detNombre: 'Publica' },
+	{ detCodigo: 3, detNombre: 'Privada' }
+];
+function FormRegisterRender({ formik }: Props) {
+	return (
+		<form
+			name="registerForm"
+			noValidate
+			className="mt-20 flex w-full flex-col justify-center"
+			onSubmit={formik.handleSubmit}
+		>
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Usuario"
+				type="text"
+				name="usuUsuario"
+				onChange={formik.handleChange}
+				value={formik.values.usuUsuario}
+				onBlur={formik.handleBlur}
+				error={formik.errors.usuUsuario && formik.touched.usuUsuario}
+				helperText={formik.errors.usuUsuario && formik.touched.usuUsuario ? formik.errors.usuUsuario : false}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Nombre usuario"
+				type="text"
+				name="usuNombre"
+				onChange={formik.handleChange}
+				value={formik.values.usuNombre}
+				onBlur={formik.handleBlur}
+				error={formik.errors.usuNombre && formik.touched.usuNombre}
+				helperText={formik.errors.usuNombre && formik.touched.usuNombre ? formik.errors.usuNombre : false}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Razón social"
+				type="text"
+				name="empRazonSocial"
+				onChange={formik.handleChange}
+				value={formik.values.empRazonSocial}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empRazonSocial && formik.touched.empRazonSocial}
+				helperText={
+					formik.errors.empRazonSocial && formik.touched.empRazonSocial ? formik.errors.empRazonSocial : false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Nombre comercial"
+				type="text"
+				name="empNombreComercial"
+				onChange={formik.handleChange}
+				value={formik.values.empNombreComercial}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empNombreComercial && formik.touched.empNombreComercial}
+				helperText={
+					formik.errors.empNombreComercial && formik.touched.empNombreComercial
+						? formik.errors.empNombreComercial
+						: false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Identificacón"
+				type="text"
+				name="empIdentificacion"
+				onChange={formik.handleChange}
+				value={formik.values.empIdentificacion}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empIdentificacion && formik.touched.empIdentificacion}
+				helperText={
+					formik.errors.empIdentificacion && formik.touched.empIdentificacion
+						? formik.errors.empIdentificacion
+						: false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				select
+				label="Tipo de empresa"
+				name="detCodigo"
+				onChange={formik.handleChange}
+				value={formik.values.detCodigo}
+				onBlur={formik.handleBlur}
+				error={formik.errors.detCodigo && formik.touched.detCodigo}
+				helperText={formik.errors.detCodigo && formik.touched.detCodigo ? formik.errors.detCodigo : false}
+				variant="outlined"
+				required
+				fullWidth
+			>
+				<MenuItem value={0}>Seleccione..</MenuItem>
+				{tipoEmpresa.map((option) => (
+					<MenuItem
+						key={option.detCodigo}
+						value={option.detCodigo}
+					>
+						{option.detNombre}
+					</MenuItem>
+				))}
+			</TextField>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Contacto"
+				type="text"
+				name="empContacto"
+				onChange={formik.handleChange}
+				value={formik.values.empContacto}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empContacto && formik.touched.empContacto}
+				helperText={formik.errors.empContacto && formik.touched.empContacto ? formik.errors.empContacto : false}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Dirección"
+				type="text"
+				name="empDireccion"
+				onChange={formik.handleChange}
+				value={formik.values.empDireccion}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empDireccion && formik.touched.empDireccion}
+				helperText={
+					formik.errors.empDireccion && formik.touched.empDireccion ? formik.errors.empDireccion : false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Correo electrónico"
+				type="email"
+				name="empMail"
+				onChange={formik.handleChange}
+				value={formik.values.empMail}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empMail && formik.touched.empMail}
+				helperText={formik.errors.empMail && formik.touched.empMail ? formik.errors.empMail : false}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Codigo de contribuyente"
+				type="text"
+				name="empCodContribuyente"
+				onChange={formik.handleChange}
+				value={formik.values.empCodContribuyente}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empCodContribuyente && formik.touched.empCodContribuyente}
+				helperText={
+					formik.errors.empCodContribuyente && formik.touched.empCodContribuyente
+						? formik.errors.empCodContribuyente
+						: false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Descripción"
+				type="text"
+				name="empDescripcion"
+				onChange={formik.handleChange}
+				value={formik.values.empDescripcion}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empDescripcion && formik.touched.empDescripcion}
+				helperText={
+					formik.errors.empDescripcion && formik.touched.empDescripcion ? formik.errors.empDescripcion : false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				select
+				label="Lleva la contabilidad"
+				name="empLlevaContabilidad"
+				onChange={formik.handleChange}
+				value={formik.values.empLlevaContabilidad}
+				onBlur={formik.handleBlur}
+				error={formik.errors.empLlevaContabilidad && formik.touched.empLlevaContabilidad}
+				helperText={
+					formik.errors.empLlevaContabilidad && formik.touched.empLlevaContabilidad
+						? formik.errors.empLlevaContabilidad
+						: false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			>
+				<MenuItem value="0">NO</MenuItem>
+				<MenuItem value="1">SI</MenuItem>
+			</TextField>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Contraseña"
+				type="password"
+				name="password"
+				onChange={formik.handleChange}
+				value={formik.values.password}
+				onBlur={formik.handleBlur}
+				error={formik.errors.password && formik.touched.password}
+				helperText={formik.errors.password && formik.touched.password ? formik.errors.password : false}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<TextField
+				className="mb-10"
+				size="small"
+				label="Confirmar contraseña"
+				type="password"
+				name="passwordConfirm"
+				onChange={formik.handleChange}
+				value={formik.values.passwordConfirm}
+				onBlur={formik.handleBlur}
+				error={formik.errors.passwordConfirm && formik.touched.passwordConfirm}
+				helperText={
+					formik.errors.passwordConfirm && formik.touched.passwordConfirm
+						? formik.errors.passwordConfirm
+						: false
+				}
+				variant="outlined"
+				required
+				fullWidth
+			/>
+
+			<Button
+				variant="contained"
+				color="secondary"
+				className="mt-24 w-full col-span-2"
+				aria-label="Register"
+				// disabled={_.isEmpty(dirtyFields)}
+				type="submit"
+				size="large"
+			>
+				Registrarse
+			</Button>
+		</form>
+	);
+}
+
+export default FormRegisterRender;

src/app/main/sign-up/formRegister/interface.ts

@@ -0,0 +1,17 @@
+export interface SignUpPayload {
+	usuUsuario: string;
+	usuNombre: string;
+	detCodigo: number;
+	empIdentificacion: string;
+	empRazonSocial: string;
+	empNombreComercial: string;
+	empContacto: string;
+	empDireccion: string;
+	empMail: string;
+	empCodContribuyente: string | number;
+	empDescripcion: string;
+	empLlevaContabilidad: string | number;
+	password: string;
+	passwordConfirm: string;
+	rolCodigo: number;
+}

src/app/main/sign-up/tabs/JwSignUpTab.tsx

@@ -1,28 +1,40 @@
 import { Controller, useForm } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import FormHelperText from '@mui/material/FormHelperText';
 import Button from '@mui/material/Button';
 import _ from '@lodash';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { SignUpPayload, useAuth } from '../../../auth/AuthRouteProvider';
+import { MenuItem } from '@mui/material';
+import { SignUpPayload } from '../../../auth/AuthRouteProvider';
 
 /**
  * Form Validation Schema
  */
+const tipoEmpresa = [
+	{ detCodigo: 1, detNombre: 'Publica' },
+	{ detCodigo: 2, detNombre: 'Privada' }
+];
+
 const schema = z
 	.object({
-		displayName: z.string().nonempty('Debe ingresar un nombre de usuario'),
-		email: z.string().email('Debe ingresar un correo válido').nonempty('Debe ingresar un correo'),
+		usuUsuario: z.string().nonempty('Debe ingresar el usuario'),
+		usuNombre: z.string().nonempty('Debe ingresar el nombre de usuario'),
+		detCodigo: z.number().refine((val) => val !== 0, 'Debe Seleccionar una opción'),
+		empIdentificacion: z.string().nonempty('Debe ingresar el número de identificación'),
+		empRazonSocial: z.string().nonempty('Debe ingresar la razón social'),
+		empNombreComercial: z.string().nonempty('Debe ingresar el nombre comercial'),
+		empContacto: z.string().nonempty('Debe ingresar un contacto'),
+		empDireccion: z.string().nonempty('Debe ingresar la dirección'),
+		empMail: z.string().email('Debe ingresar un correo válido').nonempty('Debe ingresar un correo'),
+		empCodContribuyente: z.string().nonempty('Debe ingresar el codigo'),
+		empDescripcion: z.string().nonempty('Debe ingresar una descripción'),
+		empLlevaContabilidad: z.string().nonempty('Debe seleccionar una opción'),
 		password: z
 			.string()
 			.nonempty('Por favor ingrese su contraseña.')
 			.min(4, 'La contraseña es muy corta, debe ingresar almenos 4 caracteres'),
-		passwordConfirm: z.string().nonempty('Debe ingresar su contraseña'),
-		acceptTermsConditions: z.boolean().refine((val) => val === true, 'Debe aceptar los términos y condiciones')
+		passwordConfirm: z.string().nonempty('Debe ingresar su contraseña')
+		// acceptTermsConditions: z.boolean().refine((val) => val === true, 'Debe aceptar los términos y condiciones')
 	})
 	.refine((data) => data.password === data.passwordConfirm, {
 		message: 'Contraseñas no coinciden',
@@ -30,16 +42,24 @@ const schema = z
 	});
 
 const defaultValues = {
-	displayName: '',
-	email: '',
+	usuUsuario: '',
+	usuNombre: '',
+	detCodigo: 0,
+	empIdentificacion: '',
+	empRazonSocial: '',
+	empNombreComercial: '',
+	empContacto: '',
+	empDireccion: '',
+	empMail: '',
+	empCodContribuyente: '',
+	empDescripcion: '',
+	empLlevaContabilidad: '',
 	password: '',
-	passwordConfirm: '',
-	acceptTermsConditions: false
+	passwordConfirm: ''
+	// acceptTermsConditions: false
 };
 
 function JwtSignUpTab() {
-	const { jwtService } = useAuth();
-
 	const { control, formState, handleSubmit, setError } = useForm({
 		mode: 'onChange',
 		defaultValues,
@@ -49,7 +69,8 @@ function JwtSignUpTab() {
 	const { isValid, dirtyFields, errors } = formState;
 
 	function onSubmit(formData: SignUpPayload) {
-		const { displayName, email, password } = formData;
+		console.log(formData);
+		/* const { displayName, email, password } = formData;
 		jwtService
 			.signUp({
 				displayName,
@@ -63,28 +84,28 @@ function JwtSignUpTab() {
 				_errors.forEach(({ message, type }) => {
 					setError(type, { type: 'manual', message });
 				});
-			});
+			}); */
 	}
 
 	return (
 		<form
 			name="registerForm"
 			noValidate
-			className="mt-32 flex w-full flex-col justify-center"
+			className="mt-20 flex w-full flex-col justify-center"
 			onSubmit={handleSubmit(onSubmit)}
 		>
 			<Controller
-				name="displayName"
+				name="usuUsuario"
 				control={control}
 				render={({ field }) => (
 					<TextField
 						{...field}
-						className="mb-24"
-						label="Nombre de usuario"
-						autoFocus
-						type="name"
-						error={!!errors.displayName}
-						helperText={errors?.displayName?.message}
+						className="mb-10"
+						size="small"
+						label="Usuario"
+						type="text"
+						error={!!errors.usuUsuario}
+						helperText={errors?.usuUsuario?.message}
 						variant="outlined"
 						required
 						fullWidth
@@ -93,16 +114,142 @@ function JwtSignUpTab() {
 			/>
 
 			<Controller
-				name="email"
+				name="usuNombre"
 				control={control}
 				render={({ field }) => (
 					<TextField
 						{...field}
-						className="mb-24"
+						className="mb-10"
+						size="small"
+						label="Nombre usuario"
+						type="text"
+						error={!!errors.usuNombre}
+						helperText={errors?.usuNombre?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empRazonSocial"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Razón social"
+						autoFocus
+						type="text"
+						error={!!errors.empRazonSocial}
+						helperText={errors?.empRazonSocial?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empNombreComercial"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Nombre comercial"
+						type="text"
+						error={!!errors.empNombreComercial}
+						helperText={errors?.empNombreComercial?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="detCodigo"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						select
+						label="Tipo de empresa"
+						error={!!errors.detCodigo}
+						helperText={errors?.detCodigo?.message}
+						variant="outlined"
+						required
+						fullWidth
+					>
+						<MenuItem value={0}>Seleccione..</MenuItem>
+						{tipoEmpresa.map((option) => (
+							<MenuItem
+								key={option.detCodigo}
+								value={option.detCodigo}
+							>
+								{option.detNombre}
+							</MenuItem>
+						))}
+					</TextField>
+				)}
+			/>
+
+			<Controller
+				name="empContacto"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Contacto"
+						type="text"
+						error={!!errors.empContacto}
+						helperText={errors?.empContacto?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empDireccion"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Dirección"
+						type="text"
+						error={!!errors.empDireccion}
+						helperText={errors?.empDireccion?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empMail"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
 						label="Correo electrónico"
 						type="email"
-						error={!!errors.email}
-						helperText={errors?.email?.message}
+						error={!!errors.empMail}
+						helperText={errors?.empMail?.message}
 						variant="outlined"
 						required
 						fullWidth
@@ -110,49 +257,74 @@ function JwtSignUpTab() {
 				)}
 			/>
 
+			<Controller
+				name="empCodContribuyente"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Codigo de contribuyente"
+						type="text"
+						error={!!errors.empCodContribuyente}
+						helperText={errors?.empCodContribuyente?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empDescripcion"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						label="Descripción"
+						type="text"
+						error={!!errors.empDescripcion}
+						helperText={errors?.empDescripcion?.message}
+						variant="outlined"
+						required
+						fullWidth
+					/>
+				)}
+			/>
+
+			<Controller
+				name="empLlevaContabilidad"
+				control={control}
+				render={({ field }) => (
+					<TextField
+						{...field}
+						className="mb-10"
+						size="small"
+						select
+						label="Lleva la contabilidad"
+						error={!!errors.empLlevaContabilidad}
+						helperText={errors?.empLlevaContabilidad?.message}
+						variant="outlined"
+						required
+						fullWidth
+					>
+						<MenuItem value="0">NO</MenuItem>
+						<MenuItem value="1">SI</MenuItem>
+					</TextField>
+				)}
+			/>
+
 			<Controller
 				name="password"
 				control={control}
 				render={({ field }) => (
 					<TextField
 						{...field}
-						className="mb-24"
-						label="Contraseña"
-						type="password"
-						error={!!errors.password}
-						helperText={errors?.password?.message}
-						variant="outlined"
-						required
-						fullWidth
-					/>
-				)}
-			/>
-
-<Controller
-				name="password"
-				control={control}
-				render={({ field }) => (
-					<TextField
-						{...field}
-						className="mb-24"
-						label="Contraseña"
-						type="password"
-						error={!!errors.password}
-						helperText={errors?.password?.message}
-						variant="outlined"
-						required
-						fullWidth
-					/>
-				)}
-			/>
-
-<Controller
-				name="password"
-				control={control}
-				render={({ field }) => (
-					<TextField
-						{...field}
-						className="mb-24"
+						className="mb-10"
+						size="small"
 						label="Contraseña"
 						type="password"
 						error={!!errors.password}
@@ -170,7 +342,8 @@ function JwtSignUpTab() {
 				render={({ field }) => (
 					<TextField
 						{...field}
-						className="mb-24"
+						className="mb-10"
+						size="small"
 						label="Confirmar contraseña"
 						type="password"
 						error={!!errors.passwordConfirm}
@@ -182,12 +355,12 @@ function JwtSignUpTab() {
 				)}
 			/>
 
-			<Controller
+			{/* <Controller
 				name="acceptTermsConditions"
 				control={control}
 				render={({ field }) => (
 					<FormControl
-						className="items-center"
+						className="items-center col-span-2"
 						error={!!errors.acceptTermsConditions}
 					>
 						<FormControlLabel
@@ -202,14 +375,14 @@ function JwtSignUpTab() {
 						<FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
 					</FormControl>
 				)}
-			/>
+			/> */}
 
 			<Button
 				variant="contained"
 				color="secondary"
-				className="mt-24 w-full"
+				className="mt-24 w-full col-span-2"
 				aria-label="Register"
-				disabled={_.isEmpty(dirtyFields) || !isValid}
+				disabled={_.isEmpty(dirtyFields)}
 				type="submit"
 				size="large"
 			>

src/app/services/dataServices.ts

@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+// import { dispatch } from 'app/store/store';
+
+import config from 'app/configs/enviroment';
+// import { displayError } from '../notifications/displayMessage';
+// import { displayMessage } from 'notifications/displayMessage';
+// import { logout } from 'store/reducers/auth/auth';
+
+// eslint-disable-next-line consistent-return
+const post = (endpoint, body, transId) => {
+	const trama = {
+		headerIn: headerIn(transId),
+		bodyIn: body
+	};
+	const requestOptions = {
+		method: 'POST',
+		headers: header(),
+		body: JSON.stringify(trama),
+		redirect: 'follow'
+	};
+	const apiEndpoints = config.api + endpoint;
+	try {
+		return fetch(apiEndpoints, requestOptions).then(handleResponse);
+	} catch (error) {
+		console.log(error);
+	}
+};
+
+const postMultipart = (endpoint, body, transId, files) => {
+	const trama = {
+		headerIn: headerIn(transId),
+		bodyIn: body
+	};
+	const formData = new FormData();
+	formData.append('0', JSON.stringify(trama));
+	if (files.length > 0) {
+		files.map((file, index) => {
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+			formData.append(index + 1, file);
+			return 0;
+		});
+	}
+
+	const requestOptions = {
+		method: 'POST',
+		headers: headerM(),
+		body: formData
+	};
+
+	const apiEndpoints = config.api + endpoint;
+
+	return fetch(apiEndpoints, requestOptions).then(handleResponse);
+};
+
+const header = () => {
+	const token = localStorage.getItem('token');
+	const myHeaders = new Headers();
+	// eslint-disable-next-line no-unused-expressions
+	token && myHeaders.append('Authorization', `${token}`);
+	myHeaders.append('Content-Type', 'application/json');
+	return myHeaders;
+};
+
+const headerM = () => {
+	const token = localStorage.getItem('token');
+	const myHeaders = new Headers();
+	// eslint-disable-next-line no-unused-expressions
+	token && myHeaders.append('Authorization', `${token}`);
+	// myHeaders.append("Content-Type", "application/json");
+	return myHeaders;
+};
+
+const headerIn = (transId) => {
+	const user = JSON.parse(localStorage.getItem('user'));
+	const { headerIn } = config;
+	headerIn.tipoTransaccion = transId;
+	if (user) {
+		// headerIn.usuario = user.usuario;
+		headerIn.usuario = user.usercode;
+	} else {
+		headerIn.usuario = 'user-no';
+	}
+
+	return headerIn;
+};
+
+const handleResponse = (response) => {
+	response.headers.forEach((item,i) => {
+		console.log(item,i)
+	})
+	if (response.status === 401) {
+		localStorage.removeItem('user');
+		localStorage.removeItem('token');
+		// return dispatch(logout());
+	}
+	if (!response.ok) {
+		messageStatusCode(response.clone());
+		throw response;
+	} else {
+		let isBlod = false;
+		let isHtml = false;
+		response.headers.forEach((val, key) => {
+			if (key === 'content-disposition') isBlod = true;
+
+			if (val.indexOf('text/html') !== -1) isHtml = true;
+
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+			if (key === 'authorization') localStorage.setItem('accessToken', val);
+		});
+
+		if (isBlod || isHtml) {
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+			return response;
+		}
+		messageStatusCode(response.clone());
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		return response.json().then((data) => data);
+	}
+};
+
+function messageStatusCode(response) {
+	const code = response.status;
+	let error = false;
+	// eslint-disable-next-line default-case
+	switch (code) {
+		case 200:
+			response.json().then((data) => {
+				if (data.error && data.error.codigo !== '0') {
+					if (data.error.mensaje) {
+						// "ERROR NO CONTROLADO:
+						if (data.error.mensaje.includes('com.stripe.exception.CardException')) {
+							if (data.error.mensaje.includes('Your card has insufficient funds.; code: card_declined')) {
+								// displayError('La transacción no se pudo realizar, fondos insuficientes');
+							} else if (data.error.mensaje.includes('This transaction requires authentication.')) {
+								// displayError('La transacción no se pudo realizar, su tarjeta requiere autentificación');
+							} else {
+								// displayMessage('error', `Error ${data.error.mensaje}`);
+								// displayError(`Error ${data.error.mensaje}`);
+							}
+						} else if (data.error.codigo !== '1002') {
+							// displayMessage('error', data.error.mensaje);
+							// displayError(data.error.mensaje);
+						}
+					}
+				}
+			});
+			break;
+		case 502:
+			error = true;
+			// displayMessage('error', 'Conexión rechazada');
+			// displayError('Connection refused');
+			break;
+		case 500:
+			error = true;
+			// displayError('Internal Error Server');
+			response.json().then((data) => {
+				console.error('sdfsdfsdfds', data);
+			});
+			break;
+		case 405:
+			error = true;
+			// displayError('Failed to load resource');
+			break;
+		case 404:
+			error = true;
+			// displayError('Page not Found');
+			break;
+		case 401:
+			error = true;
+		// displayError('Cierre sesión, su sesión a caducado');
+	}
+	return error;
+}
+
+export { post, postMultipart };

src/app/services/user.service.ts

@@ -0,0 +1,43 @@
+import { post } from './dataServices';
+
+export interface RegisterUser {
+	usuUsuario: string;
+	usuNombre: string;
+	usuDescripcion?: string;
+	usuUrlImagen?: string;
+	detCodigo: number;
+	rolCodigo?: number;
+	empIdentificacion: string;
+	empRazonSocial: string;
+	empNombreComercial: string;
+	empContacto: string;
+	empDireccion: string;
+	empMail: string;
+	empCodContribuyente: string | number;
+	empDescripcion: string;
+	empLlevaContabilidad: number | string;
+	password: string;
+}
+
+export const loginIn = (username: string, password: string) => {
+	const body = {
+		tipoConsulta: 1,
+		entidad: 'Usuario',
+		parametros: {
+			user: username,
+			password
+		}
+	};
+	const endpoint = '/autenticacion';
+	return post(endpoint, body, '0101001');
+};
+
+export const registerUser = (data: RegisterUser) => {
+	const body = {
+		tipoAccion: 1,
+		entidad: 'Usuario',
+		entidades: [data]
+	};
+	const endpoint = '/accion';
+	return post(endpoint, body, '0101012');
+};

src/app/store/store.ts

@@ -27,7 +27,9 @@ export const addAppMiddleware = dynamicInstance.addMiddleware.withTypes<Config>(
 const middlewares: Middleware[] = [apiService.middleware, dynamicMiddleware];
 
 if (process.env.NODE_ENV === 'development') {
-	const logger = createLogger({ collapsed: (getState, action, logEntry) => (logEntry ? !logEntry.error : true) });
+	const logger = createLogger({
+		collapsed: (getState, action, logEntry) => (logEntry ? !logEntry.error : true)
+	});
 	middlewares.push(logger);
 }
 
@@ -61,6 +63,7 @@ export function configureAppStore(initialState?: RootState) {
 	const store = configureStore({
 		reducer: rootReducer,
 		preloadedState: initialState,
+		devTools: true,
 		middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewares)
 	}) as Store<RootState>;
 
@@ -108,4 +111,6 @@ export const withAppMiddleware = dynamicInstance.withMiddleware.withTypes<Config
 
 const store = configureAppStore();
 
-export default store;
+const { dispatch } = store;
+
+export {store, dispatch};

src/app/withAppProviders.tsx

@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import { Provider } from 'react-redux';
 import ErrorBoundary from '@fuse/utils/ErrorBoundary';
 import AppContext from './AppContext';
-import store from './store/store';
+import { store } from './store/store';
 
 type ComponentProps = {
 	name?: string;

yarn.lock

@@ -8872,6 +8872,11 @@ util@0.12.5:
     is-typed-array "^1.1.3"
     which-typed-array "^1.1.2"
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"