Skip to main content

​
Overview

The GIMA Dashboard provides a comprehensive overview of your organization’s asset management health. Get real-time insights into asset counts, maintenance status, and budget execution through an intuitive interface designed for decision-makers.

Real-time Metrics

Monitor key performance indicators including total assets, maintenance queue, and budget execution

Visual Analytics

Interactive charts showing asset availability trends over time

Trend Tracking

Percentage change indicators help you track month-over-month growth

Responsive Design

Access your dashboard from any device with adaptive layouts

​
Key Metrics

The dashboard displays three critical statistics through the StatCard component:

​
Total Assets

Track the complete inventory of assets under management with month-over-month trend indicators. 
<StatCard 
  title="Total activos" 
  value="12345" 
  trend={12} 
  trendLabel="este mes" 
/>

​
Assets in Maintenance

Monitor how many assets are currently undergoing maintenance procedures. 
<StatCard 
  title="En mantenimiento" 
  value="8" 
/>

​
Budget Execution

Highlighted metric showing current budget utilization with special emphasis. 
<StatCard 
  title="Presupuesto ejecutado" 
  value="100$" 
  highlighted={true} 
/>

​
Asset Availability Chart

The dashboard includes a time-series visualization powered by the ChartPlaceholder component: 
<ChartPlaceholder 
  title="Disponibilidad de activos" 
  period="Últimos 6 meses" 
/>
The chart automatically updates with smooth animations when new data is loaded, providing a professional user experience.

​
Using the Dashboard

1

Access the Dashboard

Navigate to /dashboard - this is your default landing page after login
2

Review Key Metrics

Check the three stat cards at the top to understand current asset status
  • Green trend indicators show positive growth
  • The highlighted blue card draws attention to budget metrics
3

Analyze Trends

Use the availability chart to identify patterns:
  • Select different time periods from the dropdown
  • Hover over bars to see exact values
4

Take Action

Based on insights, navigate to specific modules:
  • High maintenance count → Visit maintenance module
  • Budget concerns → Check reports section

​
Component Architecture

The dashboard is built using modular React components for maintainability:
Located at src/components/layout/DashboardHeader.tsx, this component provides consistent page headers with subtitle support.
<DashboardHeader subtitle="Bienvenido al panel GIMA" />
Reusable metric display component at src/components/dashboard/StatCard.tsx with the following props:
  • title: Metric name
  • value: Current value (string or number)
  • trend: Optional percentage change
  • trendLabel: Optional label for trend context
  • highlighted: Boolean for special emphasis styling
The component uses Tailwind CSS with conditional styling for highlighted states.
Visualization component at src/components/ui/ChartPlaceholder.tsx featuring:
  • Animated bar charts with smooth transitions
  • Dropdown for time period selection
  • Responsive grid layout
  • Weekly data visualization (Mon-Sun)

​
Best Practices

Performance Tip: The dashboard uses client-side rendering with the "use client" directive for interactive components. Ensure your data fetching strategy aligns with Next.js best practices.

Regular Monitoring

Check the dashboard daily to stay informed about asset status and identify issues early

Trend Analysis

Use month-over-month trends to make data-driven decisions about asset acquisitions and maintenance scheduling

Budget Awareness

The highlighted budget card ensures financial metrics are always visible

Mobile Access

The responsive grid layout (md:grid-cols-2 lg:grid-cols-3) ensures usability across devices

​
Customization Options

The dashboard supports various customization approaches:

​
Adjusting Stat Card Layout

Modify the grid columns for different screen sizes: 
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Stat cards */}
</div>

​
Changing Chart Periods

Update the default time period in the ChartPlaceholder: 
<ChartPlaceholder 
  title="Custom Title" 
  period="Últimos 3 meses" 
/>
When customizing components, ensure you maintain the existing prop interfaces to avoid TypeScript errors.
  • Asset Management - Detailed asset inventory management
  • Maintenance - Schedule and track maintenance operations
  • Reports - Generate comprehensive reports from dashboard data

Build docs developers (and LLMs) love

Get started for freeTalk to us