Dashboard & Analytics - Solarecliente

Overview

The Solarecliente dashboard provides a comprehensive view of your client portfolio with real-time metrics, visual analytics, and actionable insights. Monitor key performance indicators, track trends, and make data-driven decisions to optimize your client relationships.

Key Metrics

Track essential KPIs and performance indicators

Custom Widgets

Personalize your dashboard with configurable widgets

Real-time Updates

Get instant updates on critical activities and changes

Export Reports

Generate and export detailed reports for stakeholders

Key Metrics

The dashboard displays critical metrics at a glance, helping you understand the health of your client portfolio.

Primary KPIs

Client Metrics
Revenue Metrics
Activity Metrics

interface ClientMetrics {
  totalClients: number;           // Total active clients
  newClients: number;             // New clients this month
  churnRate: number;              // Percentage of lost clients
  activeClients: number;          // Clients with recent activity
  prospectiveClients: number;     // Potential clients in pipeline
}

const example: ClientMetrics = {
  totalClients: 247,
  newClients: 12,
  churnRate: 2.3,
  activeClients: 231,
  prospectiveClients: 45
};

interface RevenueMetrics {
  totalRevenue: number;           // Total revenue
  monthlyRecurring: number;       // MRR
  averageContractValue: number;   // ACV
  revenueGrowth: number;          // Growth percentage
  projectedRevenue: number;       // Forecast
}

const example: RevenueMetrics = {
  totalRevenue: 1250000,
  monthlyRecurring: 95000,
  averageContractValue: 5060,
  revenueGrowth: 15.7,
  projectedRevenue: 1450000
};

interface ActivityMetrics {
  totalInteractions: number;      // All client touchpoints
  emailsSent: number;             // Outbound emails
  meetingsHeld: number;           // Client meetings
  documentsShared: number;        // Files shared
  averageResponseTime: number;    // Hours
}

const example: ActivityMetrics = {
  totalInteractions: 1247,
  emailsSent: 856,
  meetingsHeld: 123,
  documentsShared: 268,
  averageResponseTime: 4.2
};

Metric Cards

The dashboard displays metrics in easy-to-read card format:

Total Clients

247 Active Clients_{↑ 12 this month (+5.1%)}

Revenue

$1.25M Total Revenue_{↑ $180K this quarter (+15.7%)}

Engagement

94% Active Rate_{↑ 2.3% from last month}

Response Time

4.2 hrs Average_{↓ 0.8 hrs from last month}

New Prospects

45 In Pipeline_{↑ 8 this week}

Renewals Due

23 This Quarter_{$470K total value}

Custom Widgets

Personalize your dashboard by adding, removing, and arranging widgets to match your workflow.

Available Widgets

Client Overview

Displays client count, status distribution, and recent additions.

{
  type: 'clientOverview',
  config: {
    showTrends: true,
    timeRange: '30d',
    groupBy: 'status'
  }
}

Activity Feed

Real-time stream of recent client activities and interactions.

{
  type: 'activityFeed',
  config: {
    maxItems: 10,
    filters: ['email', 'meeting', 'note'],
    autoRefresh: true
  }
}

Revenue Chart

Visual representation of revenue trends over time.

{
  type: 'revenueChart',
  config: {
    chartType: 'line',
    timeRange: '12m',
    showProjection: true
  }
}

Task List

Upcoming tasks, follow-ups, and action items.

{
  type: 'taskList',
  config: {
    showOverdue: true,
    maxItems: 15,
    sortBy: 'dueDate'
  }
}

Add Widget
Customize Layout
Save Preset

const addWidget = async (config: WidgetConfig) => {
  const widget = {
    id: generateId(),
    type: config.type,
    position: { x: 0, y: 0, w: 4, h: 3 },
    settings: config.settings,
    visible: true
  };
  
  await dashboard.addWidget(widget);
};

const updateLayout = (layout: WidgetLayout[]) => {
  dashboard.setLayout(layout.map(widget => ({
    id: widget.id,
    x: widget.x,
    y: widget.y,
    width: widget.w,
    height: widget.h
  })));
};

const savePreset = async (name: string) => {
  const currentLayout = dashboard.getLayout();
  const preset = {
    name,
    widgets: currentLayout,
    createdAt: new Date().toISOString()
  };
  
  await dashboard.savePreset(preset);
};

