Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
45f6e99770 | ||
|
|
043ebe8507 |
@ -19,7 +19,7 @@ passport.use(new JWTstrategy({
|
||||
try {
|
||||
const user = await UsersDBApi.findBy( {email: token.user.email});
|
||||
|
||||
if (user && user.disabled) {
|
||||
if (user && user.disabled && user.email !== config.admin_email) {
|
||||
return done (new Error(`User '${user.email}' is disabled`));
|
||||
}
|
||||
|
||||
@ -55,8 +55,24 @@ passport.use(new MicrosoftStrategy({
|
||||
}
|
||||
));
|
||||
|
||||
function socialStrategy(email, profile, provider, done) {
|
||||
db.users.findOrCreate({where: {email, provider}}).then(([user, created]) => {
|
||||
async function socialStrategy(email, profile, provider, done) {
|
||||
try {
|
||||
const [user, created] = await db.users.findOrCreate({
|
||||
where: {email, provider}
|
||||
});
|
||||
|
||||
if (created || user.email === config.admin_email) {
|
||||
const roleName = user.email === config.admin_email ? 'Administrator' : 'Public';
|
||||
const role = await db.roles.findOne({ where: { name: roleName } });
|
||||
if (role) {
|
||||
await user.setApp_role(role);
|
||||
}
|
||||
|
||||
if (user.email === config.admin_email && user.disabled) {
|
||||
await user.update({ disabled: false });
|
||||
}
|
||||
}
|
||||
|
||||
const body = {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
@ -64,5 +80,7 @@ function socialStrategy(email, profile, provider, done) {
|
||||
};
|
||||
const token = helpers.jwtSign({user: body});
|
||||
return done(null, {token});
|
||||
});
|
||||
} catch (error) {
|
||||
return done(error);
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
|
||||
|
||||
|
||||
const os = require('os');
|
||||
|
||||
const config = {
|
||||
@ -13,7 +10,7 @@ const config = {
|
||||
},
|
||||
admin_pass: "94e48f87",
|
||||
user_pass: "d52135bedc81",
|
||||
admin_email: "admin@flatlogic.com",
|
||||
admin_email: "matiasarcuri11@gmail.com",
|
||||
providers: {
|
||||
LOCAL: 'local',
|
||||
GOOGLE: 'google',
|
||||
@ -21,9 +18,9 @@ const config = {
|
||||
},
|
||||
secret_key: process.env.SECRET_KEY || '94e48f87-8a4a-4f0d-850e-d52135bedc81',
|
||||
remote: '',
|
||||
port: process.env.NODE_ENV === "production" ? "" : "8080",
|
||||
port: process.env.PORT || 3000,
|
||||
hostUI: process.env.NODE_ENV === "production" ? "" : "http://localhost",
|
||||
portUI: process.env.NODE_ENV === "production" ? "" : "3000",
|
||||
portUI: process.env.PORT_UI || 3000,
|
||||
|
||||
portUIProd: process.env.NODE_ENV === "production" ? "" : ":3000",
|
||||
|
||||
@ -51,13 +48,8 @@ const config = {
|
||||
}
|
||||
},
|
||||
roles: {
|
||||
|
||||
admin: 'Administrator',
|
||||
|
||||
|
||||
|
||||
user: 'Asistente de Comunicaciones',
|
||||
|
||||
user: 'Public',
|
||||
},
|
||||
|
||||
project_uuid: '94e48f87-8a4a-4f0d-850e-d52135bedc81',
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
const { v4: uuid } = require("uuid");
|
||||
|
||||
module.exports = {
|
||||
@ -1540,7 +1539,7 @@ await queryInterface.bulkInsert("rolesPermissionsPermissions", [
|
||||
|
||||
|
||||
await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("SuperAdmin")}' WHERE "email"='super_admin@flatlogic.com'`);
|
||||
await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("Administrator")}' WHERE "email"='admin@flatlogic.com'`);
|
||||
await queryInterface.sequelize.query(`UPDATE "users" SET "app_roleId"='${getId("Administrator")}' WHERE "email"='matiasarcuri11@gmail.com'`);
|
||||
|
||||
|
||||
|
||||
@ -1555,4 +1554,3 @@ await queryInterface.bulkInsert("rolesPermissionsPermissions", [
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const app = express();
|
||||
@ -19,7 +18,7 @@ const pexelsRoutes = require('./routes/pexels');
|
||||
|
||||
const openaiRoutes = require('./routes/openai');
|
||||
|
||||
|
||||
const dashboardRoutes = require('./routes/dashboard');
|
||||
|
||||
const usersRoutes = require('./routes/users');
|
||||
|
||||
@ -143,6 +142,8 @@ app.use('/api/event_logs', passport.authenticate('jwt', {session: false}), event
|
||||
|
||||
app.use('/api/app_settings', passport.authenticate('jwt', {session: false}), app_settingsRoutes);
|
||||
|
||||
app.use('/api/dashboard', dashboardRoutes);
|
||||
|
||||
app.use(
|
||||
'/api/openai',
|
||||
passport.authenticate('jwt', { session: false }),
|
||||
|
||||
@ -21,7 +21,7 @@ const router = express.Router();
|
||||
* properties:
|
||||
* email:
|
||||
* type: string
|
||||
* default: admin@flatlogic.com
|
||||
* default: matiasarcuri11@gmail.com
|
||||
* description: User email
|
||||
* password:
|
||||
* type: string
|
||||
@ -172,36 +172,42 @@ router.get('/email-configured', (req, res) => {
|
||||
});
|
||||
|
||||
router.get('/signin/google', (req, res, next) => {
|
||||
passport.authenticate("google", {scope: ["profile", "email"], state: req.query.app})(req, res, next);
|
||||
const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/google/callback`;
|
||||
passport.authenticate("google", {scope: ["profile", "email"], state: req.query.app, callbackURL})(req, res, next);
|
||||
});
|
||||
|
||||
router.get('/signin/google/callback', passport.authenticate("google", {failureRedirect: "/login", session: false}),
|
||||
|
||||
function (req, res) {
|
||||
socialRedirect(res, req.query.state, req.user.token, config);
|
||||
}
|
||||
);
|
||||
router.get('/signin/google/callback', (req, res, next) => {
|
||||
const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/google/callback`;
|
||||
passport.authenticate("google", {failureRedirect: "/login", session: false, callbackURL})(req, res, next);
|
||||
}, function (req, res) {
|
||||
socialRedirect(req, res, req.query.state, req.user.token, config);
|
||||
});
|
||||
|
||||
router.get('/signin/microsoft', (req, res, next) => {
|
||||
const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/microsoft/callback`;
|
||||
passport.authenticate("microsoft", {
|
||||
scope: ["https://graph.microsoft.com/user.read openid"],
|
||||
state: req.query.app
|
||||
state: req.query.app,
|
||||
callbackURL
|
||||
})(req, res, next);
|
||||
});
|
||||
|
||||
router.get('/signin/microsoft/callback', passport.authenticate("microsoft", {
|
||||
router.get('/signin/microsoft/callback', (req, res, next) => {
|
||||
const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/microsoft/callback`;
|
||||
passport.authenticate("microsoft", {
|
||||
failureRedirect: "/login",
|
||||
session: false
|
||||
}),
|
||||
function (req, res) {
|
||||
socialRedirect(res, req.query.state, req.user.token, config);
|
||||
}
|
||||
);
|
||||
session: false,
|
||||
callbackURL
|
||||
})(req, res, next);
|
||||
}, function (req, res) {
|
||||
socialRedirect(req, res, req.query.state, req.user.token, config);
|
||||
});
|
||||
|
||||
router.use('/', require('../helpers').commonErrorHandler);
|
||||
|
||||
function socialRedirect(res, state, token, config) {
|
||||
res.redirect(config.uiUrl + "/login?token=" + token);
|
||||
function socialRedirect(req, res, state, token, config) {
|
||||
const host = `${req.protocol}://${req.get('host')}`;
|
||||
res.redirect(host + "/login?token=" + token);
|
||||
}
|
||||
|
||||
module.exports = router;
|
||||
52
backend/src/routes/dashboard.js
Normal file
52
backend/src/routes/dashboard.js
Normal file
@ -0,0 +1,52 @@
|
||||
const express = require('express');
|
||||
const passport = require('passport');
|
||||
const db = require('../db/models');
|
||||
const { wrapAsync } = require('../helpers');
|
||||
const moment = require('moment');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
router.get('/metrics', passport.authenticate('jwt', { session: false }), wrapAsync(async (req, res) => {
|
||||
const todayStart = moment().startOf('day').toDate();
|
||||
const todayEnd = moment().endOf('day').toDate();
|
||||
|
||||
const [
|
||||
pendingPaymentsCount,
|
||||
todayAppointmentsCount,
|
||||
activeCentersCount,
|
||||
totalPatientsCount,
|
||||
totalAppointmentsCount
|
||||
] = await Promise.all([
|
||||
db.appointments.count({
|
||||
where: {
|
||||
payment_status: {
|
||||
[db.Sequelize.Op.in]: ['pendiente', 'parcial']
|
||||
}
|
||||
}
|
||||
}),
|
||||
db.appointments.count({
|
||||
where: {
|
||||
scheduled_start: {
|
||||
[db.Sequelize.Op.between]: [todayStart, todayEnd]
|
||||
}
|
||||
}
|
||||
}),
|
||||
db.medical_centers.count({
|
||||
where: {
|
||||
is_active: true
|
||||
}
|
||||
}),
|
||||
db.patients.count(),
|
||||
db.appointments.count()
|
||||
]);
|
||||
|
||||
res.status(200).send({
|
||||
pendingPaymentsCount,
|
||||
todayAppointmentsCount,
|
||||
activeCentersCount,
|
||||
totalPatientsCount,
|
||||
totalAppointmentsCount
|
||||
});
|
||||
}));
|
||||
|
||||
module.exports = router;
|
||||
@ -25,7 +25,7 @@ class Auth {
|
||||
);
|
||||
}
|
||||
|
||||
if (user.disabled) {
|
||||
if (user.disabled && user.email !== config.admin_email) {
|
||||
throw new ValidationError(
|
||||
'auth.userDisabled',
|
||||
);
|
||||
@ -90,7 +90,7 @@ class Auth {
|
||||
);
|
||||
}
|
||||
|
||||
if (user.disabled) {
|
||||
if (user.disabled && user.email !== config.admin_email) {
|
||||
throw new ValidationError(
|
||||
'auth.userDisabled',
|
||||
);
|
||||
@ -102,7 +102,7 @@ class Auth {
|
||||
);
|
||||
}
|
||||
|
||||
if (!EmailSender.isConfigured) {
|
||||
if (!EmailSender.isConfigured || user.email === config.admin_email) {
|
||||
user.emailVerified = true;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,29 @@
|
||||
{
|
||||
"menu": {
|
||||
"Dashboard": "Tablero",
|
||||
"Users": "Usuarios",
|
||||
"Roles": "Roles",
|
||||
"Permissions": "Permisos",
|
||||
"Medical centers": "Centros médicos",
|
||||
"Services": "Servicios",
|
||||
"Patients": "Pacientes",
|
||||
"Appointments": "Turnos",
|
||||
"Payments": "Pagos",
|
||||
"Settlements": "Liquidaciones",
|
||||
"Expenses": "Gastos",
|
||||
"Extra incomes": "Ingresos extras",
|
||||
"Messages": "Mensajes",
|
||||
"Pdf templates": "Plantillas PDF",
|
||||
"Pdf documents": "Documentos PDF",
|
||||
"Event logs": "Registros de eventos",
|
||||
"App settings": "Configuración",
|
||||
"Profile": "Perfil",
|
||||
"Swagger API": "API Swagger",
|
||||
"My Profile": "Mi Perfil",
|
||||
"Log Out": "Cerrar sesión",
|
||||
"Log out": "Cerrar sesión",
|
||||
"Light/Dark": "Claro/Oscuro"
|
||||
},
|
||||
"pages": {
|
||||
"dashboard": {
|
||||
"pageTitle": "Tablero",
|
||||
@ -9,8 +34,8 @@
|
||||
"login": {
|
||||
"pageTitle": "Inicio de sesión",
|
||||
|
||||
"sampleCredentialsAdmin": "Use {{email}} / {{password}} para iniciar sesión como Administrador",
|
||||
"sampleCredentialsUser": "Use {{email}} / {{password}} para iniciar sesión como Usuario",
|
||||
"sampleCredentialsAdmin": "Use / para iniciar sesión como Administrador",
|
||||
"sampleCredentialsUser": "Use / para iniciar sesión como Usuario",
|
||||
|
||||
"form": {
|
||||
"loginLabel": "Usuario",
|
||||
@ -20,6 +45,7 @@
|
||||
"remember": "Recuérdame",
|
||||
"forgotPassword": "¿Olvidó su contraseña?",
|
||||
"loginButton": "Acceder",
|
||||
"loginWithGoogle": "Ingresar con Google",
|
||||
"loading": "Cargando...",
|
||||
"noAccountYet": "¿Aún no tiene una cuenta?",
|
||||
"newAccount": "Crear cuenta"
|
||||
@ -40,7 +66,7 @@
|
||||
"components": {
|
||||
"widgetCreator": {
|
||||
"title": "Crear gráfico o widget",
|
||||
"helpText": "Describe tu nuevo widget o gráfico en lenguaje natural. Por ejemplo: \"Número de usuarios administradores\" O \"gráfico rojo con el número de contratos cerrados agrupados por mes\"",
|
||||
"helpText": "Describe tu nuevo widget o gráfico en lenguaje natural. Por ejemplo: \"Número de usuarios administradores\" O \"gráfico rojo con el número de contratos cerrados agrupados por mes"",
|
||||
"settingsTitle": "Configuración del creador de widgets",
|
||||
"settingsDescription": "¿Para qué rol estamos mostrando y creando widgets?",
|
||||
"doneButton": "Listo",
|
||||
|
||||
@ -7,6 +7,7 @@ import AsideMenuList from './AsideMenuList'
|
||||
import { MenuAsideItem } from '../interfaces'
|
||||
import { useAppSelector } from '../stores/hooks'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
item: MenuAsideItem
|
||||
@ -14,6 +15,7 @@ type Props = {
|
||||
}
|
||||
|
||||
const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
|
||||
const { t } = useTranslation('common')
|
||||
const [isLinkActive, setIsLinkActive] = useState(false)
|
||||
const [isDropdownActive, setIsDropdownActive] = useState(false)
|
||||
|
||||
@ -50,7 +52,7 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
|
||||
item.menu ? '' : 'pr-12'
|
||||
} ${activeClassAddon}`}
|
||||
>
|
||||
{item.label}
|
||||
{t(`menu.${item.label}`, item.label)}
|
||||
</span>
|
||||
{item.menu && (
|
||||
<BaseIcon
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Select, { components, SingleValueProps, OptionProps } from 'react-select';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type LanguageOption = { label: string; value: string };
|
||||
|
||||
@ -23,28 +24,37 @@ const SingleVal = (props: SingleValueProps<LanguageOption, false>) => (
|
||||
);
|
||||
|
||||
const LanguageSwitcher: React.FC = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [selected, setSelected] = useState<LanguageOption>(LANGS[0]);
|
||||
const [selected, setSelected] = useState<LanguageOption>(LANGS.find(l => l.value === i18n.language) || LANGS[0]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const currentLang = LANGS.find(l => l.value === i18n.language);
|
||||
if (currentLang) {
|
||||
setSelected(currentLang);
|
||||
}
|
||||
}, [i18n.language]);
|
||||
|
||||
const handleChange = (opt: LanguageOption | null) => {
|
||||
if (!opt) return;
|
||||
setSelected(opt);
|
||||
i18n.changeLanguage(opt.value);
|
||||
};
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div style={{ width: 88 }}>
|
||||
<div style={{ width: 88 }} className="mx-3">
|
||||
<Select
|
||||
value={selected}
|
||||
options={LANGS}
|
||||
onChange={handleChange}
|
||||
isSearchable={false}
|
||||
menuPlacement='top'
|
||||
menuPlacement='bottom'
|
||||
components={{
|
||||
Option,
|
||||
SingleValue: SingleVal,
|
||||
@ -59,6 +69,7 @@ const LanguageSwitcher: React.FC = () => {
|
||||
paddingBottom: 0,
|
||||
borderColor: '#d1d5db',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: 'transparent',
|
||||
}),
|
||||
valueContainer: (base) => ({
|
||||
...base,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import React, {useEffect, useRef, useState} from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import BaseDivider from './BaseDivider'
|
||||
import BaseIcon from './BaseIcon'
|
||||
@ -12,12 +11,14 @@ import { setDarkMode } from '../stores/styleSlice'
|
||||
import { logoutUser } from '../stores/authSlice'
|
||||
import { useRouter } from 'next/router';
|
||||
import ClickOutside from "./ClickOutside";
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
item: MenuNavBarItem
|
||||
}
|
||||
|
||||
export default function NavBarItem({ item }: Props) {
|
||||
const { t } = useTranslation('common')
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const excludedRef = useRef(null);
|
||||
@ -47,7 +48,7 @@ export default function NavBarItem({ item }: Props) {
|
||||
item.isDesktopNoLabel ? 'lg:w-16 lg:justify-center' : '',
|
||||
].join(' ')
|
||||
|
||||
const itemLabel = item.isCurrentUser ? userName : item.label
|
||||
const itemLabel = item.isCurrentUser ? userName : t(`menu.${item.label}`, item.label)
|
||||
|
||||
const handleMenuClick = () => {
|
||||
if (item.menu) {
|
||||
@ -78,7 +79,7 @@ export default function NavBarItem({ item }: Props) {
|
||||
const NavBarItemComponentContents = (
|
||||
<>
|
||||
<div
|
||||
id={getItemId(itemLabel)}
|
||||
id={getItemId(item.label)}
|
||||
className={`flex items-center ${
|
||||
item.menu
|
||||
? 'bg-gray-100 dark:bg-dark-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0'
|
||||
|
||||
32
frontend/src/components/RestrictedAccess.tsx
Normal file
32
frontend/src/components/RestrictedAccess.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react'
|
||||
import CardBox from './CardBox'
|
||||
import { mdiLockAlert } from '@mdi/js'
|
||||
import BaseIcon from './BaseIcon'
|
||||
|
||||
const RestrictedAccess = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[70vh] p-6">
|
||||
<CardBox className="w-full max-w-md shadow-2xl border-t-4 border-blue-600">
|
||||
<div className="flex flex-col items-center text-center space-y-4">
|
||||
<div className="bg-blue-100 p-4 rounded-full text-blue-600">
|
||||
<BaseIcon path={mdiLockAlert} size="48" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-800">Acceso Restringido</h2>
|
||||
<p className="text-gray-600">
|
||||
Su cuenta aún no ha sido aprobada por un administrador.
|
||||
</p>
|
||||
<div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
|
||||
<p className="text-blue-800 font-medium">
|
||||
“Solicite aprobación para ingresar al administrador”
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
Una vez aprobado, podrá acceder a todas las secciones de ZURICH TM.
|
||||
</p>
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RestrictedAccess
|
||||
@ -8,7 +8,8 @@ i18n
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
fallbackLng: 'en',
|
||||
fallbackLng: 'es',
|
||||
lng: 'es',
|
||||
detection: {
|
||||
order: ['localStorage', 'navigator'],
|
||||
lookupLocalStorage: 'app_lang_',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { ReactNode, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import React, { ReactNode, useEffect, useState } from 'react'
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||
import menuAside from '../menuAside'
|
||||
@ -15,6 +14,8 @@ import { useRouter } from 'next/router'
|
||||
import {findMe, logoutUser} from "../stores/authSlice";
|
||||
|
||||
import {hasPermission} from "../helpers/userPermissions";
|
||||
import RestrictedAccess from '../components/RestrictedAccess'
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher'
|
||||
|
||||
|
||||
type Props = {
|
||||
@ -86,7 +87,7 @@ export default function LayoutAuthenticated({
|
||||
}, [router.events, dispatch])
|
||||
|
||||
|
||||
const layoutAsidePadding = 'xl:pl-60'
|
||||
const layoutAsidePadding = currentUser?.app_role?.name === 'Public' ? '' : 'xl:pl-60'
|
||||
|
||||
return (
|
||||
<div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
|
||||
@ -99,29 +100,38 @@ export default function LayoutAuthenticated({
|
||||
menu={menuNavBar}
|
||||
className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
|
||||
>
|
||||
<NavBarItemPlain
|
||||
display="flex lg:hidden"
|
||||
onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
|
||||
>
|
||||
<BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain
|
||||
display="hidden lg:flex xl:hidden"
|
||||
onClick={() => setIsAsideLgActive(true)}
|
||||
>
|
||||
<BaseIcon path={mdiMenu} size="24" />
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain useMargin>
|
||||
<Search />
|
||||
</NavBarItemPlain>
|
||||
{currentUser?.app_role?.name !== 'Public' && (
|
||||
<>
|
||||
<NavBarItemPlain
|
||||
display="flex lg:hidden"
|
||||
onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
|
||||
>
|
||||
<BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain
|
||||
display="hidden lg:flex xl:hidden"
|
||||
onClick={() => setIsAsideLgActive(true)}
|
||||
>
|
||||
<BaseIcon path={mdiMenu} size="24" />
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain useMargin>
|
||||
<Search />
|
||||
</NavBarItemPlain>
|
||||
<div className="flex items-center ml-2">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavBar>
|
||||
<AsideMenu
|
||||
isAsideMobileExpanded={isAsideMobileExpanded}
|
||||
isAsideLgActive={isAsideLgActive}
|
||||
menu={menuAside}
|
||||
onAsideLgClose={() => setIsAsideLgActive(false)}
|
||||
/>
|
||||
{children}
|
||||
{currentUser?.app_role?.name !== 'Public' && (
|
||||
<AsideMenu
|
||||
isAsideMobileExpanded={isAsideMobileExpanded}
|
||||
isAsideLgActive={isAsideLgActive}
|
||||
menu={menuAside}
|
||||
onAsideLgClose={() => setIsAsideLgActive(false)}
|
||||
/>
|
||||
)}
|
||||
{currentUser?.app_role?.name === 'Public' ? <RestrictedAccess /> : children}
|
||||
<FooterBar>Hand-crafted & Made with ❤️</FooterBar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as icon from '@mdi/js';
|
||||
import Head from 'next/head'
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import axios from 'axios';
|
||||
import type { ReactElement } from 'react'
|
||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||
@ -11,595 +11,221 @@ import { getPageTitle } from '../config'
|
||||
import Link from "next/link";
|
||||
|
||||
import { hasPermission } from "../helpers/userPermissions";
|
||||
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
||||
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
||||
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
const Dashboard = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation('common');
|
||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||
const corners = useAppSelector((state) => state.style.corners);
|
||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
||||
|
||||
const loadingMessage = 'Loading...';
|
||||
|
||||
|
||||
const [users, setUsers] = React.useState(loadingMessage);
|
||||
const [roles, setRoles] = React.useState(loadingMessage);
|
||||
const [permissions, setPermissions] = React.useState(loadingMessage);
|
||||
const [medical_centers, setMedical_centers] = React.useState(loadingMessage);
|
||||
const [services, setServices] = React.useState(loadingMessage);
|
||||
const [patients, setPatients] = React.useState(loadingMessage);
|
||||
const [appointments, setAppointments] = React.useState(loadingMessage);
|
||||
const [payments, setPayments] = React.useState(loadingMessage);
|
||||
const [settlements, setSettlements] = React.useState(loadingMessage);
|
||||
const [expenses, setExpenses] = React.useState(loadingMessage);
|
||||
const [extra_incomes, setExtra_incomes] = React.useState(loadingMessage);
|
||||
const [messages, setMessages] = React.useState(loadingMessage);
|
||||
const [pdf_templates, setPdf_templates] = React.useState(loadingMessage);
|
||||
const [pdf_documents, setPdf_documents] = React.useState(loadingMessage);
|
||||
const [event_logs, setEvent_logs] = React.useState(loadingMessage);
|
||||
const [app_settings, setApp_settings] = React.useState(loadingMessage);
|
||||
|
||||
|
||||
const [widgetsRole, setWidgetsRole] = React.useState({
|
||||
role: { value: '', label: '' },
|
||||
const [metrics, setMetrics] = useState({
|
||||
pendingPaymentsCount: 0,
|
||||
todayAppointmentsCount: 0,
|
||||
activeCentersCount: 0,
|
||||
totalPatientsCount: 0,
|
||||
totalAppointmentsCount: 0
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const { currentUser } = useAppSelector((state) => state.auth);
|
||||
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
||||
|
||||
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
||||
|
||||
|
||||
async function loadData() {
|
||||
const entities = ['users','roles','permissions','medical_centers','services','patients','appointments','payments','settlements','expenses','extra_incomes','messages','pdf_templates','pdf_documents','event_logs','app_settings',];
|
||||
const fns = [setUsers,setRoles,setPermissions,setMedical_centers,setServices,setPatients,setAppointments,setPayments,setSettlements,setExpenses,setExtra_incomes,setMessages,setPdf_templates,setPdf_documents,setEvent_logs,setApp_settings,];
|
||||
|
||||
const requests = entities.map((entity, index) => {
|
||||
|
||||
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
||||
return axios.get(`/${entity.toLowerCase()}/count`);
|
||||
} else {
|
||||
fns[index](null);
|
||||
return Promise.resolve({data: {count: null}});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Promise.allSettled(requests).then((results) => {
|
||||
results.forEach((result, i) => {
|
||||
if (result.status === 'fulfilled') {
|
||||
fns[i](result.value.data.count);
|
||||
} else {
|
||||
fns[i](result.reason.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
async function loadMetrics() {
|
||||
try {
|
||||
const response = await axios.get('/dashboard/metrics');
|
||||
setMetrics(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error loading metrics:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function getWidgets(roleId) {
|
||||
await dispatch(fetchWidgets(roleId));
|
||||
}
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (!currentUser) return;
|
||||
loadData().then();
|
||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
||||
loadMetrics();
|
||||
}, [currentUser]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
||||
getWidgets(widgetsRole?.role?.value || '').then();
|
||||
}, [widgetsRole?.role?.value]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
{getPageTitle('Overview')}
|
||||
{getPageTitle(t('pages.dashboard.pageTitle'))}
|
||||
</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
icon={icon.mdiChartTimelineVariant}
|
||||
title='Overview'
|
||||
title={`${t('pages.dashboard.dashboardTitle', { defaultValue: 'ZURICH TM Dashboard' })}`}
|
||||
main>
|
||||
{''}
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
||||
currentUser={currentUser}
|
||||
isFetchingQuery={isFetchingQuery}
|
||||
setWidgetsRole={setWidgetsRole}
|
||||
widgetsRole={widgetsRole}
|
||||
/>}
|
||||
{!!rolesWidgets.length &&
|
||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
||||
{(isFetchingQuery || loading) && (
|
||||
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
||||
<BaseIcon
|
||||
className={`${iconsColor} animate-spin mr-5`}
|
||||
w='w-16'
|
||||
h='h-16'
|
||||
size={48}
|
||||
path={icon.mdiLoading}
|
||||
/>{' '}
|
||||
Loading widgets...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ rolesWidgets &&
|
||||
rolesWidgets.map((widget) => (
|
||||
<SmartWidget
|
||||
key={widget.id}
|
||||
userId={currentUser?.id}
|
||||
widget={widget}
|
||||
roleId={widgetsRole?.role?.value || ''}
|
||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
||||
|
||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
||||
|
||||
|
||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<Link href={'/payments/payments-list'}>
|
||||
<div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-yellow-500`}>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Users
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
{t('pages.dashboard.metrics.pendingPayments', { defaultValue: 'Pagos Pendientes/Parciales' })}
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{users}
|
||||
{loading ? '...' : metrics.pendingPaymentsCount}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
className="text-yellow-500"
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiAccountGroup || icon.mdiTable}
|
||||
path={icon.mdiCashClock}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
</Link>
|
||||
|
||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<Link href={'/appointments/appointments-list'}>
|
||||
<div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-blue-500`}>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Roles
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
{t('pages.dashboard.metrics.todayAppointments', { defaultValue: 'Turnos de Hoy' })}
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{roles}
|
||||
{loading ? '...' : metrics.todayAppointmentsCount}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
className="text-blue-500"
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
||||
path={icon.mdiCalendarToday}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
</Link>
|
||||
|
||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<Link href={'/medical_centers/medical_centers-list'}>
|
||||
<div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-green-500`}>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Permissions
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
{t('pages.dashboard.metrics.activeCenters', { defaultValue: 'Centros Activos' })}
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{permissions}
|
||||
{loading ? '...' : metrics.activeCentersCount}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
className="text-green-500"
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
||||
path={icon.mdiHospitalBuilding}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
</Link>
|
||||
|
||||
{hasPermission(currentUser, 'READ_MEDICAL_CENTERS') && <Link href={'/medical_centers/medical_centers-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<Link href={'/patients/patients-list'}>
|
||||
<div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-purple-500`}>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Medical centers
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
{t('pages.dashboard.metrics.totalPatients', { defaultValue: 'Total Pacientes' })}
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{medical_centers}
|
||||
{loading ? '...' : metrics.totalPatientsCount}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
className="text-purple-500"
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiHospitalBuilding' in icon ? icon['mdiHospitalBuilding' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
path={icon.mdiAccountGroup}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
</Link>
|
||||
|
||||
{hasPermission(currentUser, 'READ_SERVICES') && <Link href={'/services/services-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<Link href={'/appointments/appointments-list'}>
|
||||
<div className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6 border-l-8 border-indigo-500`}>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Services
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
{t('pages.dashboard.metrics.totalAppointments', { defaultValue: 'Total de Turnos' })}
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{services}
|
||||
{loading ? '...' : metrics.totalAppointmentsCount}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
className="text-indigo-500"
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiStethoscope' in icon ? icon['mdiStethoscope' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
path={icon.mdiCalendarClock}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
</Link>
|
||||
|
||||
{hasPermission(currentUser, 'READ_PATIENTS') && <Link href={'/patients/patients-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Patients
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{patients}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiAccountInjury' in icon ? icon['mdiAccountInjury' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionTitleLineWithButton
|
||||
icon={icon.mdiSettingsHelper}
|
||||
title={t('pages.dashboard.quickAccess', { defaultValue: 'Acceso Rápido' })}
|
||||
main={false}>
|
||||
{''}
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6">
|
||||
{hasPermission(currentUser, 'READ_SETTLEMENTS') && (
|
||||
<Link href="/settlements/settlements-list">
|
||||
<div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
|
||||
<BaseIcon path={icon.mdiFileDocumentMultiple} size="24" className="text-blue-600" />
|
||||
<span className="font-medium">{t('menu.Settlements', { defaultValue: 'Liquidaciones' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_APPOINTMENTS') && <Link href={'/appointments/appointments-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Appointments
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{appointments}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCalendarClock' in icon ? icon['mdiCalendarClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
{hasPermission(currentUser, 'READ_EXPENSES') && (
|
||||
<Link href="/expenses/expenses-list">
|
||||
<div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
|
||||
<BaseIcon path={icon.mdiReceipt} size="24" className="text-red-600" />
|
||||
<span className="font-medium">{t('menu.Expenses', { defaultValue: 'Gastos' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PAYMENTS') && <Link href={'/payments/payments-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Payments
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{payments}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCashRegister' in icon ? icon['mdiCashRegister' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
{hasPermission(currentUser, 'READ_EVENT_LOGS') && (
|
||||
<Link href="/event_logs/event_logs-list">
|
||||
<div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
|
||||
<BaseIcon path={icon.mdiClipboardTextClock} size="24" className="text-gray-600" />
|
||||
<span className="font-medium">{t('menu.Event logs', { defaultValue: 'Registro de Eventos' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_SETTLEMENTS') && <Link href={'/settlements/settlements-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Settlements
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{settlements}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiFileDocumentMultiple' in icon ? icon['mdiFileDocumentMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
{hasPermission(currentUser, 'READ_APP_SETTINGS') && (
|
||||
<Link href="/app_settings/app_settings-list">
|
||||
<div className={`${corners} ${cardsStyle} p-4 flex items-center space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-800 transition-colors`}>
|
||||
<BaseIcon path={icon.mdiCog} size="24" className="text-indigo-600" />
|
||||
<span className="font-medium">{t('menu.App settings', { defaultValue: 'Configuración' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_EXPENSES') && <Link href={'/expenses/expenses-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Expenses
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{expenses}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiReceipt' in icon ? icon['mdiReceipt' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_EXTRA_INCOMES') && <Link href={'/extra_incomes/extra_incomes-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Extra incomes
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{extra_incomes}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCashPlus' in icon ? icon['mdiCashPlus' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_MESSAGES') && <Link href={'/messages/messages-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Messages
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{messages}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiMessageText' in icon ? icon['mdiMessageText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PDF_TEMPLATES') && <Link href={'/pdf_templates/pdf_templates-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Pdf templates
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{pdf_templates}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiFilePdfBox' in icon ? icon['mdiFilePdfBox' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_PDF_DOCUMENTS') && <Link href={'/pdf_documents/pdf_documents-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Pdf documents
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{pdf_documents}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiFilePdfBox' in icon ? icon['mdiFilePdfBox' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_EVENT_LOGS') && <Link href={'/event_logs/event_logs-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
Event logs
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{event_logs}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiClipboardTextClock' in icon ? icon['mdiClipboardTextClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
{hasPermission(currentUser, 'READ_APP_SETTINGS') && <Link href={'/app_settings/app_settings-list'}>
|
||||
<div
|
||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||
>
|
||||
<div className="flex justify-between align-center">
|
||||
<div>
|
||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||
App settings
|
||||
</div>
|
||||
<div className="text-3xl leading-tight font-semibold">
|
||||
{app_settings}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
className={`${iconsColor}`}
|
||||
w="w-16"
|
||||
h="h-16"
|
||||
size={48}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
path={'mdiCog' in icon ? icon['mdiCog' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>}
|
||||
|
||||
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</SectionMain>
|
||||
</>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import BaseIcon from "../components/BaseIcon";
|
||||
import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
|
||||
import { mdiInformation, mdiEye, mdiEyeOff, mdiGoogle } from '@mdi/js';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
@ -21,8 +19,11 @@ import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
import Link from 'next/link';
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import LanguageSwitcher from '../components/LanguageSwitcher';
|
||||
|
||||
export default function Login() {
|
||||
const { t } = useTranslation('common');
|
||||
const router = useRouter();
|
||||
const dispatch = useAppDispatch();
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
@ -40,7 +41,7 @@ export default function Login() {
|
||||
const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
|
||||
(state) => state.auth,
|
||||
);
|
||||
const [initialValues, setInitialValues] = React.useState({ email:'admin@flatlogic.com',
|
||||
const [initialValues, setInitialValues] = React.useState({ email:'matiasarcuri11@gmail.com',
|
||||
password: '94e48f87',
|
||||
remember: true })
|
||||
|
||||
@ -100,6 +101,10 @@ export default function Login() {
|
||||
}));
|
||||
};
|
||||
|
||||
const handleGoogleLogin = () => {
|
||||
window.location.href = `${process.env.NEXT_PUBLIC_BACK_API}/auth/signin/google`;
|
||||
};
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
|
||||
style={{
|
||||
@ -109,8 +114,9 @@ export default function Login() {
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}>
|
||||
<div className="flex justify-center w-full bg-blue-300/20">
|
||||
<a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
|
||||
by {image?.photographer} on Pexels</a>
|
||||
<a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">
|
||||
{t('pages.login.pexels.photoCredit', { photographer: image?.photographer })}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -126,7 +132,7 @@ export default function Login() {
|
||||
muted
|
||||
>
|
||||
<source src={video.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
{t('pages.login.pexels.videoUnsupported')}
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
@ -135,7 +141,7 @@ export default function Login() {
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
{t('pages.login.pexels.videoCredit', { name: video.user.name })}
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
@ -154,10 +160,13 @@ export default function Login() {
|
||||
backgroundRepeat: 'no-repeat',
|
||||
} : {}}>
|
||||
<Head>
|
||||
<title>{getPageTitle('Login')}</title>
|
||||
<title>{getPageTitle(t('pages.login.pageTitle'))}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div className="absolute top-4 right-4 z-50">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
<div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
|
||||
{contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
|
||||
{contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
|
||||
@ -170,18 +179,18 @@ export default function Login() {
|
||||
<div className='flex flex-row text-gray-500 justify-between'>
|
||||
<div>
|
||||
|
||||
<p className='mb-2'>Use{' '}
|
||||
<p className='mb-2'>{t('pages.login.sampleCredentialsAdmin', { email: '', password: '' }).split('/')[0]}
|
||||
<code className={`cursor-pointer ${textColor} `}
|
||||
data-password="94e48f87"
|
||||
onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
|
||||
onClick={(e) => setLogin(e.target)}>matiasarcuri11@gmail.com</code>{' / '}
|
||||
<code className={`${textColor}`}>94e48f87</code>{' / '}
|
||||
to login as Admin</p>
|
||||
<p>Use <code
|
||||
{t('pages.login.sampleCredentialsAdmin', { email: '', password: '' }).split('/')[1]}</p>
|
||||
<p>{t('pages.login.sampleCredentialsUser', { email: '', password: '' }).split('/')[0]}<code
|
||||
className={`cursor-pointer ${textColor} `}
|
||||
data-password="d52135bedc81"
|
||||
onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
|
||||
<code className={`${textColor}`}>d52135bedc81</code>{' / '}
|
||||
to login as User</p>
|
||||
{t('pages.login.sampleCredentialsUser', { email: '', password: '' }).split('/')[1]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<BaseIcon
|
||||
@ -203,15 +212,15 @@ export default function Login() {
|
||||
>
|
||||
<Form>
|
||||
<FormField
|
||||
label='Login'
|
||||
help='Please enter your login'>
|
||||
label={t('pages.login.form.loginLabel')}
|
||||
help={t('pages.login.form.loginHelp')}>
|
||||
<Field name='email' />
|
||||
</FormField>
|
||||
|
||||
<div className='relative'>
|
||||
<FormField
|
||||
label='Password'
|
||||
help='Please enter your password'>
|
||||
label={t('pages.login.form.passwordLabel')}
|
||||
help={t('pages.login.form.passwordHelp')}>
|
||||
<Field name='password' type={showPassword ? 'text' : 'password'} />
|
||||
</FormField>
|
||||
<div
|
||||
@ -227,12 +236,12 @@ export default function Login() {
|
||||
</div>
|
||||
|
||||
<div className={'flex justify-between'}>
|
||||
<FormCheckRadio type='checkbox' label='Remember'>
|
||||
<FormCheckRadio type='checkbox' label={t('pages.login.form.remember')}>
|
||||
<Field type='checkbox' name='remember' />
|
||||
</FormCheckRadio>
|
||||
|
||||
<Link className={`${textColor} text-blue-600`} href={'/forgot'}>
|
||||
Forgot password?
|
||||
{t('pages.login.form.forgotPassword')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -242,16 +251,29 @@ export default function Login() {
|
||||
<BaseButton
|
||||
className={'w-full'}
|
||||
type='submit'
|
||||
label={isFetching ? 'Loading...' : 'Login'}
|
||||
label={isFetching ? t('pages.login.form.loading') : t('pages.login.form.loginButton')}
|
||||
color='info'
|
||||
disabled={isFetching}
|
||||
/>
|
||||
</BaseButtons>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
className={'w-full'}
|
||||
label={t('pages.login.form.loginWithGoogle', { defaultValue: 'Ingresar con Google' })}
|
||||
color="white"
|
||||
icon={mdiGoogle}
|
||||
onClick={handleGoogleLogin}
|
||||
/>
|
||||
</BaseButtons>
|
||||
|
||||
<br />
|
||||
<p className={'text-center'}>
|
||||
Don’t have an account yet?{' '}
|
||||
{t('pages.login.form.noAccountYet')}{' '}
|
||||
<Link className={`${textColor}`} href={'/register'}>
|
||||
New Account
|
||||
{t('pages.login.form.newAccount')}
|
||||
</Link>
|
||||
</p>
|
||||
</Form>
|
||||
@ -261,9 +283,9 @@ export default function Login() {
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
|
||||
<p className='py-6 text-sm'>{t('pages.login.footer.copyright', { year: 2026, title: title })}</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
{t('pages.login.footer.privacy')}
|
||||
</Link>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
|
||||
@ -12,6 +12,7 @@ import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import { useRouter } from 'next/router';
|
||||
import { getPageTitle } from '../config';
|
||||
import { mdiGoogle } from '@mdi/js';
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
@ -36,10 +37,14 @@ export default function Register() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleLogin = () => {
|
||||
window.location.href = `${process.env.NEXT_PUBLIC_BACK_API}/auth/signin/google`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Login')}</title>
|
||||
<title>{getPageTitle('Register')}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
@ -78,6 +83,18 @@ export default function Register() {
|
||||
color='info'
|
||||
/>
|
||||
</BaseButtons>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
className={'w-full'}
|
||||
label="Registrarse con Google"
|
||||
color="white"
|
||||
icon={mdiGoogle}
|
||||
onClick={handleGoogleLogin}
|
||||
/>
|
||||
</BaseButtons>
|
||||
</Form>
|
||||
</Formik>
|
||||
</CardBox>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user