feat: plugin-based dashboard panel system with install cards for uninstalled packages #267

New Issue

2026-06-25T17:29:41Z

jmiller commented

2026-06-25 17:29:41 +00:00

Overview

Replace the static dashboard layout with a plugin-driven panel system. Each MokoSuite package registers its own dashboard panel via a Joomla plugin event. Packages that are not installed show an "Available - Install" promo card instead. This merges the dashboard and extensions catalog into a single view.

Architecture

Plugin Event: `onMokoSuiteDashboardPanels`

The dashboard view dispatches this event. Each installed MokoSuite package responds with a panel definition:

public function onMokoSuiteDashboardPanels(Event $event): void
{
    $event->addResult([
        'key'      => 'mokosuitebackup',
        'title'    => 'MokoSuiteBackup',
        'icon'     => 'icon-archive',
        'size'     => 'quarter',   // quarter, half, full
        'priority' => 100,
        'html'     => $this->renderPanel(),
    ]);
}

Panel Sizes

quarter (col-6 col-xl-3) - compact status card (backup status, quick stats)
half (col-12 col-xl-6) - medium panel (charts, tables)
full (col-12) - full-width panel (detailed views)

Package Registry

A static registry of all known MokoSuite packages (in the component helper or config):

private static array $registry = [
    'mokosuitebackup' => [
        'title'       => 'MokoSuiteBackup',
        'icon'        => 'icon-archive',
        'description' => 'Automated backups with scheduling, retention, and cloud storage',
        'component'   => 'com_mokosuitebackup',
        'installUrl'  => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteBackup',
    ],
    'mokosuitecross' => [
        'title'       => 'MokoSuiteCross',
        'icon'        => 'icon-random',
        'description' => 'Cross-extension communication and shared services',
        'component'   => 'com_mokosuitecross',
        'installUrl'  => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteCross',
    ],
    'mokosuitecrm' => [
        'title'       => 'MokoSuiteCRM',
        'icon'        => 'icon-address-book',
        'description' => 'Customer relationship management with contacts, deals, and tickets',
        'component'   => 'com_mokosuitecrm',
        'installUrl'  => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteCRM',
    ],
];

Gap Fill Logic

After collecting panels from the plugin event, the dashboard checks the registry for any package that did NOT respond. Those get an install promo card:

+---------------------------+
|  icon-archive             |
|  MokoSuiteBackup          |
|  Automated backups with   |
|  scheduling and cloud...  |
|  [Install]                |
+---------------------------+

Dashboard Layout Flow

Fire onMokoSuiteDashboardPanels event
Collect panel results from installed packages
Check registry for uninstalled packages, generate install cards
Sort all panels by priority (installed first, then available)
Render in responsive grid

Built-in Panels (MokoSuiteClient core)

The following panels are rendered directly by the dashboard (not via plugin event) and remain as-is:

Site info bar (always top)
Quick actions row (Clear Cache, Check Updates, etc.)
Login activity chart
WAF activity chart
Pending updates table
Checked-out items
Recent logins
WAF blocks

Migration from Extensions View

Once this is implemented, the separate extensions view (view=extensions) becomes redundant. It can either be removed or kept as a detailed management view for plugin toggles and configuration.

Implementation Steps

Create MokoSuitePanelRegistry helper with known packages list
Add onMokoSuiteDashboardPanels event dispatch to DashboardModel or HtmlView
Update dashboard template to render collected panels in the grid
Generate install cards for unregistered packages
Add panel plugin to MokoSuiteBackup as reference implementation
Add panel plugins to other packages (CRM, Cross, etc.)

Benefits

Each package owns its dashboard content
Dashboard doubles as extension marketplace
No hardcoded references to other packages in the client component
Third-party MokoSuite add-ons can register panels too
Clean separation of concerns

