ejercicio tarjeta de crédito completado
This commit is contained in:
dehernandezm
parent
3da466041b
commit
35321e9955
0
.env.development
Normal file
0
.env.development
Normal file
3
.eslintrc.json
Normal file
3
.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
14
config/default.json
Normal file
14
config/default.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"constants": {
|
||||||
|
"plataforma": "web",
|
||||||
|
"publicPath": "/smartcollector",
|
||||||
|
"urlServerImages" : "https://gt.via-asesores.com/smartcollector/orbisapi/dtsrv/dev/smartcollector?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTsc",
|
||||||
|
"urlWebApi": "https://gt.via-asesores.com/smartcollector/orbisapi/api/dev/smartcollector?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTsc",
|
||||||
|
"urlUploadApi": "https://gt.via-asesores.com/smartcollector/orbisapi/upload/dev/smartcollector?apikey=NTAzYzZlOTItMDcwZC00Zjg4LTljODMtNzBkNGQ5YjZhZTsc",
|
||||||
|
"appTitle": "SmartCollector",
|
||||||
|
"idApp": "smartcollector",
|
||||||
|
"publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",
|
||||||
|
"maxMbUpload": 4,
|
||||||
|
"defaultLocale": "es"
|
||||||
|
}
|
||||||
|
}
|
||||||
83
helper/clientApi.js
Normal file
83
helper/clientApi.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
import forge from 'node-forge'
|
||||||
|
|
||||||
|
const constants = {
|
||||||
|
urlWebApi: process.env.urlWebApi,
|
||||||
|
urlUploadApi: process.env.urlUploadApi,
|
||||||
|
publicKey: process.env.publicKey
|
||||||
|
}
|
||||||
|
|
||||||
|
const uris = {
|
||||||
|
procedure: '',
|
||||||
|
upload: '/upload'
|
||||||
|
}
|
||||||
|
|
||||||
|
const encryptRsa = function (obj) {
|
||||||
|
const encoded = forge.util.encodeUtf8(obj)
|
||||||
|
const publicKey = forge.pki.publicKeyFromPem(constants.publicKey)
|
||||||
|
const encrypted = publicKey.encrypt(encoded, 'RSA-OAEP', {
|
||||||
|
md: forge.md.sha256.create(),
|
||||||
|
mgf1: forge.mgf1.create()
|
||||||
|
})
|
||||||
|
const base64 = forge.util.encode64(encrypted)
|
||||||
|
return base64
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const callWs = async (uri, json) => {
|
||||||
|
// Send the form data to our API and get a response.
|
||||||
|
const response = await fetch(uri, {
|
||||||
|
// Body of the request is the JSON data we created above.
|
||||||
|
body: JSON.stringify(json),
|
||||||
|
// Tell the server we're sending JSON.
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
// The method is POST because we are sending data.
|
||||||
|
method: 'POST',
|
||||||
|
})
|
||||||
|
|
||||||
|
// Get the response data from server as JSON.
|
||||||
|
// If server returns the name submitted, that means the form works.
|
||||||
|
const result = await response.json()
|
||||||
|
return result.data // return data rows
|
||||||
|
}
|
||||||
|
|
||||||
|
const execute = async (spName, params, encriptado = 0, loading = false, connInfo = undefined) => {
|
||||||
|
let model = {}
|
||||||
|
if (typeof spName === 'string') {
|
||||||
|
model.nombre = spName
|
||||||
|
model.loading = loading
|
||||||
|
// verifica que los parametros vengan como Array
|
||||||
|
model.parametros = params ?? []
|
||||||
|
// si la información se envía encriptada
|
||||||
|
if (encriptado === 1) {
|
||||||
|
const paramsToEncrypt = {
|
||||||
|
nombre: spName,
|
||||||
|
parametros: params
|
||||||
|
}
|
||||||
|
const paramsEncryptedString = encryptRsa(JSON.stringify(paramsToEncrypt))
|
||||||
|
|
||||||
|
model.nombre = ''
|
||||||
|
model.encriptado = 1
|
||||||
|
model.parametros = paramsEncryptedString
|
||||||
|
}
|
||||||
|
} else if(typeof spName === 'object') {
|
||||||
|
if (encriptado === 1) {
|
||||||
|
const paramsEncryptedString = encryptRsa(JSON.stringify(spName))
|
||||||
|
model.parametros = paramsEncryptedString
|
||||||
|
model.encriptado = 1
|
||||||
|
model.loading = loading
|
||||||
|
} else {
|
||||||
|
model = spName
|
||||||
|
model.loading = loading
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (connInfo) {
|
||||||
|
return await callWs(connInfo.api + '/' + connInfo.env + '/' + connInfo.exposeRoute + '?apikey=' + connInfo.apikey, model)
|
||||||
|
}
|
||||||
|
return await callWs(constants.urlWebApi + uris.procedure, model)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export { execute }
|
||||||
9
hooks/useGlobalContainer.js
Normal file
9
hooks/useGlobalContainer.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useContext } from "react"
|
||||||
|
import { LayoutContext } from '../layout/ResponsiveContainer'
|
||||||
|
|
||||||
|
const useGlobalContainer = () => {
|
||||||
|
const container = useContext(LayoutContext)
|
||||||
|
return container
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useGlobalContainer
|
||||||
15
hooks/useHasMounted.js
Normal file
15
hooks/useHasMounted.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
import { useEffect, useState } from "react"
|
||||||
|
|
||||||
|
const useHasMounted = () => {
|
||||||
|
const [hasMounted, setHasMounted] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setHasMounted(true)
|
||||||
|
// console.log('page is mounted')
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return hasMounted
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useHasMounted
|
||||||
9
hooks/useI18n.js
Normal file
9
hooks/useI18n.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useContext } from 'react'
|
||||||
|
import { I18nContext } from '../plugins/i18nContext'
|
||||||
|
|
||||||
|
const useI18n = () => {
|
||||||
|
const i18n = useContext(I18nContext)
|
||||||
|
return i18n
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useI18n
|
||||||
9
hooks/useLoading.js
Normal file
9
hooks/useLoading.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useContext } from "react"
|
||||||
|
import { LoadingContext } from "../plugins/LoadingContext"
|
||||||
|
|
||||||
|
const useLoading = () => {
|
||||||
|
const loading = useContext(LoadingContext)
|
||||||
|
return loading
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useLoading
|
||||||
192
layout/ResponsiveContainer.jsx
Normal file
192
layout/ResponsiveContainer.jsx
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
import { useEffect, useState, createContext } from 'react'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { execute } from "../helper/clientApi"
|
||||||
|
import environment from '../utils/environment'
|
||||||
|
import presets from '../utils/globalPresets'
|
||||||
|
import dynamic from 'next/dynamic'
|
||||||
|
import useLoading from '../hooks/useLoading'
|
||||||
|
import useHasMounted from '../hooks/useHasMounted'
|
||||||
|
import useI18n from '../hooks/useI18n'
|
||||||
|
|
||||||
|
export const LayoutContext = createContext()
|
||||||
|
|
||||||
|
const Footer = dynamic(() => { return import("vComponents/dist/Footer") }, { ssr: false })
|
||||||
|
const Navbar = dynamic(() => { return import("vComponents/dist/Navbar") }, { ssr: false })
|
||||||
|
const Sidebar = dynamic(() => { return import("vComponents/dist/Sidebar") }, { ssr: false })
|
||||||
|
|
||||||
|
const ResponsiveContainer = ({ children }) => {
|
||||||
|
const router = useRouter()
|
||||||
|
const loading = useLoading()
|
||||||
|
const i18n = useI18n()
|
||||||
|
const hasMounted = useHasMounted()
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||||
|
const [menu, setMenu] = useState([])
|
||||||
|
const [title, setTitle] = useState('')
|
||||||
|
const [userObj, setUserObj] = useState()
|
||||||
|
const [token, setToken] = useState('')
|
||||||
|
|
||||||
|
const doLogout = async () => {
|
||||||
|
const redirectPath = await environment.logout()
|
||||||
|
setUserObj(null)
|
||||||
|
router.push(redirectPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onBackKeyDown = () =>{
|
||||||
|
if (router.asPath === '/') {
|
||||||
|
// cuando esta en la pagina principal cierra la app
|
||||||
|
if (navigator.app) {
|
||||||
|
navigator.app.exitApp()
|
||||||
|
} else if (navigator.device) {
|
||||||
|
navigator.device.exitApp()
|
||||||
|
} else {
|
||||||
|
window.close()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.history.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const validaPermisosRuta = async (token) => {
|
||||||
|
if (router.pathname.includes('/admin')) {
|
||||||
|
loading.start()
|
||||||
|
const tienePermiso = await environment.validaPermisos(token, 'S', 'N', 'N', 'N')
|
||||||
|
loading.stop()
|
||||||
|
if (tienePermiso === false) {
|
||||||
|
router.push(presets.locations.welcome)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (router.pathname.includes('/mantenimientos')) {
|
||||||
|
loading.start()
|
||||||
|
const tienePermiso = await environment.validaPermisos(token, 'N', 'S', 'N', 'N')
|
||||||
|
loading.stop()
|
||||||
|
if (tienePermiso === false) {
|
||||||
|
router.push(presets.locations.welcome)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMenu = async (token) => {
|
||||||
|
loading.start()
|
||||||
|
setMenu([])
|
||||||
|
if (token && token !== null) {
|
||||||
|
console.log('Responsive Container - getMenu - token', token)
|
||||||
|
let options = await execute('SPR_MENU_S', [token, 'SC', null])
|
||||||
|
setMenu(options)
|
||||||
|
console.log('Responsive Container - getMenu - options', options)
|
||||||
|
if (environment.validaResultadoDB(options) === false) {
|
||||||
|
options = await execute('SPR_MENU_S', [token, 'SC', null])
|
||||||
|
setMenu(options)
|
||||||
|
console.log('Responsive Container - getMenu - reoptions', options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loading.stop()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getEnv = async () => {
|
||||||
|
try {
|
||||||
|
const env = await environment.getEnvUser()
|
||||||
|
if (!env || !env.token) {
|
||||||
|
toast.error(i18n.t('common.inactiveSession'), presets.toaster)
|
||||||
|
router.push(presets.locations.login)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setUserObj(env.user)
|
||||||
|
setToken(env.token)
|
||||||
|
validaPermisosRuta(env.token)
|
||||||
|
getMenu(token)
|
||||||
|
} catch (error) {
|
||||||
|
router.push(presets.locations.login)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const containerWrapper = {
|
||||||
|
userObj: userObj,
|
||||||
|
setUserObj: setUserObj,
|
||||||
|
token: token,
|
||||||
|
setToken: setToken
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('Responsive Container - getMenu - useEffect token', token)
|
||||||
|
getMenu(token)
|
||||||
|
}, [token])
|
||||||
|
|
||||||
|
|
||||||
|
// when page is mounted
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasMounted) {
|
||||||
|
getEnv()
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [hasMounted])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (process.browser && window.cordova) {
|
||||||
|
document.addEventListener("backbutton", onBackKeyDown, false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LayoutContext.Provider value={containerWrapper}>
|
||||||
|
<div className="flex h-screen overflow-hidden">
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
{
|
||||||
|
userObj && userObj.nombre_usuario &&
|
||||||
|
|
||||||
|
<Sidebar
|
||||||
|
sidebarOpen={sidebarOpen}
|
||||||
|
setSidebarOpen={setSidebarOpen}
|
||||||
|
menu={menu}
|
||||||
|
sidebarStyles={'via-bg-sidebar'}
|
||||||
|
optionStyles={'text-base font-normal via-options-sidebar'}
|
||||||
|
suboptionStyles={'text-sm font-normal via-suboptions-sidebar'}
|
||||||
|
onClickLogout={() => doLogout()}
|
||||||
|
setTitle={setTitle}
|
||||||
|
userObj={userObj}
|
||||||
|
environment={environment}
|
||||||
|
presets={presets}
|
||||||
|
router={router}
|
||||||
|
i18n={i18n}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
|
||||||
|
{/* Content area */}
|
||||||
|
<div className={`${sidebarOpen ? 'relative' : 'absolute'} flex flex-col flex-1 overflow-y-auto overflow-x-hidden w-full`}>
|
||||||
|
|
||||||
|
{/* Site header */}
|
||||||
|
{userObj && userObj.nombre_usuario &&
|
||||||
|
|
||||||
|
<Navbar
|
||||||
|
sidebarOpen={sidebarOpen}
|
||||||
|
setSidebarOpen={setSidebarOpen}
|
||||||
|
navbarStyles="border-b via-navbar"
|
||||||
|
menuButtonStyles="via-menu-btn-navbar"
|
||||||
|
userMenuButtonStyles="via-usermenu-btn-navbar"
|
||||||
|
userOptionStyles="via-useroptions-navbar"
|
||||||
|
userOptionSelectedStyles="via-useroptions-selected-navbar"
|
||||||
|
onClickLogout={() => doLogout()}
|
||||||
|
onClickProfile={() => router.push(`${presets.locations.profile}`)}
|
||||||
|
title={title}
|
||||||
|
userObj={userObj}
|
||||||
|
router={router}
|
||||||
|
presets={presets}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div className={userObj && userObj.nombre_usuario ? "px-4 sm:px-6 lg:px-8 py-2 w-full max-w-9xl mx-auto bg-gray-100 mb-10" : ''}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</LayoutContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ResponsiveContainer
|
||||||
35
models/CreditCardModel.js
Normal file
35
models/CreditCardModel.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
const CreditCardModel = () => {
|
||||||
|
return {
|
||||||
|
name: "",
|
||||||
|
card_number: "",
|
||||||
|
expiration_date: "",
|
||||||
|
security_code: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreditCardScreen = () => {
|
||||||
|
return {
|
||||||
|
main_spr: "SPR_GRUPOS_S",
|
||||||
|
parameters: [{"name":"token","value":null}],
|
||||||
|
insert_allowed: "N",
|
||||||
|
insert_spr: null,
|
||||||
|
parametersInsert: [],
|
||||||
|
update_allowed: "N",
|
||||||
|
update_spr: null,
|
||||||
|
parametersUpdate: [],
|
||||||
|
delete_allowed: "N",
|
||||||
|
delete_spr: null,
|
||||||
|
parametersDelete: [],
|
||||||
|
list_spr: null,
|
||||||
|
list_params_spr: null,
|
||||||
|
i18n_spr: null,
|
||||||
|
use_vista_consulta: "N"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const generalParams = [
|
||||||
|
{"name":"token","value":null}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default CreditCardModel
|
||||||
|
export { CreditCardModel, CreditCardScreen }
|
||||||
372
models/CreditCardProps.js
Normal file
372
models/CreditCardProps.js
Normal file
@ -0,0 +1,372 @@
|
|||||||
|
const CreditCardProps = () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: "Name",
|
||||||
|
i18n: "",
|
||||||
|
value: "name",
|
||||||
|
listName: "",
|
||||||
|
listNameParams: "",
|
||||||
|
class: " ",
|
||||||
|
headerClass: "w-36",
|
||||||
|
disableOnEdit: false,
|
||||||
|
disableOnNew: false,
|
||||||
|
isKey: null,
|
||||||
|
defaultValue: "",
|
||||||
|
showInForm: true,
|
||||||
|
showInTable: false,
|
||||||
|
showAsBadge: false,
|
||||||
|
icon: "",
|
||||||
|
iconClass: "via-detalle-datatable",
|
||||||
|
badgeClass: "via-badge-datatable",
|
||||||
|
toLocation: "",
|
||||||
|
fromLocation: "",
|
||||||
|
fromTitle: "",
|
||||||
|
isFilter: false,
|
||||||
|
type: "string",
|
||||||
|
label: "Name",
|
||||||
|
filterOrder: 0,
|
||||||
|
filterType: "list",
|
||||||
|
filterSort: "ascending",
|
||||||
|
isSearchable: true,
|
||||||
|
isClearable: true,
|
||||||
|
isGroup: false,
|
||||||
|
isMulti: false,
|
||||||
|
useSpeechToText: false,
|
||||||
|
id: "field_name",
|
||||||
|
fieldId: 1,
|
||||||
|
fieldOrder: 1,
|
||||||
|
docType: "img",
|
||||||
|
formClass: "col-span-2",
|
||||||
|
countFormatDef: 1,
|
||||||
|
countInputProps: 1,
|
||||||
|
countChangeDef: 0,
|
||||||
|
countPristineMsg: 1,
|
||||||
|
formatDefinition: {"action":"format","value":"uppercase"},
|
||||||
|
onChangeDefinition: {},
|
||||||
|
pristineMessages: {"required":"common.ruleRequired","pattern":null,"minlength":null,"maxlength":null},
|
||||||
|
inputProps: {"type":"text","autoComplete":"off"},
|
||||||
|
fixedListParams: [],
|
||||||
|
mappingRules: [],
|
||||||
|
fileNameParts: [],
|
||||||
|
fileExtensionParts: [],
|
||||||
|
valor: "name",
|
||||||
|
texto: "Name",
|
||||||
|
classItem: null,
|
||||||
|
substituteVal: null,
|
||||||
|
format: null,
|
||||||
|
chosen: false,
|
||||||
|
selected: false,
|
||||||
|
onChange: null
|
||||||
|
}, {
|
||||||
|
text: "Card Number",
|
||||||
|
i18n: "",
|
||||||
|
value: "card_number",
|
||||||
|
listName: "",
|
||||||
|
listNameParams: "",
|
||||||
|
class: " text-right ",
|
||||||
|
headerClass: "w-36",
|
||||||
|
disableOnEdit: false,
|
||||||
|
disableOnNew: false,
|
||||||
|
isKey: null,
|
||||||
|
defaultValue: "",
|
||||||
|
showInForm: true,
|
||||||
|
showInTable: false,
|
||||||
|
showAsBadge: false,
|
||||||
|
icon: "",
|
||||||
|
iconClass: "via-detalle-datatable",
|
||||||
|
badgeClass: "via-badge-datatable",
|
||||||
|
toLocation: "",
|
||||||
|
fromLocation: "",
|
||||||
|
fromTitle: "",
|
||||||
|
isFilter: false,
|
||||||
|
type: "number",
|
||||||
|
label: "Card Number",
|
||||||
|
filterOrder: 0,
|
||||||
|
filterType: "list",
|
||||||
|
filterSort: "ascending",
|
||||||
|
isSearchable: true,
|
||||||
|
isClearable: true,
|
||||||
|
isGroup: false,
|
||||||
|
isMulti: false,
|
||||||
|
useSpeechToText: false,
|
||||||
|
id: "field_card_number",
|
||||||
|
fieldId: 2,
|
||||||
|
fieldOrder: 2,
|
||||||
|
docType: "img",
|
||||||
|
formClass: "col-span-2",
|
||||||
|
countFormatDef: 0,
|
||||||
|
countInputProps: 1,
|
||||||
|
countChangeDef: 0,
|
||||||
|
countPristineMsg: 1,
|
||||||
|
formatDefinition: {},
|
||||||
|
onChangeDefinition: {},
|
||||||
|
pristineMessages: {"required":"common.ruleRequired","pattern":null,"minlength":null,"maxlength":null},
|
||||||
|
inputProps: {"type":"number","autoComplete":"off", required: true},
|
||||||
|
fixedListParams: [],
|
||||||
|
mappingRules: [],
|
||||||
|
fileNameParts: [],
|
||||||
|
fileExtensionParts: [],
|
||||||
|
valor: "card_number",
|
||||||
|
texto: "Card Number",
|
||||||
|
classItem: null,
|
||||||
|
substituteVal: null,
|
||||||
|
format: null,
|
||||||
|
chosen: false,
|
||||||
|
selected: false,
|
||||||
|
onChange: null,
|
||||||
|
imask: {
|
||||||
|
mask: [
|
||||||
|
{
|
||||||
|
mask: '0000 000000 00000',
|
||||||
|
regex: '^3[47]\\d{0,13}',
|
||||||
|
cardtype: 'american express'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^(?:6011|65\\d{0,2}|64[4-9]\\d?)\\d{0,12}',
|
||||||
|
cardtype: 'discover'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 000000 0000',
|
||||||
|
regex: '^3(?:0([0-5]|9)|[689]\\d?)\\d{0,11}',
|
||||||
|
cardtype: 'diners'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^(5[1-5]\\d{0,2}|22[2-9]\\d{0,1}|2[3-7]\\d{0,2})\\d{0,12}',
|
||||||
|
cardtype: 'mastercard'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// mask: '0000-0000-0000-0000',
|
||||||
|
// regex: '^(5019|4175|4571)\\d{0,12}',
|
||||||
|
// cardtype: 'dankort'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// mask: '0000-0000-0000-0000',
|
||||||
|
// regex: '^63[7-9]\\d{0,13}',
|
||||||
|
// cardtype: 'instapayment'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
mask: '0000 000000 00000',
|
||||||
|
regex: '^(?:2131|1800)\\d{0,11}',
|
||||||
|
cardtype: 'jcb15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^(?:35\\d{0,2})\\d{0,12}',
|
||||||
|
cardtype: 'jcb'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^(?:5[0678]\\d{0,2}|6304|67\\d{0,2})\\d{0,12}',
|
||||||
|
cardtype: 'maestro'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// mask: '0000-0000-0000-0000',
|
||||||
|
// regex: '^220[0-4]\\d{0,12}',
|
||||||
|
// cardtype: 'mir'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^4\\d{0,15}',
|
||||||
|
cardtype: 'visa'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
regex: '^62\\d{0,14}',
|
||||||
|
cardtype: 'unionpay'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: '0000 0000 0000 0000',
|
||||||
|
cardtype: 'Unknown'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dispatch: function (appended, dynamicMasked) {
|
||||||
|
var number = (dynamicMasked.value + appended).replace(/\D/g, '');
|
||||||
|
for (var i = 0; i < dynamicMasked.compiledMasks.length; i++) {
|
||||||
|
let re = new RegExp(dynamicMasked.compiledMasks[i].regex);
|
||||||
|
if (number.match(re) != null) {
|
||||||
|
return dynamicMasked.compiledMasks[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: "Expiration (mm/yy)",
|
||||||
|
i18n: "",
|
||||||
|
value: "expiration_date",
|
||||||
|
listName: "",
|
||||||
|
listNameParams: "",
|
||||||
|
class: " text-right ",
|
||||||
|
headerClass: "w-36",
|
||||||
|
disableOnEdit: false,
|
||||||
|
disableOnNew: false,
|
||||||
|
isKey: null,
|
||||||
|
defaultValue: "",
|
||||||
|
showInForm: true,
|
||||||
|
showInTable: false,
|
||||||
|
showAsBadge: false,
|
||||||
|
icon: "",
|
||||||
|
iconClass: "via-detalle-datatable",
|
||||||
|
badgeClass: "via-badge-datatable",
|
||||||
|
toLocation: "",
|
||||||
|
fromLocation: "",
|
||||||
|
fromTitle: "",
|
||||||
|
isFilter: false,
|
||||||
|
type: "number",
|
||||||
|
label: "Expiration (mm/yy)",
|
||||||
|
filterOrder: 0,
|
||||||
|
filterType: "list",
|
||||||
|
filterSort: "ascending",
|
||||||
|
isSearchable: true,
|
||||||
|
isClearable: true,
|
||||||
|
isGroup: false,
|
||||||
|
isMulti: false,
|
||||||
|
useSpeechToText: false,
|
||||||
|
id: "field_expiration_date",
|
||||||
|
fieldId: 3,
|
||||||
|
fieldOrder: 3,
|
||||||
|
docType: "img",
|
||||||
|
formClass: null,
|
||||||
|
countFormatDef: 0,
|
||||||
|
countInputProps: 1,
|
||||||
|
countChangeDef: 0,
|
||||||
|
countPristineMsg: 1,
|
||||||
|
formatDefinition: {},
|
||||||
|
onChangeDefinition: {},
|
||||||
|
pristineMessages: {"required":"common.ruleRequired","pattern":null,"minlength":null,"maxlength":null},
|
||||||
|
inputProps: {"type":"number","autoComplete":"off", required: true},
|
||||||
|
fixedListParams: [],
|
||||||
|
mappingRules: [],
|
||||||
|
fileNameParts: [],
|
||||||
|
fileExtensionParts: [],
|
||||||
|
valor: "expiration_date",
|
||||||
|
texto: "Expiration (mm/yy)",
|
||||||
|
classItem: null,
|
||||||
|
substituteVal: null,
|
||||||
|
format: null,
|
||||||
|
chosen: false,
|
||||||
|
selected: false,
|
||||||
|
onChange: null,
|
||||||
|
imask: {
|
||||||
|
mask: [
|
||||||
|
{
|
||||||
|
mask: 'MY{/}YY',
|
||||||
|
startsWith: '0',
|
||||||
|
definitions: {
|
||||||
|
'Y': /[1-9]/,
|
||||||
|
'M': /[0-1]/,
|
||||||
|
'N': /[0-2]/
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: 'MN{/}YY',
|
||||||
|
startsWith: '1',
|
||||||
|
definitions: {
|
||||||
|
'Y': /[1-9]/,
|
||||||
|
'M': /[0-1]/,
|
||||||
|
'N': /[0-2]/
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mask: 'MY{/}YY',
|
||||||
|
startsWith: '',
|
||||||
|
definitions: {
|
||||||
|
'Y': /[1-9]/,
|
||||||
|
'M': /[0-1]/,
|
||||||
|
'N': /[0-2]/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dispatch: (appended, dynamicMasked) => {
|
||||||
|
const number = (dynamicMasked.value + appended).replace(/\D/g,'');
|
||||||
|
return dynamicMasked.compiledMasks.find(m => number.indexOf(m.startsWith) === 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// IMask(element, {
|
||||||
|
// mask: 'Ple\\ase fill ye\\ar 19YY, month MM \\and v\\alue VL',
|
||||||
|
// lazy: false, // make placeholder always visible
|
||||||
|
|
||||||
|
// blocks: {
|
||||||
|
// YY: {
|
||||||
|
// mask: '00',
|
||||||
|
// },
|
||||||
|
|
||||||
|
// MM: {
|
||||||
|
// mask: IMask.MaskedRange,
|
||||||
|
// from: 1,
|
||||||
|
// to: 12
|
||||||
|
// },
|
||||||
|
|
||||||
|
// VL: {
|
||||||
|
// mask: IMask.MaskedEnum,
|
||||||
|
// enum: ['TV', 'HD', 'VR']
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
}, {
|
||||||
|
text: "Security Code",
|
||||||
|
i18n: "",
|
||||||
|
value: "security_code",
|
||||||
|
listName: "",
|
||||||
|
listNameParams: "",
|
||||||
|
class: " text-right ",
|
||||||
|
headerClass: "w-36",
|
||||||
|
disableOnEdit: false,
|
||||||
|
disableOnNew: false,
|
||||||
|
isKey: null,
|
||||||
|
defaultValue: "",
|
||||||
|
showInForm: true,
|
||||||
|
showInTable: false,
|
||||||
|
showAsBadge: false,
|
||||||
|
icon: "",
|
||||||
|
iconClass: "via-detalle-datatable",
|
||||||
|
badgeClass: "via-badge-datatable",
|
||||||
|
toLocation: "",
|
||||||
|
fromLocation: "",
|
||||||
|
fromTitle: "",
|
||||||
|
isFilter: false,
|
||||||
|
type: "number",
|
||||||
|
label: "Security Code",
|
||||||
|
filterOrder: 0,
|
||||||
|
filterType: "list",
|
||||||
|
filterSort: "ascending",
|
||||||
|
isSearchable: true,
|
||||||
|
isClearable: true,
|
||||||
|
isGroup: false,
|
||||||
|
isMulti: false,
|
||||||
|
useSpeechToText: false,
|
||||||
|
id: "field_security_code",
|
||||||
|
fieldId: 4,
|
||||||
|
fieldOrder: 4,
|
||||||
|
docType: "img",
|
||||||
|
formClass: null,
|
||||||
|
countFormatDef: 0,
|
||||||
|
countInputProps: 1,
|
||||||
|
countChangeDef: 0,
|
||||||
|
countPristineMsg: 1,
|
||||||
|
formatDefinition: {},
|
||||||
|
onChangeDefinition: {},
|
||||||
|
pristineMessages: {"required":"common.ruleRequired","pattern":null,"minlength":null,"maxlength":null},
|
||||||
|
inputProps: {"type":"number","autoComplete":"off", required: true},
|
||||||
|
fixedListParams: [],
|
||||||
|
mappingRules: [],
|
||||||
|
fileNameParts: [],
|
||||||
|
fileExtensionParts: [],
|
||||||
|
valor: "security_code",
|
||||||
|
texto: "Security Code",
|
||||||
|
classItem: null,
|
||||||
|
substituteVal: null,
|
||||||
|
format: null,
|
||||||
|
chosen: false,
|
||||||
|
selected: false,
|
||||||
|
onChange: null,
|
||||||
|
imask: {
|
||||||
|
mask: '0000',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CreditCardProps
|
||||||
|
|
||||||
45
next.config.js
Normal file
45
next.config.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
const config = require('config')
|
||||||
|
const constants = config.get('constants')
|
||||||
|
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
|
||||||
|
const rewrites = async () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/orbisapi/:path*',
|
||||||
|
destination: 'http://localhost:9000/:path*' // Proxy to Backend
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const redirects = async () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/mantenimientos',
|
||||||
|
destination: constants.publicPath,
|
||||||
|
basePath: true,
|
||||||
|
permanent: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextConfig = {
|
||||||
|
env: {
|
||||||
|
...constants
|
||||||
|
},
|
||||||
|
images: {
|
||||||
|
domains: ['www.via-asesores.com', 'gt.via-asesores.com'],
|
||||||
|
unoptimized: true, // solo para generar sitio estatico
|
||||||
|
},
|
||||||
|
assetPrefix: constants.publicPath,
|
||||||
|
basePath: constants.publicPath,
|
||||||
|
// redirects,
|
||||||
|
compiler: {
|
||||||
|
styledComponents: true,
|
||||||
|
},
|
||||||
|
rewrites,
|
||||||
|
reactStrictMode: true,
|
||||||
|
swcMinify: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
66
package.json
Normal file
66
package.json
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"name": "credit-card-example",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "Ejercicio formulario Tarjeta de crédito, uso de imask",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.via-asesores.com/dehernandezm/CreditCardExample.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"operations",
|
||||||
|
"orbis",
|
||||||
|
"smart",
|
||||||
|
"route",
|
||||||
|
"sales",
|
||||||
|
"delivery"
|
||||||
|
],
|
||||||
|
"author": "guatemala@via-asesores.com",
|
||||||
|
"license": "ISC",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"generate": "next build && next export",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.7.3",
|
||||||
|
"@heroicons/react": "^2.0.12",
|
||||||
|
"@react-pdf-viewer/core": "^3.8.0",
|
||||||
|
"@tailwindcss/line-clamp": "^0.4.2",
|
||||||
|
"alasql": "^2.5.1",
|
||||||
|
"base64-to-uint8array": "^1.0.0",
|
||||||
|
"config": "^3.3.8",
|
||||||
|
"js-cookie": "^3.0.1",
|
||||||
|
"js-md5": "^0.7.3",
|
||||||
|
"jspdf": "^2.5.1",
|
||||||
|
"jspdf-autotable": "^3.5.25",
|
||||||
|
"nanoid": "^4.0.0",
|
||||||
|
"next": "13.0.0",
|
||||||
|
"pdfjs-dist": "2.8.335",
|
||||||
|
"pristinejs": "^0.1.9",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-card-flip": "^1.2.0",
|
||||||
|
"react-dom": "18.2.0",
|
||||||
|
"react-dropzone-component": "^3.2.0",
|
||||||
|
"react-multi-email": "^0.5.3",
|
||||||
|
"react-pivottable": "^0.11.0",
|
||||||
|
"react-select": "^5.5.7",
|
||||||
|
"react-toastify": "^9.0.8",
|
||||||
|
"rosetta": "^1.1.0",
|
||||||
|
"underscore": "^1.13.6",
|
||||||
|
"v-functions": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-functions.git",
|
||||||
|
"vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git",
|
||||||
|
"viewerjs": "^1.11.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
|
"autoprefixer": "^10.4.12",
|
||||||
|
"eslint": "8.26.0",
|
||||||
|
"eslint-config-next": "13.0.0",
|
||||||
|
"postcss": "^8.4.18",
|
||||||
|
"tailwindcss": "^3.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
24
pages/_app.jsx
Normal file
24
pages/_app.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import '../styles/globals.css'
|
||||||
|
import LoadingProvider from '../plugins/LoadingContext'
|
||||||
|
import I18nProvider from '../plugins/i18nContext'
|
||||||
|
import { ToastContainer } from 'react-toastify'
|
||||||
|
import ResponsiveContainer from '../layout/ResponsiveContainer'
|
||||||
|
import 'vComponents/styles/generated/output.css'
|
||||||
|
import 'vComponents/styles/generated/bgColors.min.css'
|
||||||
|
import 'vComponents/styles/generated/grid.min.css'
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<I18nProvider locale={'es'}>
|
||||||
|
<LoadingProvider>
|
||||||
|
<ToastContainer />
|
||||||
|
<ResponsiveContainer>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</LoadingProvider>
|
||||||
|
</I18nProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyApp
|
||||||
107
pages/index.jsx
Normal file
107
pages/index.jsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import React, { useEffect, useState, useRef } from 'react'
|
||||||
|
import { CreditCardModel, CreditCardScreen } from './../models/CreditCardModel'
|
||||||
|
import CreditCardProps from './../models/CreditCardProps'
|
||||||
|
import environment from './../utils/environment'
|
||||||
|
import DataForm from 'vComponents/dist/DataForm'
|
||||||
|
import { useIMask } from 'react-imask'
|
||||||
|
|
||||||
|
import ReactCardFlip from 'react-card-flip'
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const maskFieldOptions = {
|
||||||
|
mask: '+{7}(000)000-00-00'
|
||||||
|
}
|
||||||
|
const modelInitial = CreditCardModel()
|
||||||
|
const [model, setModel] = useState(modelInitial)
|
||||||
|
const [headers, setHeaders] = useState(CreditCardProps())
|
||||||
|
const [isReadyHeaders, setIsReadyHeaders] = useState(false)
|
||||||
|
const [testInput, setTestInput] = useState(null)
|
||||||
|
const [isFlipped, setIsFlipped] = useState(false)
|
||||||
|
|
||||||
|
const [opts, setOpts] = useState(maskFieldOptions)
|
||||||
|
const {
|
||||||
|
ref,
|
||||||
|
maskRef,
|
||||||
|
value,
|
||||||
|
setValue,
|
||||||
|
unmaskedValue,
|
||||||
|
setUnmaskedValue,
|
||||||
|
typedValue,
|
||||||
|
setTypedValue,
|
||||||
|
} = useIMask(opts, /* { onAccept, onComplete } */);
|
||||||
|
// Declare a new state variable, which we'll call 'count'
|
||||||
|
const completeHeaders = () => {
|
||||||
|
let _newHeaders = []
|
||||||
|
_newHeaders = environment.buildFunctiontsHeaders(headers)
|
||||||
|
setHeaders(_newHeaders)
|
||||||
|
setIsReadyHeaders(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formComponent = useRef(null)
|
||||||
|
|
||||||
|
// when page is mounted
|
||||||
|
useEffect(() => {
|
||||||
|
completeHeaders()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=' flex w-screen h-screen items-center justify-center'>
|
||||||
|
<div className='w-[34] bg-emerald-50 flex flex-col p-8 space-y-4'>
|
||||||
|
{/* <span className=' font-semibold '>-{value}-</span>
|
||||||
|
<input
|
||||||
|
id='testInput'
|
||||||
|
ref={ref}
|
||||||
|
value={value}
|
||||||
|
className='block py-0.5 px-1.5 w-full text-sm text-gray-900 bg-gray-50 rounded-md border-l-gray-50 border-l-2 border border-gray-300 appearance-none focus:border-blue-500 focus:outline-none focus:shadow-outline focus:ring-1 focus:ring-gray-100 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white'
|
||||||
|
placeholder=' '
|
||||||
|
/> */}
|
||||||
|
<DataForm
|
||||||
|
ref={formComponent}
|
||||||
|
headers={headers}
|
||||||
|
model={model}
|
||||||
|
name='testCreditCard'
|
||||||
|
className='grid cols-2 gap-4'
|
||||||
|
onSave={(newMod) => { console.log('new model result ', newMod) }}
|
||||||
|
onCancel={() => { formComponent.current.reset(); setModel({}) }}
|
||||||
|
onAnyChange={() => { setModel(formComponent.current.getValues()) }}
|
||||||
|
/>
|
||||||
|
<ReactCardFlip isFlipped={isFlipped}>
|
||||||
|
<div className=' bg-gradient-to-r from-sky-500 to-indigo-500 w-full h-60 rounded-lg shadow-xl grid cols-12 grid-rows-3 auto-cols-fr' onClick={() => { setIsFlipped(!isFlipped) }}>
|
||||||
|
<div className=' col-start-2 col-span-2 row-start-1 flex h-full justify-center items-center p-3' >
|
||||||
|
<div className='w-full h-full bg-amber-400 rounded-md' />
|
||||||
|
</div>
|
||||||
|
<div className=' col-start-9 col-span-2 row-start-1 flex h-full w-20 rounded-full justify-center items-center p-3' >
|
||||||
|
<div className='w-full h-full bg-red-600 rounded-full' />
|
||||||
|
</div>
|
||||||
|
<div className=' col-start-10 col-span-2 row-start-1 flex h-full w-20 rounded-full justify-center items-center p-3' >
|
||||||
|
<div className='w-full h-full bg-yellow-600 rounded-full' />
|
||||||
|
</div>
|
||||||
|
<div className=' col-start-1 col-span-12 row-start-2 px-4 text-white flex flex-col '>
|
||||||
|
<span className=' text-sm '>Card Number</span>
|
||||||
|
<span className=' text-xl tabular-nums tracking-widest'>{model.card_number}</span>
|
||||||
|
</div>
|
||||||
|
<div className='w-full col-start-1 col-span-8 row-start-3 px-4 text-white flex flex-col '>
|
||||||
|
<span className=' text-sm '>Name</span>
|
||||||
|
<span className=' text-xl '>{model.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className='w-full col-start-9 col-span-4 row-start-3 px-4 text-white flex flex-col '>
|
||||||
|
<span className=' text-sm '>Expiration Date</span>
|
||||||
|
<span className=' text-xl '>{model.expiration_date}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=' bg-gradient-to-r from-sky-500 to-indigo-500 w-full h-60 rounded-lg shadow-xl grid cols-12 grid-rows-6' onClick={() => { setIsFlipped(!isFlipped) }}>
|
||||||
|
<div className='w-full col-start-1 col-span-12 bg-black row-start-2' />
|
||||||
|
<div className='w-full col-start-13 col-span-12 bg-black row-start-2' />
|
||||||
|
<div className='w-full col-start-2 col-span-12 bg-gray-100 row-start-3' />
|
||||||
|
<div className='w-full col-start-14 col-span-7 bg-gray-100 row-start-3' />
|
||||||
|
<div className='w-full col-start-19 col-span-3 row-start-3 bg-white flex items-center justify-center w-full h-full '>
|
||||||
|
<span>{model.security_code}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ReactCardFlip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginPage
|
||||||
16
pages/welcome.jsx
Normal file
16
pages/welcome.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import presets from "../utils/globalPresets"
|
||||||
|
|
||||||
|
const Welcome = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="pt-5 lg:pt-[120px] pb-10 lg:pb-20 lg:pl-2 bg-gray-100 w-screen h-screen bg-no-repeat bg-right-bottom bg-blend-overlay"
|
||||||
|
style={{ backgroundImage: `url(${presets.images.welcomeFondo})`}}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<div className="flex flex-wrap -mx-4" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Welcome
|
||||||
27
plugins/LoadingContext.jsx
Normal file
27
plugins/LoadingContext.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { createContext, useContext, useState } from "react"
|
||||||
|
import dynamic from 'next/dynamic'
|
||||||
|
import presets from "../utils/globalPresets"
|
||||||
|
|
||||||
|
const LoadingSpinner = dynamic(() => { return import("vComponents/dist/Loading") }, { ssr: false })
|
||||||
|
|
||||||
|
export const LoadingContext = createContext()
|
||||||
|
|
||||||
|
const LoadingProvider = ({ children }) => {
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const loadingWrapper = {
|
||||||
|
loading: loading,
|
||||||
|
setLoading: setLoading,
|
||||||
|
start: () => { setLoading(true) },
|
||||||
|
stop: () => { setLoading(false) }
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoadingContext.Provider value={ loadingWrapper }>
|
||||||
|
{ children }
|
||||||
|
<LoadingSpinner loading={loading} image={presets.images.imageLoader} background={'backgroundLoader'} color={'colorLoader'} />
|
||||||
|
</LoadingContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadingProvider
|
||||||
81
plugins/i18nContext.jsx
Normal file
81
plugins/i18nContext.jsx
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { createContext, useState, useRef, useEffect } from 'react'
|
||||||
|
import rosetta from 'rosetta'
|
||||||
|
// import rosetta from 'rosetta/debug'
|
||||||
|
import { execute } from '../helper/clientApi'
|
||||||
|
import useHasMounted from '../hooks/useHasMounted'
|
||||||
|
|
||||||
|
const i18n = rosetta()
|
||||||
|
|
||||||
|
export const defaultLanguage = 'es'
|
||||||
|
export const languages = ['es', 'en']
|
||||||
|
export const contentLanguageMap = { es: 'es-GT', en: 'en-US' }
|
||||||
|
|
||||||
|
export const I18nContext = createContext()
|
||||||
|
|
||||||
|
// default language
|
||||||
|
i18n.locale(defaultLanguage)
|
||||||
|
|
||||||
|
const I18nProvider = ({ children, locale, dict }) => {
|
||||||
|
const activeLocaleRef = useRef(locale || defaultLanguage)
|
||||||
|
const [, setTick] = useState(0)
|
||||||
|
const firstRender = useRef(true)
|
||||||
|
const [langIsLoaded, setLangIsLoaded] = useState(false)
|
||||||
|
const hasMounted = useHasMounted()
|
||||||
|
|
||||||
|
const i18nWrapper = {
|
||||||
|
activeLocale: activeLocaleRef.current,
|
||||||
|
langIsLoaded: langIsLoaded,
|
||||||
|
t: (...args) => i18n.t(...args),
|
||||||
|
locale: (l, dict) => {
|
||||||
|
i18n.locale(l)
|
||||||
|
activeLocaleRef.current = l
|
||||||
|
if (dict) {
|
||||||
|
i18n.set(l, dict)
|
||||||
|
}
|
||||||
|
// force rerender to update view
|
||||||
|
setTick((tick) => tick + 1)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const setLanguage = async () => {
|
||||||
|
let msgs = {}
|
||||||
|
// si la app ya esta renderizada se cargan los textos
|
||||||
|
if (hasMounted) {
|
||||||
|
const i18nDb = await execute('SPR_I18N_S', [locale])
|
||||||
|
msgs = i18nDb.reduce((obj, elm) => {
|
||||||
|
obj[elm.id_mensaje_padre] = { ...obj[elm.id_mensaje_padre], [elm.id_mensaje]: elm.mensaje }
|
||||||
|
return obj
|
||||||
|
}, {})
|
||||||
|
}
|
||||||
|
i18nWrapper.locale(locale, msgs)
|
||||||
|
setLangIsLoaded(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// for initial SSR render
|
||||||
|
if (locale && firstRender.current === true) {
|
||||||
|
firstRender.current = false
|
||||||
|
setLanguage()
|
||||||
|
}
|
||||||
|
|
||||||
|
// when locale is updated
|
||||||
|
useEffect(() => {
|
||||||
|
if (locale) {
|
||||||
|
setLanguage()
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [locale])
|
||||||
|
|
||||||
|
// when page is mounted
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasMounted) {
|
||||||
|
setLanguage()
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [hasMounted])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default I18nProvider
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
4
public/vercel.svg
Normal file
4
public/vercel.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
7
styles/additional-styles/toastify.css
Normal file
7
styles/additional-styles/toastify.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
@import 'react-toastify/dist/ReactToastify.css';
|
||||||
|
|
||||||
|
.Toastify__toast-container--top-center {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
15
styles/component-styles/datatable.css
Normal file
15
styles/component-styles/datatable.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.via-states-datatable {
|
||||||
|
@apply text-xs font-semibold mr-2 px-2.5 py-0.5 rounded;
|
||||||
|
}
|
||||||
|
.via-icon-active {
|
||||||
|
@apply text-green-800 dark:text-green-300;
|
||||||
|
}
|
||||||
|
.via-icon-inactive {
|
||||||
|
@apply text-red-800 dark:text-red-300;
|
||||||
|
}
|
||||||
|
.via-detalle-datatable {
|
||||||
|
@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
|
||||||
|
}
|
||||||
|
.via-badge-datatable {
|
||||||
|
@apply text-white bg-red-500 border-white dark:border-gray-900;
|
||||||
|
}
|
||||||
102
styles/component-styles/loading.css
Normal file
102
styles/component-styles/loading.css
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
.backgroungLoader {
|
||||||
|
@apply bg-gradient-to-r from-slate-300 backdrop-blur-md;
|
||||||
|
}
|
||||||
|
.colorLoader {
|
||||||
|
@apply bg-teal-700 shadow-md drop-shadow shadow-white;
|
||||||
|
}
|
||||||
|
.div_loading {
|
||||||
|
@apply rounded-lg border border-gray-200 shadow-md sm:p-6 md:p-8 dark:border-gray-700 z-50;
|
||||||
|
position: absolute;
|
||||||
|
height: 35%;
|
||||||
|
width: 30%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.spinner {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.spinner div {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-timing-function: cubic-bezier(0, 1, 1, 0) !important;
|
||||||
|
}
|
||||||
|
.spinner div:nth-child(1) {
|
||||||
|
left: 10%;
|
||||||
|
animation: spinner1 0.6s infinite;
|
||||||
|
}
|
||||||
|
.spinner div:nth-child(2) {
|
||||||
|
left: 10%;
|
||||||
|
animation: spinner2 0.6s infinite;
|
||||||
|
}
|
||||||
|
.spinner div:nth-child(3) {
|
||||||
|
left: 40%;
|
||||||
|
animation: spinner2 0.6s infinite;
|
||||||
|
}
|
||||||
|
.spinner div:nth-child(4) {
|
||||||
|
left: 70%;
|
||||||
|
animation: spinner3 0.6s infinite;
|
||||||
|
}
|
||||||
|
@keyframes spinner1 {
|
||||||
|
0% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spinner3 {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spinner2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(184.61%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-facebook {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.lds-facebook div {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
width: 16px;
|
||||||
|
background: #fff;
|
||||||
|
animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
||||||
|
}
|
||||||
|
.lds-facebook div:nth-child(1) {
|
||||||
|
left: 8px;
|
||||||
|
animation-delay: -0.24s;
|
||||||
|
}
|
||||||
|
.lds-facebook div:nth-child(2) {
|
||||||
|
left: 32px;
|
||||||
|
animation-delay: -0.12s;
|
||||||
|
}
|
||||||
|
.lds-facebook div:nth-child(3) {
|
||||||
|
left: 56px;
|
||||||
|
animation-delay: 0;
|
||||||
|
}
|
||||||
|
@keyframes lds-facebook {
|
||||||
|
0% {
|
||||||
|
top: 8px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
50%, 100% {
|
||||||
|
top: 24px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
18
styles/component-styles/navbar.css
Normal file
18
styles/component-styles/navbar.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.via-navbar {
|
||||||
|
@apply bg-white border-slate-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-menu-btn-navbar {
|
||||||
|
@apply text-slate-500 hover:text-slate-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-usermenu-btn-navbar {
|
||||||
|
@apply bg-oper-600 text-white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-useroptions-navbar {
|
||||||
|
@apply text-black hover:bg-oper-600 hover:text-white !important;
|
||||||
|
}
|
||||||
|
.via-useroptions-selected-navbar {
|
||||||
|
@apply bg-oper-600 text-white;
|
||||||
|
}
|
||||||
11
styles/component-styles/sidebar.css
Normal file
11
styles/component-styles/sidebar.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.via-bg-sidebar {
|
||||||
|
@apply bg-teal-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-options-sidebar {
|
||||||
|
@apply text-gray-50 hover:bg-gray-200 hover:text-gray-600 dark:text-white dark:hover:bg-gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-suboptions-sidebar {
|
||||||
|
@apply text-gray-50 hover:bg-gray-100 hover:text-gray-600 dark:text-white dark:hover:bg-gray-700;
|
||||||
|
}
|
||||||
36
styles/globals.css
Normal file
36
styles/globals.css
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
|
||||||
|
/* <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> */
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 6px;
|
||||||
|
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
|
||||||
|
background-color: rgba(221, 233, 233, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional Styles */
|
||||||
|
@import 'additional-styles/toastify.css';
|
||||||
|
@import 'component-styles/loading.css';
|
||||||
|
@import 'component-styles/sidebar.css';
|
||||||
|
@import 'component-styles/navbar.css';
|
||||||
|
@import 'component-styles/datatable.css';
|
||||||
|
@import 'page-styles/common.css';
|
||||||
|
@import 'page-styles/login.css';
|
||||||
|
@import 'page-styles/eventos_colores.css';
|
||||||
38
styles/page-styles/common.css
Normal file
38
styles/page-styles/common.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.via-card {
|
||||||
|
@apply block rounded-md shadow-md w-full border-gray-300 border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-label {
|
||||||
|
@apply block text-gray-500 font-medium mb-2 pl-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-input {
|
||||||
|
@apply block p-1 w-full z-20 text-sm text-gray-900 rounded-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-50 dark:border-stone-600 dark:placeholder-gray-400 dark:text-neutral-900 dark:focus:border-stone-500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-append-input {
|
||||||
|
@apply absolute top-0 right-0 p-1 text-sm font-medium text-white bg-blue-700 rounded-r-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-append-input-extra {
|
||||||
|
@apply absolute top-0 right-0 p-1 mr-6 text-sm font-medium text-white bg-blue-700 rounded-r-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-button {
|
||||||
|
@apply cursor-pointer inline-flex items-center h-10 px-5 m-2 text-white ease-linear transition-colors duration-150 rounded-lg;
|
||||||
|
}
|
||||||
|
.via-div-actions {
|
||||||
|
@apply flex w-full justify-center flex-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-no {
|
||||||
|
@apply text-red-700 dark:text-red-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-yes {
|
||||||
|
@apply text-green-700 dark:text-green-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-yellow {
|
||||||
|
@apply text-yellow-700 dark:text-yellow-300;
|
||||||
|
}
|
||||||
28
styles/page-styles/eventos_colores.css
Normal file
28
styles/page-styles/eventos_colores.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.via-semaforo-verde {
|
||||||
|
@apply border-l-8 border-green-500;
|
||||||
|
}
|
||||||
|
.via-semaforo-amarillo {
|
||||||
|
@apply border-l-8 border-yellow-500;
|
||||||
|
}
|
||||||
|
.via-semaforo-rojo {
|
||||||
|
@apply border-l-8 border-red-500;
|
||||||
|
}
|
||||||
|
.via-bg-verde {
|
||||||
|
@apply bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-300;
|
||||||
|
}
|
||||||
|
.via-bg-amarillo {
|
||||||
|
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-300;
|
||||||
|
}
|
||||||
|
.via-bg-rojo {
|
||||||
|
@apply bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-verde {
|
||||||
|
@apply text-green-700;
|
||||||
|
}
|
||||||
|
.via-amarillo {
|
||||||
|
@apply text-yellow-700;
|
||||||
|
}
|
||||||
|
.via-rojo {
|
||||||
|
@apply text-red-700;
|
||||||
|
}
|
||||||
23
styles/page-styles/login.css
Normal file
23
styles/page-styles/login.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.via-login-page {
|
||||||
|
@apply flex flex-wrap w-screen h-screen bg-gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-login-layout {
|
||||||
|
@apply flex flex-shrink w-full h-full md:w-1/2 lg:w-1/3 bg-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-login-header {
|
||||||
|
@apply flex w-full p-4 justify-center overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-login-logo {
|
||||||
|
@apply w-64 h-64 bg-center bg-auto bg-no-repeat object-fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-login-background {
|
||||||
|
@apply hidden flex-shrink h-full md:w-1/2 lg:w-2/3 md:flex bg-center bg-contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.via-login-form {
|
||||||
|
@apply flex w-full flex-col space-y-4;
|
||||||
|
}
|
||||||
79
tailwind.config.js
Normal file
79
tailwind.config.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
const plugin = require('tailwindcss/plugin')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: 'jit',
|
||||||
|
content: [
|
||||||
|
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||||
|
"./components/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||||||
|
inter: ['Inter', 'sans-serif', ...defaultTheme.fontFamily.sans],
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
xs: ['0.75rem', { lineHeight: '1.25' }],
|
||||||
|
sm: ['0.875rem', { lineHeight: '1.25' }],
|
||||||
|
base: ['1rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
||||||
|
lg: ['1.125rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
||||||
|
xl: ['1.25rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
|
||||||
|
'2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
|
||||||
|
'3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
|
||||||
|
'4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
|
||||||
|
'5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
|
||||||
|
'6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
|
||||||
|
},
|
||||||
|
screens: {
|
||||||
|
xs: '480px',
|
||||||
|
},
|
||||||
|
borderWidth: {
|
||||||
|
3: '3px',
|
||||||
|
},
|
||||||
|
minWidth: {
|
||||||
|
36: '9rem',
|
||||||
|
44: '11rem',
|
||||||
|
56: '14rem',
|
||||||
|
60: '15rem',
|
||||||
|
72: '18rem',
|
||||||
|
80: '20rem',
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
'8xl': '88rem',
|
||||||
|
'9xl': '96rem',
|
||||||
|
},
|
||||||
|
zIndex: {
|
||||||
|
60: '60',
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
|
||||||
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
|
||||||
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
|
||||||
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
blue: '2px solid rgba(0, 112, 244, 0.5)',
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
oper: {
|
||||||
|
50: '#f7e8e7',
|
||||||
|
100: '#cc756d',
|
||||||
|
200: '#c45e55',
|
||||||
|
300: '#bb473d',
|
||||||
|
400: '#b33024',
|
||||||
|
500: '#aa190c',
|
||||||
|
600: '#99170b',
|
||||||
|
700: '#88140a',
|
||||||
|
800: '#771208',
|
||||||
|
900: '#660f07'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
require('@tailwindcss/line-clamp')
|
||||||
|
]
|
||||||
|
}
|
||||||
160
utils/environment.js
Normal file
160
utils/environment.js
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
import functions from 'v-functions'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @brief Objeto con funciones comunes de ambiente
|
||||||
|
*/
|
||||||
|
const environment = {
|
||||||
|
buildFunctiontsHeaders: (baseHeaders, iconResponse = () => {}, substituteValOnForm = () => {}) => {
|
||||||
|
const newHeaders = []
|
||||||
|
if (baseHeaders != null && baseHeaders.length) {
|
||||||
|
for (let i = 0; i < baseHeaders.length; i++) {
|
||||||
|
const field = baseHeaders[i]
|
||||||
|
if (field.substituteValOnForm != null) {
|
||||||
|
field.substituteValOnForm = (head, _model, _field, _isEdit) => { return substituteValOnForm(head, _model, _field, _isEdit) }
|
||||||
|
}
|
||||||
|
if (field.mappingRules != null && field.mappingRules.length) {
|
||||||
|
const _mappingRules = [...field.mappingRules]
|
||||||
|
// Insertar Funcion para substituteVal
|
||||||
|
const rulesValue = _mappingRules.filter((rule) => (rule.type === 'value' || rule.type === 'icon' || rule.type === 'format' || rule.type === 'fieldValue'))
|
||||||
|
if (rulesValue.length) {
|
||||||
|
field.substituteVal = (item) => {
|
||||||
|
const id = field.value
|
||||||
|
const rules = [...rulesValue]
|
||||||
|
if (rules.length) {
|
||||||
|
for (let i = 0; i < rules.length; i++) {
|
||||||
|
const rule = { ...rules[i] }
|
||||||
|
const numberRuleValue = Number(rule.value)
|
||||||
|
const numberFieldValue = Number(item[rule.field])
|
||||||
|
const areNums = !isNaN(numberRuleValue) && !isNaN(numberFieldValue)
|
||||||
|
let response = rule.result
|
||||||
|
if (rule.type === 'icon') {
|
||||||
|
response = iconResponse(item[id], rule.result, item)
|
||||||
|
}
|
||||||
|
if (rule.rule === 'equal') {
|
||||||
|
if ((!areNums && item[rule.field] === rule.value) || (areNums && numberFieldValue === numberRuleValue)) {
|
||||||
|
return response
|
||||||
|
} else if ((rule.value === null || rule.value === '') && (item[rule.field] === null || item[rule.field] === '')) {
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'greater_than') {
|
||||||
|
if ((!areNums && item[rule.field] > rule.value) || (areNums && numberFieldValue > numberRuleValue)) {
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'less_than') {
|
||||||
|
if ((!areNums && item[rule.field] < rule.value) || (areNums && numberFieldValue < numberRuleValue)) {
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'not_equal') {
|
||||||
|
if ((!areNums && item[rule.field] !== rule.value) || (areNums && numberFieldValue !== numberRuleValue)) {
|
||||||
|
return response
|
||||||
|
} else if ((rule.value === null || rule.value === '') && (item[rule.field] !== null || item[rule.field] !== '')) {
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (rule.type === 'format') {
|
||||||
|
const isNum = !isNaN(numberFieldValue)
|
||||||
|
try {
|
||||||
|
if (rule.rule === 'number') {
|
||||||
|
if (isNum) {
|
||||||
|
return functions.formatNumber(numberFieldValue, rule.result)
|
||||||
|
}
|
||||||
|
return functions.formatNumber(item[rule.field], rule.result)
|
||||||
|
} else if (rule.rule === 'date') {
|
||||||
|
if (isNum) {
|
||||||
|
return functions.formatDate(numberFieldValue, rule.result)
|
||||||
|
}
|
||||||
|
return functions.formatDate(item[rule.field], rule.result)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return item[id]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (rule.type === 'fieldValue') {
|
||||||
|
try {
|
||||||
|
return item[rule.result]
|
||||||
|
} catch (e) {
|
||||||
|
return item[id]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item[id]
|
||||||
|
}
|
||||||
|
return item[id]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
field.substituteVal = null
|
||||||
|
}
|
||||||
|
// Insertar Funcion para classItem
|
||||||
|
const rulesClass = _mappingRules.filter((rule) => (rule.type === 'class'))
|
||||||
|
if (rulesClass.length) {
|
||||||
|
field.classItem = (item) => {
|
||||||
|
const rules = [...rulesClass]
|
||||||
|
let resultClass = ''
|
||||||
|
if (rules.length) {
|
||||||
|
for (let i = 0; i < rules.length; i++) {
|
||||||
|
const rule = { ...rules[i] }
|
||||||
|
const numberRuleValue = Number(rule.value)
|
||||||
|
const numberFieldValue = Number(item[rule.field])
|
||||||
|
const areNums = !isNaN(numberRuleValue) && !isNaN(numberFieldValue)
|
||||||
|
if (rule.rule === 'equal') {
|
||||||
|
if ((!areNums && item[rule.field] === rule.value) || (areNums && numberFieldValue === numberRuleValue)) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
} else if ((rule.value === null || rule.value === '') && (item[rule.field] === null || item[rule.field] === '')) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'greater_than') {
|
||||||
|
if ((!areNums && item[rule.field] > rule.value) || (areNums && numberFieldValue > numberRuleValue)) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'less_than') {
|
||||||
|
if ((!areNums && item[rule.field] < rule.value) || (areNums && numberFieldValue < numberRuleValue)) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
}
|
||||||
|
} else if (rule.rule === 'not_equal') {
|
||||||
|
if ((!areNums && item[rule.field] !== rule.value) || (areNums && numberFieldValue !== numberRuleValue)) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
} else if ((rule.value === null || rule.value === '') && (item[rule.field] !== null || item[rule.field] !== '')) {
|
||||||
|
resultClass = `${resultClass} ${rule.result}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return resultClass
|
||||||
|
}
|
||||||
|
return resultClass
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
field.classItem = null
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
field.classItem = null
|
||||||
|
field.substituteVal = null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (field.showInForm != null && field.showInForm === true) {
|
||||||
|
if (field.formatDefinition != null && field.formatDefinition.action != null) {
|
||||||
|
if (field.formatDefinition.action === 'format') {
|
||||||
|
field.format = (val, definition = field.formatDefinition) => {
|
||||||
|
if (val != null) {
|
||||||
|
if (definition.value === 'lowercase') {
|
||||||
|
const valString = String(val)
|
||||||
|
return valString.toLowerCase()
|
||||||
|
} else if (definition.value === 'uppercase') {
|
||||||
|
const valString = String(val)
|
||||||
|
return valString.toUpperCase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
field.format = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
newHeaders.push({ ...field })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return newHeaders
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default environment
|
||||||
81
utils/globalPresets.js
Normal file
81
utils/globalPresets.js
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
const theme = 'blue'
|
||||||
|
|
||||||
|
const presets = {
|
||||||
|
ENV_URL_API_QUERY: 'https://gt.via-asesores.com/smartdeveloper/orbisapi/api',
|
||||||
|
theme: `${theme}`,
|
||||||
|
appTitle: 'SmartDeveloper',
|
||||||
|
svgIconUrl: 'https://www.via-asesores.com/svgicons//',
|
||||||
|
images: {
|
||||||
|
loginFondo: 'https://www.via-asesores.com/backgrounds/smartcollector/SmartCollector_bg001.jpg',
|
||||||
|
welcomeFondo: 'https://www.via-asesores.com/backgrounds/smartcollector/SmartCollector_bg001.jpg',
|
||||||
|
icon: 'https://www.via-asesores.com/icons/smartcollector/SmartCollector_icon_light.svg',
|
||||||
|
logo: 'https://www.via-asesores.com/logos/smartcollector/SmartCollector_logo_vertical.jpg',
|
||||||
|
imageLoader: 'https://www.via-asesores.com/logos/smartcollector/SmartCollector_loader.jpg',
|
||||||
|
},
|
||||||
|
locations: {
|
||||||
|
login: `/`,
|
||||||
|
welcome: `/welcome`,
|
||||||
|
profile: `/seguridad/profile`,
|
||||||
|
},
|
||||||
|
toaster: {
|
||||||
|
position: 'top-center',
|
||||||
|
autoClose: 5000,
|
||||||
|
hideProgressBar: false,
|
||||||
|
closeOnClick: true,
|
||||||
|
pauseOnHover: true,
|
||||||
|
draggable: true,
|
||||||
|
theme: 'light'
|
||||||
|
},
|
||||||
|
pristine: {
|
||||||
|
// class of the parent element where the error/success class is added
|
||||||
|
classTo: 'form-group',
|
||||||
|
errorClass: 'ring-red-400',
|
||||||
|
successClass: 'has-success',
|
||||||
|
// class of the parent element where error text element is appended
|
||||||
|
errorTextParent: 'form-group',
|
||||||
|
// type of element to create for the error text
|
||||||
|
errorTextTag: 'div',
|
||||||
|
// class of the error text element
|
||||||
|
errorTextClass: 'text-help text-red-500 text-sm py-1'
|
||||||
|
},
|
||||||
|
graphOptions: {
|
||||||
|
interaction: {
|
||||||
|
dragNodes: false,
|
||||||
|
dragView: true,
|
||||||
|
hover: true
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
hierarchical: {
|
||||||
|
enabled: true,
|
||||||
|
levelSeparation: 200,
|
||||||
|
nodeSpacing: 200,
|
||||||
|
treeSpacing: 200,
|
||||||
|
blockShifting: true,
|
||||||
|
edgeMinimization: true,
|
||||||
|
parentCentralization: true,
|
||||||
|
direction: "LR", // UD, DU, LR, RL
|
||||||
|
sortMethod: "hubsize", // hubsize, directed
|
||||||
|
shakeTowards: "leaves" // roots, leaves
|
||||||
|
}
|
||||||
|
},
|
||||||
|
edges: {
|
||||||
|
color: "#000000"
|
||||||
|
},
|
||||||
|
height: "700px",
|
||||||
|
physics: {
|
||||||
|
enabled: false,
|
||||||
|
// maxVelocity: 50,
|
||||||
|
// minVelocity: 0.1,
|
||||||
|
// solver: "barnesHut",
|
||||||
|
stabilization: {
|
||||||
|
enabled: true,
|
||||||
|
iterations: 1000,
|
||||||
|
updateInterval: 100,
|
||||||
|
onlyDynamicEdges: false,
|
||||||
|
fit: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default presets
|
||||||
Loading…
Reference in New Issue
Block a user