Dashboard Module Documentation

Module Overview (Technical)
Module Overview (Commercial/Business)
Module Overview (End User/Administrator)
Widget Types
Layout Management
Common Scenarios & Examples
Limitations & Important Notes
Troubleshooting Tips
Glossary

---

1. Module Overview (Technical)

What Is the Dashboard?

The Dashboard is a customizable widget-based interface that provides real-time monitoring and quick access to system information. Administrators can arrange widgets in a grid layout to create personalized views.

Architecture

Plaintext

┌─────────────────────────────────────────────────────────────────┐
│                    Dashboard System                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                  DashboardPage.tsx                       │   │
│  │                                                          │   │
│  │  ┌─────────────────┐  ┌─────────────────┐               │   │
│  │  │ Services Status │  │  System Stats   │               │   │
│  │  │   Widget        │  │    Widget       │               │   │
│  │  └─────────────────┘  └─────────────────┘               │   │
│  │                                                          │   │
│  │  ┌─────────────────┐  ┌─────────────────┐               │   │
│  │  │ Telephony Stats │  │  Quick Actions  │               │   │
│  │  │   Widget        │  │    Widget       │               │   │
│  │  └─────────────────┘  └─────────────────┘               │   │
│  │                                                          │   │
│  │  ┌──────────────────────────────────────┐               │   │
│  │  │         Audit Log Widget             │               │   │
│  │  └──────────────────────────────────────┘               │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
│  React-Grid-Layout (Responsive, Draggable, Resizable)          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Features

Feature	Description
Grid Layout	Drag-and-drop widget positioning
Responsive	Adapts to screen sizes
Real-time Data	Live updates via WebSocket/polling
Multiple Layouts	Save different configurations
Widget Configuration	Per-widget settings

Key Files

File	Description
`pages/dashboards/DashboardPage.tsx`	Main dashboard page
`pages/dashboards/hooks/useDashboardLayouts.ts`	Layout management hook
`pages/dashboards/widgets/`	Widget components
`i18n/en/dashboard.json`	Translations

---

2. Module Overview (Commercial/Business)

Business Value

The Dashboard provides at-a-glance system monitoring:

Without Dashboard	With Dashboard
Navigate to each module	Single overview
No real-time view	Live status updates
Fixed interface	Customizable layout
Manual checking	Automatic alerts

Use Cases

System Monitoring

- Service status (FreeSWITCH, PostgreSQL, etc.)

- CPU/memory/disk usage

Call Center Overview

- Active calls count

- Queue statistics

Quick Administration

- One-click actions

- Reload configurations

Audit Trail

- Recent system events

- User activities

Feature Highlights

Feature	Benefit
Widgets	Modular information display
Layouts	Multiple saved configurations
Drag & Drop	Easy customization
Real-time	Live data updates
Configurable	Per-widget settings

---

3. Module Overview (End User/Administrator)

What Can You Do?

View system status at a glance
Add/remove widgets
Drag and resize widgets
Create multiple layouts
Configure widget settings
Perform quick actions

Dashboard Interface

Plaintext

┌─────────────────────────────────────────────────────────────────┐
│  Dashboard                    [Edit Dashboard] [Switch Layout]  │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────┐  ┌─────────────────────────┐      │
│  │ 🟢 Services Status      │  │ 📊 System Stats         │      │
│  │                         │  │                         │      │
│  │ FreeSWITCH    ✅ Online │  │ CPU: ████████░░ 78%     │      │
│  │ PostgreSQL    ✅ Online │  │ RAM: ███████░░░ 65%     │      │
│  │ Redis         ✅ Online │  │ Disk: ██████░░░░ 55%    │      │
│  │ Nginx         ✅ Online │  │ Uptime: 45d 12h         │      │
│  │                         │  │                         │      │
│  └─────────────────────────┘  └─────────────────────────┘      │
│                                                                 │
│  ┌─────────────────────────┐  ┌─────────────────────────┐      │
│  │ 📞 Telephony Stats      │  │ ⚡ Quick Actions        │      │
│  │                         │  │                         │      │
│  │ Active Calls: 12        │  │ [Reload XML]            │      │
│  │ Extensions: 150/200     │  │ [Restart FreeSWITCH]    │      │
│  │ Gateways: 3 Online      │  │ [Clear Cache]           │      │
│  │ Today's Calls: 847      │  │ [View Logs]             │      │
│  │                         │  │                         │      │
│  └─────────────────────────┘  └─────────────────────────┘      │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ 📋 Audit Log                                             │  │
│  │                                                          │  │
│  │ 10:30:45  admin   Updated extension 1001               │  │
│  │ 10:28:12  admin   Created IVR "Main Menu"              │  │
│  │ 10:15:00  system  Gateway registration successful      │  │
│  │                                                          │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Quick Tips

TIP

