admin/38300-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-02-09T01:14:15.589Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-09 01:14:15 +00:00
parent 658e1341a9
commit 043ebe8507
14 changed files with 327 additions and 567 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
backend/src/auth/auth.js
View File

@ -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);
}
}

16
backend/src/config.js
View File

@ -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',

4
backend/src/db/seeders/20200430130760-user-roles.js
View File

@ -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", [
}
};

5
backend/src/index.js
View File

@ -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 }),

42
backend/src/routes/auth.js
View File

@ -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
View 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;

6
backend/src/services/auth.js
View File

@ -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;
}

3
frontend/src/components/NavBarItem.tsx
View File

@ -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'

32
frontend/src/components/RestrictedAccess.tsx Normal file
View 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

56
frontend/src/layouts/Authenticated.tsx
View File

@ -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,7 @@ import { useRouter } from 'next/router'
import {findMe, logoutUser} from "../stores/authSlice";
import {hasPermission} from "../helpers/userPermissions";
import RestrictedAccess from '../components/RestrictedAccess'
type Props = {
@ -86,7 +86,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 +99,35 @@ 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>
</>
)}
</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>

576
frontend/src/pages/dashboard.tsx
View File

@ -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,87 +11,40 @@ 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 { useAppDispatch, useAppSelector } from '../stores/hooks';
const Dashboard = () => {
const dispatch = useAppDispatch();
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>
@ -102,504 +55,175 @@ const Dashboard = () => {
<SectionMain>
<SectionTitleLineWithButton
icon={icon.mdiChartTimelineVariant}
title='Overview'
title='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">
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">
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">
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">
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">
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='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">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">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">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">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>
</>

25
frontend/src/pages/login.tsx
View File

@ -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';
@ -40,7 +38,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 +98,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={{
@ -173,7 +175,7 @@ export default function Login() {
<p className='mb-2'>Use{' '}
<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
@ -247,6 +249,19 @@ export default function Login() {
disabled={isFetching}
/>
</BaseButtons>
<BaseDivider />
<BaseButtons>
<BaseButton
className={'w-full'}
label="Ingresar con Google"
color="white"
icon={mdiGoogle}
onClick={handleGoogleLogin}
/>
</BaseButtons>
<br />
<p className={'text-center'}>
Don’t have an account yet?{' '}

19
frontend/src/pages/register.tsx
View File

@ -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>