mivo/app/Views/reports/resume.php

<?php
$title = "Resume Report";
require_once ROOT . '/app/Views/layouts/header_main.php';
?>

<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
    <div>
        <h1 class="text-2xl font-bold tracking-tight" data-i18n="reports.resume_title">Resume Report</h1>
        <p class="text-accents-5" data-i18n="reports.resume_subtitle">Overview of aggregated income.</p>
    </div>
     <div class="flex items-center gap-2">
          <span class="text-sm font-medium bg-accents-1 px-3 py-1 rounded-full border border-accents-2">
            <span data-i18n="reports.total_income">Total Income</span>: <?= $currency ?> <?= number_format($totalIncome, 0, ',', '.') ?>
          </span>
    </div>
</div>

<!-- Tabs -->
<div class="mb-6 border-b border-accents-2">
    <nav class="flex space-x-4 overflow-x-auto no-scrollbar" aria-label="Tabs">
        <button onclick="switchTab('daily')" id="tab-daily" class="px-3 py-2 text-sm font-medium border-b-2 border-primary text-primary active-tab whitespace-nowrap" data-i18n="reports.daily">Daily</button>
        <button onclick="switchTab('monthly')" id="tab-monthly" class="px-3 py-2 text-sm font-medium border-b-2 border-transparent text-accents-5 hover:text-foreground whitespace-nowrap" data-i18n="reports.monthly">Monthly</button>
        <button onclick="switchTab('yearly')" id="tab-yearly" class="px-3 py-2 text-sm font-medium border-b-2 border-transparent text-accents-5 hover:text-foreground whitespace-nowrap" data-i18n="reports.yearly">Yearly</button>
    </nav>
</div>

<!-- Daily Tab -->
<div id="content-daily" class="tab-content">
    <div class="table-container">
        <table class="table-glass">
            <thead>
                <tr>
                    <th data-i18n="reports.date">Date</th>
                    <th class="text-right" data-i18n="reports.total">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($daily as $date => $total): ?>
                <tr>
                    <td><?= $date ?></td>
                    <td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Monthly Tab -->
<div id="content-monthly" class="tab-content hidden">
    <div class="table-container">
        <table class="table-glass">
             <thead>
                <tr>
                    <th data-i18n="reports.month">Month</th>
                    <th class="text-right" data-i18n="reports.total">Total</th>
                </tr>
            </thead>
             <tbody>
                <?php foreach ($monthly as $date => $total): ?>
                <tr>
                    <td><?= $date ?></td>
                    <td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Yearly Tab -->
<div id="content-yearly" class="tab-content hidden">
     <div class="table-container">
        <table class="table-glass">
             <thead>
                <tr>
                    <th data-i18n="reports.year">Year</th>
                    <th class="text-right" data-i18n="reports.total">Total</th>
                </tr>
            </thead>
             <tbody>
                <?php foreach ($yearly as $date => $total): ?>
                <tr>
                    <td><?= $date ?></td>
                    <td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
function switchTab(tabName) {
    // Hide all contents
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    // Show selected
    document.getElementById('content-' + tabName).classList.remove('hidden');

    // Reset tab styles
    document.querySelectorAll('nav button').forEach(el => {
        el.classList.remove('border-primary', 'text-primary');
        el.classList.add('border-transparent', 'text-accents-5');
    });

    // Active tab style
    const btn = document.getElementById('tab-' + tabName);
    btn.classList.remove('border-transparent', 'text-accents-5');
    btn.classList.add('border-primary', 'text-primary');
}
</script>

<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>