Pro Tip: Create multiple dashboard presets for different use cases, such as “Executive Overview”, “Daily Operations”, or “Sales Focus”.

Real-time Updates

The dashboard automatically refreshes to display the latest information without manual page reloads.

Update Frequency

interface UpdateSettings {
  metrics: {
    interval: 60,        // Seconds
    enabled: true
  },
  activities: {
    interval: 30,        // Seconds
    enabled: true,
    showNotifications: true
  },
  charts: {
    interval: 300,       // Seconds
    enabled: true
  }
}

Live Activity Notifications

New Client

Instant notification when a new client is added to the system

Status Change

Alert when a client status changes (e.g., Prospective to Active)

High-Value Activity

Notification for significant events like large contracts or escalations

Task Due

Reminder for upcoming or overdue tasks and follow-ups

WebSocket Connection

// Real-time dashboard updates via WebSocket
const connectDashboard = () => {
  const ws = new WebSocket('wss://api.solarecliente.com/dashboard');
  
  ws.onmessage = (event) => {
    const update = JSON.parse(event.data);
    
    switch (update.type) {
      case 'metric_update':
        updateMetricCard(update.metric, update.value);
        break;
      case 'new_activity':
        prependActivityToFeed(update.activity);
        break;
      case 'alert':
        showNotification(update.message, update.priority);
        break;
    }
  };
};

Real-time updates require an active internet connection. If disconnected, the dashboard will display cached data and reconnect automatically.

Time Range Selection

Analyze data across different time periods to identify trends and patterns.

Available Time Ranges

Quick Select
Custom Range
Date Comparison

const quickRanges = [
  { label: 'Today', value: '1d' },
  { label: 'This Week', value: '7d' },
  { label: 'This Month', value: '30d' },
  { label: 'This Quarter', value: '90d' },
  { label: 'This Year', value: '365d' },
  { label: 'All Time', value: 'all' }
];

const customRange = {
  startDate: '2024-01-01',
  endDate: '2024-03-31',
  comparison: {
    enabled: true,
    period: 'previous'  // Compare to previous period
  }
};

const comparison = {
  current: {
    start: '2024-01-01',
    end: '2024-03-31'
  },
  previous: {
    start: '2023-10-01',
    end: '2023-12-31'
  },
  showDelta: true,
  showPercentChange: true
};

Reporting

Generate comprehensive reports for stakeholders, executives, and analysis purposes.

Report Types

Executive Summary

High-level overview of key metrics and business performance

Client Activity

Detailed breakdown of all client interactions and touchpoints

Revenue Analysis

Financial performance, revenue trends, and forecasting

Team Performance

Individual and team productivity and engagement metrics

Custom Report

Build custom reports with selected metrics and filters

Scheduled Reports

Automatically generated and delivered reports on a schedule

Generate Report

Select Report Type

Choose from predefined templates or create a custom report.

Configure Parameters

Set date range, filters, and specific metrics to include.

const reportConfig = {
  type: 'executive-summary',
  dateRange: { start: '2024-01-01', end: '2024-03-31' },
  metrics: ['revenue', 'clients', 'engagement'],
  groupBy: 'month',
  includeCharts: true
};

Customize Presentation

Choose chart types, table formats, and visual styling.

Export or Schedule

Download immediately or schedule for automated delivery.

Export Formats

const exportReport = async (reportId: string, format: string) => {
  const formats = {
    pdf: 'application/pdf',
    excel: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    csv: 'text/csv',
    json: 'application/json'
  };
  
  const report = await generateReport(reportId);
  return await report.export(format);
};

Scheduled reports can be delivered via email to multiple recipients automatically on daily, weekly, or monthly schedules.

Filters and Segmentation

Apply filters to focus on specific segments of your client portfolio.

Available Filters

Client Status
Revenue Range
Industry
Geography

const statusFilter = {
  field: 'status',
  operator: 'in',
  values: ['Active', 'Prospective']
};

const revenueFilter = {
  field: 'contractValue',
  operator: 'between',
  values: [50000, 200000]
};

const industryFilter = {
  field: 'industry',
  operator: 'in',
  values: ['Technology', 'Finance', 'Healthcare']
};

