dash.php

<?php
// Load data from files
$dbFile = 'db.json';
$logFile = 'logs.jsonl';

$db = file_exists($dbFile) ? json_decode(file_get_contents($dbFile), true) : [];
$logs = file_exists($logFile) ? array_map('json_decode', file($logFile)) : [];

$groupedLogs = [];
foreach ($logs as $entry) {
    $code = $entry->code ?? 'unknown';
    $groupedLogs[$code][] = $entry;
}

$codeToName = [];
foreach ($db as $code => $meta) {
    $codeToName[$code] = $meta['name'] ?? $code;
}

$selectedCode = $_GET['code'] ?? null;
$selectedLogs = $selectedCode && isset($groupedLogs[$selectedCode]) ? $groupedLogs[$selectedCode] : [];
$meta = $db[$selectedCode] ?? null;

function escape($str) {
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

function parseUserAgent($ua) {
    $platform = 'Unknown';
    $browser = 'Unknown';
    $version = '';

    if (preg_match('/linux/i', $ua)) $platform = 'Linux';
    elseif (preg_match('/macintosh|mac os x/i', $ua)) $platform = 'Mac';
    elseif (preg_match('/windows|win32/i', $ua)) $platform = 'Windows';
    elseif (preg_match('/iphone/i', $ua)) $platform = 'iPhone';
    elseif (preg_match('/android/i', $ua)) $platform = 'Android';

    if (preg_match('/MSIE (\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Internet Explorer'; $version = $matches[1];
    } elseif (preg_match('/Firefox\/([\d.]+)/i', $ua, $matches)) {
        $browser = 'Firefox'; $version = $matches[1];
    } elseif (preg_match('/Chrome\/([\d.]+)/i', $ua, $matches)) {
        $browser = 'Chrome'; $version = $matches[1];
    } elseif (preg_match('/Safari\/([\d.]+)/i', $ua) && !preg_match('/Chrome/i', $ua)) {
        $browser = 'Safari'; $version = $matches[1];
    } elseif (preg_match('/Opera\/([\d.]+)/i', $ua, $matches)) {
        $browser = 'Opera'; $version = $matches[1];
    }

    return [$platform, $browser, $version];
}

function parseLanguage($langHeader) {
    $map = [
        'en' => 'English', 'fr' => 'French', 'de' => 'German', 'es' => 'Spanish', 'hi' => 'Hindi',
        'zh' => 'Chinese', 'ja' => 'Japanese', 'ru' => 'Russian', 'pt' => 'Portuguese', 'it' => 'Italian'
    ];
    $langCode = strtolower(substr($langHeader, 0, 2));
    return $map[$langCode] ?? $langHeader;
}

$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host = $_SERVER['HTTP_HOST'] ?? 'localhost';
$path = rtrim(dirname($_SERVER['PHP_SELF']), '/');
$createdUrl = "$protocol://$host$path/u.php?c=$selectedCode";

function formatDateTimePretty($utcString) {
    $dt = new DateTime($utcString);
    return $dt->format('M j, y \a\t h:i:s A');
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic QR Analytics Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body { font-family: sans-serif; padding: 2em; }
        select, table { margin-top: 1em; }
        canvas { max-width: 600px; margin-top: 2em; }
        table { border-collapse: collapse; width: 100%; margin-top: 1em; table-layout: fixed; }
        th, td { border: 1px solid #ddd; padding: 6px; font-size: 0.8em; word-wrap: break-word; }
        th { background-color: #f4f4f4; text-align: left; }
        th.time-col, td.time-col { width: 150px; }
        th.ip-col, td.ip-col { width: 100px; }
        th.coord-col, td.coord-col { width: 110px; }
        th.city-col, td.city-col { width: 140px; }
        th.country-col, td.country-col { width: 100px; }
        th.os-col, td.os-col { width: 90px; }
        th.browser-col, td.browser-col { width: 100px; }
        th.lang-col, td.lang-col { width: 80px; }
        th.referer-col, td.referer-col { width: 160px; }
        #map { height: 400px; width: 100%; }
        .analytics-flex { display: flex; flex-wrap: wrap; gap: 2em; margin-top: 2em; }
        .analytics-half { flex: 1 1 45%; min-width: 300px; }
    </style>
</head>
<body>
    <h2>Dynamic QR Analytics Dashboard</h2>
    <form method="get">
        <label for="code">Select Link:</label>
        <select name="code" id="code" onchange="this.form.submit()">
            <option value="">-- Choose --</option>
            <?php foreach ($codeToName as $code => $name): ?>
                <option value="<?= escape($code) ?>" <?= $code === $selectedCode ? 'selected' : '' ?>>
                    <?= escape($name) ?> (<?= $code ?>)
                </option>
            <?php endforeach; ?>
        </select>
    </form>

    <?php if ($selectedCode && $meta): ?>
        <h3>Details for: <?= escape($meta['name']) ?></h3>
        <p><strong>Target URL:</strong> <a href="<?= escape($meta['url']) ?>" target="_blank"><?= escape($meta['url']) ?></a></p>
        <p><strong>Dynamic QR URL:</strong> <a href="<?= escape($createdUrl) ?>" target="_blank"><?= escape($createdUrl) ?></a></p>
        <p><strong>Created On:</strong> <span class="js-timestamp" data-utc="<?= escape($meta['created'] ?? '') ?>">Loading...</span></p>


        <h4>Log Entries (<?= count($selectedLogs) ?>)</h4>
        <table>
            <tr>
                <th class="time-col">Time</th>
                <th class="ip-col">IP</th>
                <th class="coord-col">Coords</th>
                <th class="city-col">City</th>
                <th class="country-col">Country</th>
                <th class="os-col">OS</th>
                <th class="browser-col">Browser</th>
                <th class="lang-col">Lang</th>
                <th class="referer-col">Referer</th>
            </tr>
            <?php 
            $osStats = $browserStats = [];
            foreach ($selectedLogs as $entry): 
                $ua = $entry->userAgent ?? '';
                [$platform, $browser, $version] = parseUserAgent($ua);
                $lang = parseLanguage($entry->language ?? '');
                $osStats[$platform] = ($osStats[$platform] ?? 0) + 1;
                $browserStats[$browser] = ($browserStats[$browser] ?? 0) + 1;
            ?>
                <tr>
                    <td class="time-col js-timestamp" data-utc="<?= escape($entry->timestamp ?? '') ?>">Loading...</td>
                    <td class="ip-col"><?= escape($entry->ip ?? '') ?></td>
                    <td class="coord-col"><?= escape(($entry->lat ?? '') . ', ' . ($entry->lon ?? '')) ?></td>
                    <td class="city-col"><?= escape($entry->city ?? '') ?></td>
                    <td class="country-col"><?= escape($entry->country ?? '') ?></td>
                    <td class="os-col"><?= escape($platform) ?></td>
                    <td class="browser-col"><?= escape($browser . ' ' . $version) ?></td>
                    <td class="lang-col"><?= escape($lang) ?></td>
                    <td class="referer-col"><?= escape($entry->referer ?? '') ?></td>
                </tr>
            <?php endforeach; ?>
        </table>

<!-- Remaining charts and map rendering unchanged -->




        <?php
        $clicksPerDay = [];
        $markers = [];
        foreach ($selectedLogs as $entry) {
            $day = substr($entry->timestamp ?? '', 0, 10);
            $clicksPerDay[$day] = ($clicksPerDay[$day] ?? 0) + 1;
            if (!empty($entry->lat) && !empty($entry->lon)) {
                $markers[] = [
                    'lat' => $entry->lat,
                    'lon' => $entry->lon,
                    'info' => $entry->city . ', ' . $entry->country
                ];
            }
        }
        ?>

     <div class="analytics-flex">
    <div class="analytics-half">
        
        <div id="map"></div>
        <canvas id="osChart"></canvas>
    </div>
    <div class="analytics-half">
        <canvas id="browserChart"></canvas>
        <canvas id="clicksChart"></canvas>
        
    </div>
</div>

        <script>
       function formatLocalTime(utcString) {
    const date = new Date(utcString);
    const options = {
        day: 'numeric',
        month: 'short',
        year: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: true
    };
    const parts = new Intl.DateTimeFormat(undefined, options).formatToParts(date);
    const lookup = Object.fromEntries(parts.map(p => [p.type, p.value]));
    return `${lookup.day} ${lookup.month} ${lookup.year} at ${lookup.hour}:${lookup.minute}:${lookup.second} ${lookup.dayPeriod}`;
}

        document.querySelectorAll('.js-timestamp').forEach(el => {
            const utc = el.dataset.utc;
            if (utc) {
                el.textContent = formatLocalTime(utc);
            } else {
                el.textContent = '—';
            }
        });

        const map = L.map('map').setView([20, 0], 2);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        const markers = <?= json_encode($markers) ?>;
        markers.forEach(({lat, lon, info}) => {
            L.marker([lat, lon]).addTo(map).bindPopup(info);
        });

        const makeChart = (ctxId, label, dataObj) => {
            const ctx = document.getElementById(ctxId).getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(dataObj),
                    datasets: [{
                        label: label,
                        data: Object.values(dataObj),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: { y: { beginAtZero: true } }
                }
            });
        };

        new Chart(document.getElementById('clicksChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: <?= json_encode(array_keys($clicksPerDay)) ?>,
                datasets: [{
                    label: 'Clicks Per Day',
                    data: <?= json_encode(array_values($clicksPerDay)) ?>,
                    borderWidth: 2,
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                scales: { y: { beginAtZero: true } }
            }
        });

        makeChart('osChart', 'Operating Systems', <?= json_encode($osStats) ?>);
        makeChart('browserChart', 'Browsers', <?= json_encode($browserStats) ?>);
        </script>
    <?php elseif ($selectedCode): ?>
        <p style="color: red;">Invalid or no data for selected code.</p>
    <?php endif; ?>
</body>
</html>