Admin Dashboard

Relevant source files

The following files were used as context for generating this wiki page:

• components/AdminDashboard.tsx
• app/(tabs)/directory.tsx
• README.md
• DEMO-READY.md
• VALIDACION-COMPLETA.md
• utils/logger.ts

The Admin Dashboard is a comprehensive, admin-only interface within the ElmecV2 application designed for system supervision, data analysis, and user management. It provides administrators with a high-level overview of key system metrics, including user activity, request statuses, and communication statistics, through a series of statistical cards, charts, and quick action buttons.

This dashboard serves as the central control panel for administrators, enabling them to monitor the application's health and performance efficiently. It is a core feature for the 'Admin' user role, offering advanced analytics and management capabilities not available to regular users.

Sources: README.md, components/AdminDashboard.tsx

Architecture and Access Control

The AdminDashboard is a React component that conditionally renders based on the authenticated user's role. Access is strictly limited to users with the rol property set to 'admin'. If a non-admin user attempts to access this view, an "Access Denied" message is displayed.

Sources: components/AdminDashboard.tsx:203-214

Access Control Flow

The following diagram illustrates the logic for rendering the dashboard content.

Access Denied Component

If the user role is not 'admin', a dedicated view is rendered, showing an AlertTriangle icon and a clear message indicating that the user does not have the necessary permissions.

// components/AdminDashboard.tsx:203-214

  if (user?.rol !== 'admin') {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.accessDenied}>
          <AlertTriangle size={64} color="#ef4444" />
          <Text style={styles.accessDeniedTitle}>Acceso Denegado</Text>
          <Text style={styles.accessDeniedText}>
            No tienes permisos para acceder al panel de administración
          </Text>
        </View>
      </SafeAreaView>
    );
  }

Sources: components/AdminDashboard.tsx:203-214

Data and Statistics

The dashboard presents a collection of key performance indicators (KPIs) to give administrators a quick snapshot of the system's status. The data is defined by the DashboardStats interface. In the current implementation, this data is mocked and loaded with a one-second delay to simulate an API call.

Sources: components/AdminDashboard.tsx:29-45, 68-82

Data Structure

The DashboardStats interface defines the shape of the statistical data displayed on the dashboard.

The table below details each field in the DashboardStats interface, based on the mock data provided in the component.

Field	Mock Value	Description
totalUsers	156	The total number of registered users.
activeUsers	89	The number of users considered active within the selected period.
totalRequests	342	The total number of requests created.
pendingRequests	23	The number of requests currently pending action.
resolvedRequests	298	The number of requests that have been resolved.
totalMessages	1247	The total number of messages exchanged in the chat system.
avgResponseTime	2.4	The average time (in hours) to respond to a request.
satisfactionRate	4.6	The average customer satisfaction rating, on a scale of 5.

Sources: components/AdminDashboard.tsx:29-45, 68-82, DEMO-READY.md

Data Loading Flow

The component simulates fetching data asynchronously. The following diagram shows the sequence of events when the component is loaded.

UI Components

The dashboard is composed of several reusable sub-components that organize and display the statistical data.

Sources: components/AdminDashboard.tsx:216-348

StatCard

A memoized component that displays a single statistic with an icon, title, value, and an optional trend indicator.

Prop	Type	Description
title	string	The title of the metric (e.g., "Total Usuarios").
value	string | number	The value of the metric.
subtitle	string	Optional subtitle for additional context.
icon	React.ReactNode	An icon representing the metric.
color	string	The color used for the icon and its background.
trend	{ value: number; isPositive: boolean }	Optional trend data to show percentage change.

Sources: components/AdminDashboard.tsx:109-158

SimpleChart

A memoized component that renders a simple bar chart. It is used to display the distribution of requests by status ("Resueltas", "En proceso", "Pendientes"). The chart dynamically calculates bar heights based on the maximum value in the dataset.

Sources: components/AdminDashboard.tsx:160-192

MetricsCard

This component displays a list of key derived metrics, such as "Tasa de Resolución" and "Satisfacción Cliente". Each metric is presented with an icon, a label, and its calculated value.

Sources: components/AdminDashboard.tsx:287-326

Quick Actions

A section at the bottom of the dashboard provides buttons for common administrative tasks. These actions allow administrators to navigate directly to other management sections of the application.

Action	Icon	Description
Gestionar Usuarios	Users	Navigates to the user management screen.
Ver Solicitudes	FileText	Navigates to the main requests list.
Reportes	BarChart3	Navigates to a dedicated reports section.

Sources: components/AdminDashboard.tsx:329-348

Logging

While not directly implemented in the AdminDashboard.tsx file, the project includes a robust Logger utility that can be used to track user actions, performance, and API calls within the dashboard. For example, timers can be used to measure data loading performance, and user actions can be logged for analytics.

// utils/logger.ts:218-224

  // Performance logging
  static startTimer(name: string): () => void {
    const startTime = Date.now();
    return () => {
      const duration = Date.now() - startTime;
      this.info(`Timer: ${name} completed in ${duration}ms`, 'performance', { duration, name });
    };
  }

Sources: utils/logger.ts:218-224

Summary

The Admin Dashboard is a critical feature for the ElmecV2 application, providing a centralized and intuitive interface for administrators. It effectively uses data visualization to present key system metrics and offers quick access to management functionalities. Its role-based access control ensures that sensitive data and administrative functions are protected. The component-based architecture makes it maintainable and easy to extend with new metrics or actions in the future.

Sources: README.md, components/AdminDashboard.tsx, VALIDACION-COMPLETA.md