soil-report-ai/dashboard/dashboard.php

<?php
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../lib/auth.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

requireLogin();

$pageTitle = 'Dashboard';
$siteName  = 'Crop Monitor';

include __DIR__ . '/../layouts/header.php';
include __DIR__ . '/../layouts/navbar.php';
?>

<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <?php include __DIR__ . '/../layouts/sidebar.php'; ?>
    </div>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">

                <h1 class="mt-4"><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>

                <!-- ── Summary cards ──────────────────────────────────────── -->
                <div class="row">

                    <div class="col-xl-3 col-sm-6 mb-3">
                        <div class="card text-white bg-primary o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon"><i class="fas fa-fw fa-comments"></i></div>
                                <div class="mr-5">26 New Messages!</div>
                            </div>
                            <a class="card-footer text-white clearfix small z-1" href="/dashboard/inbox.php">
                                <span class="float-start">View Details</span>
                                <span class="float-end"><i class="fas fa-angle-right"></i></span>
                            </a>
                        </div>
                    </div>

                    <div class="col-xl-3 col-sm-6 mb-3">
                        <div class="card text-white bg-warning o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon"><i class="fas fa-fw fa-list"></i></div>
                                <div class="mr-5">11 New Tasks!</div>
                            </div>
                            <a class="card-footer text-white clearfix small z-1" href="#">
                                <span class="float-start">View Details</span>
                                <span class="float-end"><i class="fas fa-angle-right"></i></span>
                            </a>
                        </div>
                    </div>

                    <div class="col-xl-3 col-sm-6 mb-3">
                        <div class="card text-white bg-success o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon"><i class="fas fa-fw fa-seedling"></i></div>
                                <div class="mr-5">New Soil Tests</div>
                            </div>
                            <a class="card-footer text-white clearfix small z-1"
                               href="/dashboard/crop-analysis/soil-test-data/soil-test-data.php">
                                <span class="float-start">View Details</span>
                                <span class="float-end"><i class="fas fa-angle-right"></i></span>
                            </a>
                        </div>
                    </div>

                    <div class="col-xl-3 col-sm-6 mb-3">
                        <div class="card text-white bg-danger o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon"><i class="fas fa-fw fa-life-ring"></i></div>
                                <div class="mr-5">13 New Tickets!</div>
                            </div>
                            <a class="card-footer text-white clearfix small z-1" href="#">
                                <span class="float-start">View Details</span>
                                <span class="float-end"><i class="fas fa-angle-right"></i></span>
                            </a>
                        </div>
                    </div>

                </div><!-- /row: summary cards -->

                <!-- ── Recent Analysis heading ─────────────────────────────── -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <h5>Recent Analysis</h5>
                    </div>
                </div>

                <!-- ── Weather widget + Calendar ──────────────────────────── -->
                <div class="row">

                    <!-- Weather widget -->
                    <div class="col-md-7">
                        <div class="weather">
                            <div class="weather-top">
                                <div class="weather-top-left">
                                    <div class="degree">
                                        <figure class="icons">
                                            <canvas id="partly-cloudy-day" width="64" height="64"></canvas>
                                        </figure>
                                        <span>37°</span>
                                        <div class="clearfix"></div>
                                    </div>
                                    <p>
                                        <?= date('l') ?>
                                        <label><?= date('j') ?></label><sup><?= date('S') ?></sup>
                                        <?= date('M') ?>
                                    </p>
                                </div>
                                <div class="weather-top-right">
                                    <p><i class="fa fa-map-marker"></i> &mdash;</p>
                                    <label>&mdash;</label>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="weather-bottom">
                                <?php
                                $forecast = [
                                    ['label' => 'Cloudy', 'icon' => 'cloudy',    'temp' => '20°', 'offset' => 1],
                                    ['label' => 'Sunny',  'icon' => 'clear-day', 'temp' => '37°', 'offset' => 2],
                                    ['label' => 'Rainy',  'icon' => 'sleet',     'temp' => '7°',  'offset' => 3],
                                    ['label' => 'Windy',  'icon' => 'wind',      'temp' => '14°', 'offset' => 4],
                                ];
                                foreach ($forecast as $day): ?>
                                <div class="weather-bottom1">
                                    <div class="weather-head">
                                        <h4><?= $day['label'] ?></h4>
                                        <figure class="icons">
                                            <canvas id="fc-<?= $day['icon'] ?>" width="58" height="58"></canvas>
                                        </figure>
                                        <h6><?= $day['temp'] ?></h6>
                                        <div class="bottom-head">
                                            <p><?= date('F j', strtotime('+' . $day['offset'] . ' day')) ?></p>
                                            <p><?= date('l',   strtotime('+' . $day['offset'] . ' day')) ?></p>
                                        </div>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div><!-- /col: weather -->

                    <!-- Calendar widget -->
                    <div class="col-md-5">
                        <div class="cal1 cal_2">
                            <div id="clndr"></div>
                        </div>
                        <link rel="stylesheet" href="/client-assets/css/clndr.css">
                        <script src="/client-assets/js/underscore-min.js"></script>
                        <script src="/client-assets/js/moment-2.2.1.js"></script>
                        <script src="/client-assets/js/clndr.js"></script>
                        <script src="/client-assets/js/site.js"></script>
                    </div><!-- /col: calendar -->

                </div><!-- /row: weather + calendar -->

                <div class="content-bottom mt-4"></div>
                <div class="clearfix"></div>

            </div><!-- /container-fluid -->

<?php include __DIR__ . '/../layouts/footer.php'; ?>

<script>
    // Initialise all Skycons in a single pass after DOM is ready
    (function () {
        var hero = new Skycons({ color: '#1ABC9C' });
        hero.set('partly-cloudy-day', 'partly-cloudy-day');
        hero.play();

        var fc = new Skycons({ color: '#999' });
        [
            ['fc-cloudy',    'cloudy'],
            ['fc-clear-day', 'clear-day'],
            ['fc-sleet',     'sleet'],
            ['fc-wind',      'wind'],
        ].forEach(function (pair) {
            if (document.getElementById(pair[0])) {
                fc.set(pair[0], pair[1]);
            }
        });
        fc.play();
    })();
</script>