[FEATURE] Widget on dashboard

[BimaBizz]

hello @aheinze

I would like to suggest adding a Widget System to the Cockpit CMS dashboard. This feature could allow users to customize their dashboard by adding, removing, or rearranging widgets, making the CMS more user-friendly and adaptable to individual needs.

If this suggestion is feasible, I would also like to propose my current code as a reference or starting point for this feature. I believe it could serve as a useful foundation or inspiration for implementing the widget functionality.

Here is the example code I have been working on for a dashboard (modules/App/views/dashboard/index.php) with widgets:

<div class="kiss-flex-inline kiss-flex-middle" gap="small">
    <div>
        <app-avatar size="40" name="<?=$this['user/name']?>"></app-avatar>
    </div>
    <div>
        <div class="kiss-text-bold"><?=$this['user/name']?></div>
        <div class="kiss-color-muted kiss-size-small"><?=$this['user/email']?></div>
    </div>
</div>

<div class="kiss-flex kiss-flex-wrap" gap="small">
    <?php
    $widgetDir = __DIR__ . '/../widget/';
    $widgetFiles = glob($widgetDir . '*.php');

    if (count($widgetFiles) > 0) {
        foreach ($widgetFiles as $widgetFile) {
            echo '<div class="kiss-margin-top kiss-width-1-1 kiss-width-1-2@s kiss-width-1-4@m">
            <kiss-card class="kiss-margin-small kiss-padding kiss-bgcolor-default kiss-radius" style="box-shadow: 0 1.4px 1.1px rgba(0, 0, 0, 0.034), 0 3.3px 2.6px rgba(0, 0, 0, 0.048), 0 6.25px 5px rgba(0, 0, 0, 0.06), 0 11.15px 8.95px rgba(0, 0, 0, 0.072), 0 20.9px 16.7px rgba(0, 0, 0, 0.086), 0 50px 40px rgba(0, 0, 0, 0.12); height: 170px;">
            ';
            include $widgetFile;
            echo '</kiss-card></div>';
        }
    } else {
        ?>
        <div class="kiss-height-50vh kiss-flex kiss-flex-middle kiss-flex-center kiss-align-center">
            <div class="animated fadeInUp">
                <div class="kiss-size-xlarge kiss-margin-small"><?=t('Hello.')?></div>
                <div class="kiss-color-muted kiss-size-1 kiss-text-light animated fadeIn delay-1s"><?=t("Excited for your creations today!")?></div>
            </div>
        </div>
        <?php
    }
    ?>
</div>

and this is a sample for a widget (modules/App/views/widget/clock.php)

<?php
function renderClockWidget() {
    ob_start();
    ?>
    <div class="kiss-card-body">
        <h5 class="kiss-card-title kiss-text-bold">Clock</h5>
        <div class="kiss-card-text">
            <div id="clock" class="kiss-flex kiss-flex-middle kiss-text-center"></div>
            <div id="date" class="kiss-size-small kiss-text-center kiss-color-muted kiss-margin-top"></div>
        </div>
    </div>
    <script>
        function updateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            var timeString = '<span class="kiss-size-xlarge">' + hours + '</span>:<span class="kiss-size-small">' + minutes + '</span>:<span class="kiss-size-small">' + seconds + '</span>';
            document.getElementById('clock').innerHTML = timeString;

            var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            var day = days[now.getDay()];
            var date = now.getDate();
            var month = now.getMonth() + 1; // Months are zero-based
            var year = now.getFullYear();
            var dateString = day + ', ' + date + '/' + month + '/' + year;
            document.getElementById('date').innerHTML = dateString;
        }
        setInterval(updateClock, 1000);
        window.onload = updateClock;
    </script>
    <?php
    return ob_get_clean();
}
echo renderClockWidget();
?>

[aheinze]

The dashboard is on the todo list 👍