Panel de Administración

Este documento describe la arquitectura y el desarrollo del Panel de Administración.

Propósito

El Panel de Administración es la interfaz principal para el personal del banco:

• Gestión de clientes
• Administración de créditos
• Operaciones de depósito y retiro
• Aprobaciones y gobernanza
• Informes financieros

Arquitectura

Estructura del Proyecto

apps/admin-panel/
├── src/
│   ├── main.tsx             # Punto de entrada de la aplicación
│   ├── runtime-config.ts    # Cargador de configuración en runtime
│   ├── routes/              # Rutas basadas en archivos (TanStack Router)
│   ├── auth/                # Integración con Keycloak
│   ├── shell/               # Shell / layout de la aplicación
│   └── generated/           # Tipos GraphQL generados
├── components/              # Componentes React
├── hooks/                   # Hooks personalizados
└── lib/                     # Utilidades y configuración de Apollo

Autenticación

Configuración de Keycloak

import Keycloak from 'keycloak-js';
import { getRuntimeConfig } from '@/src/runtime-config';

const config = getRuntimeConfig();

export const keycloak = new Keycloak({
  url: config.keycloakUrl,
  realm: config.keycloakRealm,
  clientId: config.keycloakClientId,
});

Protección de Rutas

export function ProtectedRoute({ children, requiredRole }) {
  const { isAuthenticated, hasRole } = useAuth();

  if (!isAuthenticated) {
    return <LoginRedirect />;
  }

  if (requiredRole && !hasRole(requiredRole)) {
    return <AccessDenied />;
  }

  return children;
}

Desarrollo

Comandos

# Development

pnpm dev

# Production build

pnpm build

# Lint

pnpm lint

# Generate GraphQL types

pnpm codegen

Configuración en Runtime

La configuración se inyecta en runtime mediante window.__APP_CONFIG__ (poblada desde una plantilla index.html en el momento del deploy) en lugar de usar variables de entorno en build. El dev local recurre a los valores por defecto de src/runtime-config.ts:

// src/runtime-config.ts (extracto)
const devDefaults: RuntimeConfig = {
  keycloakUrl: "http://localhost:8081",
  keycloakRealm: "internal",
  keycloakClientId: "admin-panel",
  keycloakDefaultLoginHint: "admin@galoy.io",
  coreAdminGqlUrl: "/graphql",
  coreAdminSseUrl: "/graphql/stream",
};