## Overview Replace the static dashboard layout with a plugin-driven panel system. Each MokoSuite package registers its own dashboard panel via a Joomla plugin event. Packages that are not installed show an "Available - Install" promo card instead. This merges the dashboard and extensions catalog into a single view. ## Architecture ### Plugin Event: `onMokoSuiteDashboardPanels` The dashboard view dispatches this event. Each installed MokoSuite package responds with a panel definition: ```php public function onMokoSuiteDashboardPanels(Event $event): void { $event->addResult([ 'key' => 'mokosuitebackup', 'title' => 'MokoSuiteBackup', 'icon' => 'icon-archive', 'size' => 'quarter', // quarter, half, full 'priority' => 100, 'html' => $this->renderPanel(), ]); } ``` ### Panel Sizes - **quarter** (col-6 col-xl-3) - compact status card (backup status, quick stats) - **half** (col-12 col-xl-6) - medium panel (charts, tables) - **full** (col-12) - full-width panel (detailed views) ### Package Registry A static registry of all known MokoSuite packages (in the component helper or config): ```php private static array $registry = [ 'mokosuitebackup' => [ 'title' => 'MokoSuiteBackup', 'icon' => 'icon-archive', 'description' => 'Automated backups with scheduling, retention, and cloud storage', 'component' => 'com_mokosuitebackup', 'installUrl' => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteBackup', ], 'mokosuitecross' => [ 'title' => 'MokoSuiteCross', 'icon' => 'icon-random', 'description' => 'Cross-extension communication and shared services', 'component' => 'com_mokosuitecross', 'installUrl' => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteCross', ], 'mokosuitecrm' => [ 'title' => 'MokoSuiteCRM', 'icon' => 'icon-address-book', 'description' => 'Customer relationship management with contacts, deals, and tickets', 'component' => 'com_mokosuitecrm', 'installUrl' => 'https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteCRM', ], ]; ``` ### Gap Fill Logic After collecting panels from the plugin event, the dashboard checks the registry for any package that did NOT respond. Those get an install promo card: ``` +---------------------------+ | icon-archive | | MokoSuiteBackup | | Automated backups with | | scheduling and cloud... | | [Install] | +---------------------------+ ``` ### Dashboard Layout Flow 1. Fire `onMokoSuiteDashboardPanels` event 2. Collect panel results from installed packages 3. Check registry for uninstalled packages, generate install cards 4. Sort all panels by priority (installed first, then available) 5. Render in responsive grid ### Built-in Panels (MokoSuiteClient core) The following panels are rendered directly by the dashboard (not via plugin event) and remain as-is: - Site info bar (always top) - Quick actions row (Clear Cache, Check Updates, etc.) - Login activity chart - WAF activity chart - Pending updates table - Checked-out items - Recent logins - WAF blocks ### Migration from Extensions View Once this is implemented, the separate extensions view (`view=extensions`) becomes redundant. It can either be removed or kept as a detailed management view for plugin toggles and configuration. ## Implementation Steps 1. Create `MokoSuitePanelRegistry` helper with known packages list 2. Add `onMokoSuiteDashboardPanels` event dispatch to `DashboardModel` or `HtmlView` 3. Update dashboard template to render collected panels in the grid 4. Generate install cards for unregistered packages 5. Add panel plugin to MokoSuiteBackup as reference implementation 6. Add panel plugins to other packages (CRM, Cross, etc.) ## Benefits - Each package owns its dashboard content - Dashboard doubles as extension marketplace - No hardcoded references to other packages in the client component - Third-party MokoSuite add-ons can register panels too - Clean separation of concerns

jmiller commented

2026-06-25 17:29:43 +00:00

Branch created: feature/267-feat-plugin-based-dashboard-panel-system

git fetch origin
git checkout feature/267-feat-plugin-based-dashboard-panel-system

Branch created: [`feature/267-feat-plugin-based-dashboard-panel-system`](https://git.mokoconsulting.tech/MokoConsulting/MokoSuiteClient/src/branch/feature/267-feat-plugin-based-dashboard-panel-system) ```bash git fetch origin git checkout feature/267-feat-plugin-based-dashboard-panel-system ```

Sign in to join this conversation.

Priority Medium

Type Feature

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoSuiteClient#267

feat: plugin-based dashboard panel system with install cards for uninstalled packages #267