const geoFilter = {
  field: 'location.country',
  operator: 'in',
  values: ['United States', 'Canada', 'Mexico']
};

Saved Filter Sets

Create and save commonly used filter combinations:

const savedFilters = [
  {
    name: 'Enterprise Clients',
    filters: [
      { field: 'contractValue', operator: 'gte', value: 100000 },
      { field: 'status', operator: 'eq', value: 'Active' }
    ]
  },
  {
    name: 'At-Risk Accounts',
    filters: [
      { field: 'lastActivity', operator: 'olderThan', value: '90d' },
      { field: 'engagementScore', operator: 'lt', value: 50 }
    ]
  }
];

Performance Indicators

Track key performance indicators (KPIs) to measure success and identify areas for improvement.

Client Health Score

interface HealthScore {
  score: number;              // 0-100
  factors: {
    engagement: number;       // Recent activity level
    satisfaction: number;     // Survey scores
    revenue: number;          // Payment history
    longevity: number;        // Relationship duration
  };
  trend: 'improving' | 'stable' | 'declining';
  risk: 'low' | 'medium' | 'high';
}

const example: HealthScore = {
  score: 87,
  factors: {
    engagement: 92,
    satisfaction: 85,
    revenue: 95,
    longevity: 78
  },
  trend: 'improving',
  risk: 'low'
};

Healthy

Score: 80-100Strong engagement, on-time payments, positive feedback

At Risk

Score: 50-79Declining activity, payment delays, or negative signals

Critical

Score: 0-49Minimal engagement, overdue payments, escalations

Quick Actions

Access frequently used functions directly from the dashboard for improved efficiency.

Add New Client

Quickly create a new client profile without navigating away

Log Activity

Record a note, call, or meeting in seconds

Send Email

Compose and send emails to clients directly

Schedule Meeting

Set up meetings with automatic calendar integration

Upload Document

Add files to client records instantly

Generate Report

Create ad-hoc reports for immediate analysis

Quick actions are context-aware and will adapt based on your recent activity and frequently used features.

Mobile Dashboard

Access key metrics and perform essential tasks from mobile devices.

Mobile-Optimized Features

const mobileFeatures = {
  metrics: {
    layout: 'vertical-stack',
    widgets: ['clients', 'revenue', 'activities'],
    gestures: ['swipe-refresh', 'tap-to-expand']
  },
  quickActions: [
    'add-note',
    'log-call',
    'view-client',
    'send-email'
  ],
  offline: {
    cacheMetrics: true,
    syncOnReconnect: true
  }
};

The mobile dashboard automatically adapts to your screen size and provides touch-optimized controls for easy navigation.

Get Started

Core Features

Components

Guides

​Overview

Key Metrics

Custom Widgets

Real-time Updates

Export Reports

​Key Metrics

​Primary KPIs

​Metric Cards

Total Clients

Revenue

Engagement

Response Time

New Prospects

Renewals Due

​Custom Widgets

​Available Widgets

​Widget Configuration

​Real-time Updates

​Update Frequency

​Live Activity Notifications

New Client

Status Change

High-Value Activity

Task Due

​WebSocket Connection

​Time Range Selection

​Available Time Ranges

​Reporting

​Report Types

Executive Summary

Client Activity

Revenue Analysis

Team Performance

Custom Report

Scheduled Reports

​Generate Report

​Export Formats

​Filters and Segmentation

​Available Filters

​Saved Filter Sets

​Performance Indicators

​Client Health Score

Healthy

At Risk

Critical

​Quick Actions

Add New Client

Log Activity

Send Email

Schedule Meeting

Upload Document

Generate Report

​Mobile Dashboard

​Mobile-Optimized Features

Build docs developers (and LLMs) love

Overview

Key Metrics

Primary KPIs

Metric Cards

Custom Widgets

Available Widgets

Widget Configuration

Real-time Updates

Update Frequency

Live Activity Notifications

WebSocket Connection

Time Range Selection

Available Time Ranges

Reporting

Report Types

Generate Report

Export Formats

Filters and Segmentation

Available Filters

Saved Filter Sets

Performance Indicators

Client Health Score

Quick Actions

Mobile Dashboard

Mobile-Optimized Features