Drag to Reorder: Click and drag widget headers to reposition.

TIP

Resize: Drag widget corners to resize.

TIP

Multiple Layouts: Create different layouts for different monitoring needs.

---

Feature	Description
Purpose	Show service health status
Data	FreeSWITCH, PostgreSQL, Redis, Nginx, etc.
Updates	Real-time via WebSocket
Config	Select which services to monitor

Feature	Description
Purpose	Server resource usage
Data	CPU, RAM, Disk, Uptime
Updates	Polling interval
Config	None

Feature	Description
Purpose	Call system overview
Data	Active calls, extensions, gateways
Updates	Real-time
Config	None

Feature	Description
Purpose	One-click admin actions
Actions	Reload XML, Restart services, Clear cache
Config	Select which actions to show

Feature	Description
Purpose	Recent system events
Data	User actions, system events
Updates	Polling
Config	Filter by event type

Feature	Description
Purpose	Server hardware details
Data	CPU model, cores, memory, storage
Updates	On load
Config	None

Feature	Description
Purpose	Network configuration
Data	IP addresses, interfaces, bandwidth
Updates	Polling
Config	None

Feature	Description
Purpose	Server identification
Data	Hostname, OS, version, timezone
Updates	On load
Config	None

Feature	Description
Purpose	Show FreeSWITCH Sofia module health and active profiles
Data	Sofia connection status, active profiles (internal, external, etc.), states, and local SIP bind URLs
Updates	Polling every 10 seconds
Interactive	Clicking on any active profile opens a terminal-style modal showing its live configuration details (`sofia status profile` )
Config	None

---

5. Layout Management

Creating a Layout

Click Edit Dashboard
Add widgets using Add Widget button
Drag widgets to desired positions
Resize as needed
Click Save

Switching Layouts

Click Switch Layout
Select from saved layouts
Dashboard updates immediately

Layout Storage

Table	Purpose
`public.dashboard_layouts`	Saved layout configurations
`public.dashboard_widgets`	Widget configurations

---

6. Common Scenarios & Examples

Scenario 1: Call Center Monitoring

Widgets:

Telephony Stats (large)
Queue Stats (if available)
Services Status (small)

Scenario 2: System Admin View

Widgets:

System Stats
Hardware Info
Network Info
Services Status
Audit Log

Scenario 3: Quick Action Focus

Widgets:

Quick Actions (prominent)
Services Status
Telephony Stats

---

7. Limitations & Important Notes

Technical Notes

NOTE

Browser-Based: Dashboard runs entirely in the browser.

NOTE

Real-time: Some widgets use WebSocket for live updates.

WARNING

Resource Usage: Many widgets may impact browser performance.

Best Practices

Start Simple: Add widgets gradually
Group Related: Keep related info together
Size Appropriately: Important widgets larger
Save Often: Save layouts after changes
Create Multiple: Different layouts for different tasks

---

8. Troubleshooting Tips

Common Issues

Symptom	Possible Cause	Solution
Widget not loading	API error	Check network/console
Data not updating	WebSocket disconnected	Refresh page
Layout not saving	Permission issue	Check user permissions
Slow performance	Too many widgets	Remove unused widgets
Widget blank	Backend service down	Check service status

Browser Console

Javascript

// Check for errors
console.log(errors)

// Check WebSocket status
// Look for WS connection messages

---

9. Glossary

Term	Definition
Widget	Self-contained data display component
Layout	Saved widget arrangement
Grid	Underlying positioning system
Real-time	Live data updates
Polling	Periodic data refresh

---

Lua Script Status ℹ️

No Lua Handler Required

Component	Status
Dashboard	ℹ️ Frontend-only module - widgets fetch data from backend APIs

Dashboard is a React-based frontend module. Widgets fetch data from backend REST APIs and WebSocket connections. No Lua handlers are used.

---

Documentation last updated: January 2026

Dashboard Module Documentation

Table of Contents

1. Module Overview (Technical)

What Is the Dashboard?

Architecture

Key Features

Key Files

2. Module Overview (Commercial/Business)

Business Value

Use Cases

Feature Highlights

3. Module Overview (End User/Administrator)

What Can You Do?

Dashboard Interface

Quick Tips

4. Widget Types

Services Status Widget

System Stats Widget

Telephony Stats Widget

Quick Actions Widget

Audit Log Widget

Hardware Info Widget

Network Info Widget

Server Info Widget

Sofia Status Widget

5. Layout Management

Creating a Layout

Switching Layouts

Layout Storage

6. Common Scenarios & Examples

Scenario 1: Call Center Monitoring

Scenario 2: System Admin View

Scenario 3: Quick Action Focus

7. Limitations & Important Notes

Technical Notes

Best Practices

8. Troubleshooting Tips

Common Issues

Browser Console

9. Glossary

Lua Script Status ℹ️

No Lua Handler Required