Programmable Dashboard

Programmable Admin Dashboard

GeniXCMS 2.0 introduces a powerful, architecture-driven administrative dashboard. Beyond just a static overview, the dashboard is now fully programmable, allowing developers to extend its functionality using the UiBuilder engine and the Hook System.

---

Technical Overview

The dashboard layout is generated from a centralized Schema Array. This array defines every element from stat cards and tables to interactive charts. By using the admin_dashboard_schema filter, modules can intercept and modify this structure before it renders.

Core Components

• UiBuilder: The rendering engine that converts arrays into Bootstrap 5 components.
• Hooks: Strategic points for data modification and HTML injection.

---

Injecting Content via Hooks

1. Simple Action Hooks

Traditional action hooks allow you to echo HTML directly into specific areas of the dashboard.

• admin_page_notif_action: Renders at the very top (alerts/notifications).
• admin_page_top_action: Renders below the welcome header.
• admin_page_bottom_action: Renders at the footer of the dashboard content.

2. The Schema Filter (admin_dashboard_schema)

This is the most powerful way to "program" the dashboard. It allows you to add complex components like grids, tables, and charts.

Example: Adding a New Card

Hooks::attach('admin_dashboard_schema', function($schema) {
    $mySection = [
        'type' => 'card',
        'title' => 'Project Status',
        'body_elements' => [
            [
                'type' => 'raw',
                'html' => '<div class="alert alert-info">All systems go!</div>'
            ]
        ]
    ];

    // Append to dashboard content
    $schema['content'][] = $mySection;
    return $schema;
});

---

Supported UI Elements

You can utilize any standard UiBuilder element within your dashboard schema:

Stat Cards

Renders a row of summary statistics.

[
    'type' => 'stat_cards',
    'items' => [
        ['label' => 'Total Orders', 'value' => '150', 'icon' => 'bi bi-cart', 'color' => 'primary']
    ]
]

Interactive Charts (New in 2.0)

GeniXCMS 2.0 integrates Chart.js support directly into the UiBuilder.

[
    'type' => 'chart',
    'chart_type' => 'line', // bar, pie, doughnut
    'chart_data' => [
        'labels' => ['Mon', 'Tue', 'Wed'],
        'datasets' => [[
            'label' => 'Server Load',
            'data' => [10, 45, 30],
            'borderColor' => '#0d6efd'
        ]]
    ]
]

Data Tables

Tables with automatic formatting and styling.

[
    'type' => 'table',
    'headers' => ['ID', 'Module', 'Status'],
    'rows' => [
        ['1', 'SEO Manager', 'Active'],
        ['2', 'Cache Pro', 'Inactive']
    ]
]

---

Best Practices

1. Use Semantic Colors: Always use GeniXCMS standard colors (primary, success, info, warning, danger) for visual consistency.
2. Responsive Grid: Wrap your elements in row types to ensure they align correctly on mobile and desktop.
3. Namespace IDs: When creating charts or custom HTML elements, use unique IDs (e.g., my_mod_chart_01) to prevent conflicts with other modules.

---