Auto commit: 2026-02-09T01:19:47.913Z

backend/src/auth/auth.js

@@ -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) {
+async function socialStrategy(email, profile, provider, done) {
-  db.users.findOrCreate({where: {email, provider}}).then(([user, created]) => {
+  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);
+  }
 }

backend/src/config.js

@@ -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: 'Public',
-
-  
-  user: 'Asistente de Comunicaciones',
-
   },
 
   project_uuid: '94e48f87-8a4a-4f0d-850e-d52135bedc81',

backend/src/db/seeders/20200430130760-user-roles.js

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

backend/src/index.js

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

backend/src/routes/auth.js

@@ -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}),
+router.get('/signin/google/callback', (req, res, next) => {
-
+  const callbackURL = `${req.protocol}://${req.get('host')}/api/auth/signin/google/callback`;
-  function (req, res) {
+  passport.authenticate("google", {failureRedirect: "/login", session: false, callbackURL})(req, res, next);
-    socialRedirect(res, req.query.state, req.user.token, config);
+}, 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
+    session: false,
-  }),
+    callbackURL
-  function (req, res) {
+  })(req, res, next);
-    socialRedirect(res, req.query.state, req.user.token, config);
+}, function (req, res) {
-  }
+  socialRedirect(req, res, req.query.state, req.user.token, config);
-);
+});
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-function socialRedirect(res, state, token, config) {
+function socialRedirect(req, res, state, token, config) {
-  res.redirect(config.uiUrl + "/login?token=" + token);
+  const host = `${req.protocol}://${req.get('host')}`;
+  res.redirect(host + "/login?token=" + token);
 }
 
 module.exports = router;

backend/src/routes/dashboard.js

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

backend/src/services/auth.js

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

frontend/public/locales/es/common.json

@@ -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",
+      "sampleCredentialsAdmin": "Use / para iniciar sesión como Administrador",
-      "sampleCredentialsUser":  "Use {{email}} / {{password}} para iniciar sesión como Usuario",
+      "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",

frontend/src/components/AsideMenuItem.tsx

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

frontend/src/components/LanguageSwitcher.tsx

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

frontend/src/components/NavBarItem.tsx

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

frontend/src/components/RestrictedAccess.tsx

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

frontend/src/i18n.ts

@@ -8,7 +8,8 @@ i18n
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
-        fallbackLng: 'en',
+        fallbackLng: 'es',
+        lng: 'es',
         detection: {
             order: ['localStorage', 'navigator'],
             lookupLocalStorage: 'app_lang_',

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
-import { 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,6 +100,8 @@ export default function LayoutAuthenticated({
           menu={menuNavBar}
           className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
         >
+          {currentUser?.app_role?.name !== 'Public' && (
+            <>
               <NavBarItemPlain
                 display="flex lg:hidden"
                 onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
@@ -114,14 +117,21 @@ export default function LayoutAuthenticated({
               <NavBarItemPlain useMargin>
                 <Search />
               </NavBarItemPlain>
+              <div className="flex items-center ml-2">
+                <LanguageSwitcher />
+              </div>
+            </>
+          )}
         </NavBar>
+        {currentUser?.app_role?.name !== 'Public' && (
           <AsideMenu
             isAsideMobileExpanded={isAsideMobileExpanded}
             isAsideLgActive={isAsideLgActive}
             menu={menuAside}
             onAsideLgClose={() => setIsAsideLgActive(false)}
           />
-        {children}
+        )}
+        {currentUser?.app_role?.name === 'Public' ? <RestrictedAccess /> : children}
         <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
       </div>
     </div>

frontend/src/pages/dashboard.tsx

@@ -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 { useAppSelector } from '../stores/hooks';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
+import { useTranslation } from 'react-i18next';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
 
-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 [metrics, setMetrics] = useState({
-
+        pendingPaymentsCount: 0,
-    
+        todayAppointmentsCount: 0,
-    const [users, setUsers] = React.useState(loadingMessage);
+        activeCentersCount: 0,
-    const [roles, setRoles] = React.useState(loadingMessage);
+        totalPatientsCount: 0,
-    const [permissions, setPermissions] = React.useState(loadingMessage);
+        totalAppointmentsCount: 0
-    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 [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 loadMetrics() {
-    
+        try {
-    
+            const response = await axios.get('/dashboard/metrics');
-    async function loadData() {
+            setMetrics(response.data);
-        const entities = ['users','roles','permissions','medical_centers','services','patients','appointments','payments','settlements','expenses','extra_incomes','messages','pdf_templates','pdf_documents','event_logs','app_settings',];
+        } catch (error) {
-        const fns = [setUsers,setRoles,setPermissions,setMedical_centers,setServices,setPatients,setAppointments,setPayments,setSettlements,setExpenses,setExtra_incomes,setMessages,setPdf_templates,setPdf_documents,setEvent_logs,setApp_settings,];
+            console.error('Error loading metrics:', error);
-
+        } finally {
-        const requests = entities.map((entity, index) => {
+            setLoading(false);
-          
+        }
-          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
-            return axios.get(`/${entity.toLowerCase()}/count`);
-          } else {
-            fns[index](null);
-            return Promise.resolve({data: {count: null}});
     }
 
-        });
+    useEffect(() => {
-
-        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 getWidgets(roleId) {
-        await dispatch(fetchWidgets(roleId));
-    }
-    React.useEffect(() => {
         if (!currentUser) return;
-        loadData().then();
+        loadMetrics();
-        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
     }, [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'>
         
-          
+            <Link href={'/payments/payments-list'}>
-            {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 border-l-8 border-yellow-500`}>
-                <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">
-                              Users
+                              {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
+                                path={icon.mdiCashClock}
-                                // @ts-ignore
-                                path={icon.mdiAccountGroup || icon.mdiTable}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
+            </Link>
 
-            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
+            <Link href={'/appointments/appointments-list'}>
-                <div
+                <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`}>
-                    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">
-                              Roles
+                              {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
+                                path={icon.mdiCalendarToday}
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
+            </Link>
 
-            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
+            <Link href={'/medical_centers/medical_centers-list'}>
-                <div
+                <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`}>
-                    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">
-                              Permissions
+                              {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
+                                path={icon.mdiHospitalBuilding}
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountOutline || icon.mdiTable}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
+            </Link>
 
-            {hasPermission(currentUser, 'READ_MEDICAL_CENTERS') && <Link href={'/medical_centers/medical_centers-list'}>
+            <Link href={'/patients/patients-list'}>
-                <div
+                <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`}>
-                    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">
-                              Medical centers
+                              {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
+                                path={icon.mdiAccountGroup}
-                                // @ts-ignore
-                                path={'mdiHospitalBuilding' in icon ? icon['mdiHospitalBuilding' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
                             />
                         </div>
                     </div>
                 </div>
-            </Link>}
+            </Link>
 
-            {hasPermission(currentUser, 'READ_SERVICES') && <Link href={'/services/services-list'}>
+            <Link href={'/appointments/appointments-list'}>
-                <div
+                <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`}>
-                    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">
-                              Services
+                              {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
+                                path={icon.mdiCalendarClock}
-                                // @ts-ignore
-                                path={'mdiStethoscope' in icon ? icon['mdiStethoscope' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
                             />
                         </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>
-                </div>
-            </Link>}
 
-            {hasPermission(currentUser, 'READ_APPOINTMENTS') && <Link href={'/appointments/appointments-list'}>
+        <SectionTitleLineWithButton
-                <div
+            icon={icon.mdiSettingsHelper}
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+            title={t('pages.dashboard.quickAccess', { defaultValue: 'Acceso Rápido' })}
-                >
+            main={false}>
-                    <div className="flex justify-between align-center">
+          {''}
-                        <div>
+        </SectionTitleLineWithButton>
-                            <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>
-                    </div>
-                </div>
-            </Link>}
 
-            {hasPermission(currentUser, 'READ_PAYMENTS') && <Link href={'/payments/payments-list'}>
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6">
-                <div
+            {hasPermission(currentUser, 'READ_SETTLEMENTS') && (
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+                <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`}>
-                    <div className="flex justify-between align-center">
+                        <BaseIcon path={icon.mdiFileDocumentMultiple} size="24" className="text-blue-600" />
-                        <div>
+                        <span className="font-medium">{t('menu.Settlements', { defaultValue: 'Liquidaciones' })}</span>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Payments
                     </div>
-                            <div className="text-3xl leading-tight font-semibold">
+                </Link>
-                                {payments}
+            )}
+            {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>
+                </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>
-                            <BaseIcon
+            )}
-                                className={`${iconsColor}`}
+            {hasPermission(currentUser, 'READ_APP_SETTINGS') && (
-                                w="w-16"
+                <Link href="/app_settings/app_settings-list">
-                                h="h-16"
+                    <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`}>
-                                size={48}
+                        <BaseIcon path={icon.mdiCog} size="24" className="text-indigo-600" />
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        <span className="font-medium">{t('menu.App settings', { defaultValue: 'Configuración' })}</span>
-                                // @ts-ignore
-                                path={'mdiCashRegister' in icon ? icon['mdiCashRegister' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
                     </div>
-                    </div>
+                </Link>
-                </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>
-                    </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>}
-          
-          
         </div>
       </SectionMain>
     </>

frontend/src/pages/login.tsx

@@ -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
+              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">
-                  by {image?.photographer} on Pexels</a>
+                  {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>
+                                {t('pages.login.sampleCredentialsAdmin', { email: '', password: '' }).split('/')[1]}</p>
-                            <p>Use <code
+                            <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'
+                                label={t('pages.login.form.loginLabel')}
-                                 help='Please enter your login'>
+                                 help={t('pages.login.form.loginHelp')}>
                                 <Field name='email' />
                             </FormField>
 
                             <div className='relative'>
                                 <FormField
-                                    label='Password'
+                                    label={t('pages.login.form.passwordLabel')}
-                                     help='Please enter your password'>
+                                     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 />

frontend/src/pages/register.tsx

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