Panel Empleado

Rol: Empleados del negocio Ruta: /employee Acceso: Asignado por el propietario

Solo ves los módulos que tu jefe te ha asignado. Además tienes Mi Portal personal para fichaje, nóminas y más.

---

Módulos asignados

Aparecen únicamente si el propietario te ha dado permisos (Lectura o Edición).

Módulo	Permisos posibles	Descripción
Facturas	Lectura / Edición	Ver y crear facturas del negocio
Gastos	Lectura / Edición	Registrar gastos del negocio
Clientes	Lectura / Edición	Gestionar clientes
Productos	Lectura / Edición	Catálogo de productos
Presupuestos	Lectura / Edición	Crear presupuestos
Proyectos	Lectura / Edición	Gestionar proyectos
Tareas	Lectura / Edición	Gestionar tareas
Informes	Solo Lectura	Ver informes del negocio

---

Mi Portal — Recursos Humanos

Tu espacio personal dentro del sistema. Siempre disponible con permiso my_portal.

Módulo	Ruta	Descripción
Inicio (Fichaje)	/employee/my-portal	Fichar entrada, pausas y salida con cronómetro en vivo
Nóminas	/employee/my-portal/payrolls	Consultar, descargar PDF y ver resumen de fichajes
Contratos	/employee/my-portal/contracts	Ver historial y descargar documentos de contrato
Ausencias	/employee/my-portal/absences	Solicitar vacaciones y ausencias. Ver calendario y saldo
Control Horario	/employee/my-portal/time-control	Revisar registro diario y solicitar correcciones
Horas Extra	/employee/my-portal/overtime	Ver horas pendientes y elegir compensación (pago o descanso)
Documentos	/employee/my-portal/documents	Navegar carpetas: Contratos, Nóminas, Ausencias

---

Siempre visible

Estos módulos están disponibles para todos los empleados independientemente de permisos:

Módulo	Ruta	Descripción
Mi Perfil	/employee/profile	Editar datos personales, contacto y datos fiscales
Mis Tickets	/employee/my-tickets	Crear y ver tickets de soporte

---

Arquitectura técnica

Detalles de implementación

Rutas y guards

// Ruta base: /employee
{
  path: '/employee',
  element: (
    <RoleGuard allowedRoles={['employee']}>
      <EmployeeLayout />
    </RoleGuard>
  )
}

RoleGuard:

• Verifica que el usuario tenga rol employee
• Detecta empleados activos con status = 'active'
• Soporta modo asesor (advisors en modo cliente)

EmployeePermissionRoute:

• Control granular por sección
• Consulta tabla employee_section_permissions
• Cache con React Query (5 min staleTime)
• Actualizaciones en tiempo real vía Supabase Realtime

Lazy loading

Todas las páginas del portal usan lazy loading con Suspense:

const PortalHome = lazy(() => import('./pages/portal/Home'));
const PortalPayrolls = lazy(() => import('./pages/portal/Payrolls'));
// ... resto de módulos

Skeleton de carga:

• RRHHPageSkeleton durante carga
• Previene flash de contenido vacío
• Coherente en todo el portal

Sistema de permisos

interface EmployeePermission {
  employee_id: string;
  section: string; // 'my_portal', 'invoices', 'expenses', etc.
  access_level: 'none' | 'read' | 'edit';
}

Hook principal:

const { canAccess, canEdit, isEmployee, isOwner } = useClientPanelPermissions();

// Verificar acceso
if (canAccess('my_portal')) {
  // Empleado puede acceder a Mi Portal
}

Características:

• Cache con gcTime: 10 min
• Broadcast para actualizaciones instantáneas (~50-200ms)
• Fallback con postgres_changes (~3-8s)
• Previene recargas en navegación

Tablas principales

Tabla	Descripción
employees	Datos del empleado (nombre, email, contrato)
employee_section_permissions	Permisos por sección
time_entries	Fichajes (entrada, salida, pausas)
payrolls	Nóminas del empleado
employee_contracts	Historial de contratos
absence_requests	Solicitudes de ausencias
overtime_compensations	Horas extra pendientes/aprobadas

---

Branding Factux

El portal utiliza la paleta de colores corporativa:

• Verde principal: hsl(68 100% 50%) — Botones de acción primaria
• Verde oscuro (hover): hsl(68 100% 45%) — Estados hover
• Negro Factux: hsl(0 0% 10%) — Texto sobre verde

Ejemplo de uso:

<Button className="bg-[hsl(var(--brand-green))] hover:bg-[hsl(var(--brand-green-dark))] text-[hsl(var(--brand-black))]">
  Fichar entrada
</Button>