Dashboard Temp Share Shortlinks Frames API

HTMLify

report.html
Views: 45 | Author: karbonsites 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expense Tracker - Report</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <header>
        <nav>
            <div class="logo">SpendWise</div>
            <ul class="nav-links">
                <li><a href="index.html">Dashboard</a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="report.html" class="active">Report</a></li>
            </ul>
        </nav>
    </header>

    <main class="report-container">
        <section class="report-controls card" data-animate>
            <h2>Category Breakdown Report</h2>
            <div class="filter-group">
                <label for="report-month-filter">Select Month:</label>
                <select id="report-month-filter">
                    <option value="all">All Time</option>
                    <!-- Options populated by JS -->
                </select>
            </div>
            <div class="summary-report">
                <p>Total Expenses this Period: <span id="report-expense-total">₹0.00</span></p>
                <p>Total Income this Period: <span id="report-income-total">₹0.00</span></p>
            </div>
        </section>

        <section class="report-charts card" data-animate>
            <h3>Expense Distribution</h3>
            <div class="chart-wrapper">
                <canvas id="categoryDoughnutChart"></canvas>
            </div>
        </section>

        <section class="detailed-report card" data-animate>
            <h3>Category Totals</h3>
            <ul id="category-totals-list">
                <!-- Detailed list populated here -->
            </ul>
        </section>
    </main>

    <script src="app.js"></script>
</body>
</html>

Share this file: