examples/basic_tools/expense_tracker/index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expense Tracker</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns/dist/date-fns.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --background-color: #f5f5f5;
            --text-color: #333;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 1rem;
        }

        h1, h2 {
            margin-bottom: 1rem;
        }

        form {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        input, select, button {
            display: block;
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #27ae60;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background-color: white;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: var(--primary-color);
            color: white;
        }

        .charts {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .chart {
            width: calc(50% - 10px);
            margin-bottom: 20px;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .chart {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Expense Tracker</h1>
    </header>

    <div class="container">
        <form id="expense-form">
            <h2>Add/Edit Expense</h2>
            <input type="hidden" id="expense-id">
            <input type="date" id="expense-date" required>
            <input type="number" id="expense-amount" placeholder="Amount" step="0.01" required>
            <input type="text" id="expense-description" placeholder="Description" required>
            <select id="expense-category" required></select>
            <label>
                <input type="checkbox" id="expense-recurring">
                Recurring Expense
            </label>
            <button type="submit">Save Expense</button>
        </form>

        <div>
            <h2>Expenses</h2>
            <input type="date" id="filter-start-date">
            <input type="date" id="filter-end-date">
            <button id="filter-button">Filter</button>
            <table id="expenses-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Description</th>
                        <th>Category</th>
                        <th>Recurring</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="charts">
            <div class="chart">
                <canvas id="category-chart"></canvas>
            </div>
            <div class="chart">
                <canvas id="monthly-chart"></canvas>
            </div>
            <div class="chart">
                <canvas id="trend-chart"></canvas>
            </div>
        </div>

        <div>
            <h2>Categories</h2>
            <form id="category-form">
                <input type="text" id="category-name" placeholder="Category Name" required>
                <button type="submit">Add Category</button>
            </form>
            <ul id="categories-list"></ul>
        </div>
    </div>

    <script>
        const API_URL = 'http://localhost:7896';
        let expenses = [];
        let categories = [];

        // Fetch expenses
        async function fetchExpenses() {
            try {
                const response = await axios.get(`${API_URL}/expenses`);
                expenses = response.data;
                renderExpensesTable();
                updateCharts();
            } catch (error) {
                console.error('Error fetching expenses:', error);
            }
        }

        // Fetch categories
        async function fetchCategories() {
            try {
                const response = await axios.get(`${API_URL}/categories`);
                categories = response.data;
                renderCategoriesSelect();
                renderCategoriesList();
            } catch (error) {
                console.error('Error fetching categories:', error);
            }
        }

        // Render expenses table
        function renderExpensesTable() {
            const tbody = document.querySelector('#expenses-table tbody');
            tbody.innerHTML = '';
            expenses.forEach(expense => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${expense.date}</td>
                    <td>$${expense.amount.toFixed(2)}</td>
                    <td>${expense.description}</td>
                    <td>${getCategoryName(expense.category_id)}</td>
                    <td>${expense.is_recurring ? 'Yes' : 'No'}</td>
                    <td>
                        <button onclick="editExpense(${expense.id})">Edit</button>
                        <button onclick="deleteExpense(${expense.id})">Delete</button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // Render categories select
        function renderCategoriesSelect() {
            const select = document.getElementById('expense-category');
            select.innerHTML = '';
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = category.name;
                select.appendChild(option);
            });
        }

        // Render categories list
        function renderCategoriesList() {
            const ul = document.getElementById('categories-list');
            ul.innerHTML = '';
            categories.forEach(category => {
                const li = document.createElement('li');
                li.textContent = category.name;
                ul.appendChild(li);
            });
        }

        // Get category name by id
        function getCategoryName(id) {
            const category = categories.find(c => c.id === id);
            return category ? category.name : 'Unknown';
        }

        // Add or edit expense
        document.getElementById('expense-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const id = document.getElementById('expense-id').value;
            const expense = {
                date: document.getElementById('expense-date').value,
                amount: parseFloat(document.getElementById('expense-amount').value),
                description: document.getElementById('expense-description').value,
                category_id: parseInt(document.getElementById('expense-category').value),
                is_recurring: document.getElementById('expense-recurring').checked
            };

            try {
                if (id) {
                    await axios.put(`${API_URL}/expenses/${id}`, expense);
                } else {
                    await axios.post(`${API_URL}/expenses`, expense);
                }
                document.getElementById('expense-form').reset();
                document.getElementById('expense-id').value = '';
                fetchExpenses();
            } catch (error) {
                console.error('Error saving expense:', error);
            }
        });

        // Edit expense
        function editExpense(id) {
            const expense = expenses.find(e => e.id === id);
            document.getElementById('expense-id').value = expense.id;
            document.getElementById('expense-date').value = expense.date;
            document.getElementById('expense-amount').value = expense.amount;
            document.getElementById('expense-description').value = expense.description;
            document.getElementById('expense-category').value = expense.category_id;
            document.getElementById('expense-recurring').checked = expense.is_recurring;
        }

        // Delete expense
        async function deleteExpense(id) {
            if (confirm('Are you sure you want to delete this expense?')) {
                try {
                    await axios.delete(`${API_URL}/expenses/${id}`);
                    fetchExpenses();
                } catch (error) {
                    console.error('Error deleting expense:', error);
                }
            }
        }

        // Add category
        document.getElementById('category-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('category-name').value;
            try {
                await axios.post(`${API_URL}/categories`, { name });
                document.getElementById('category-form').reset();
                fetchCategories();
            } catch (error) {
                console.error('Error adding category:', error);
            }
        });

        // Update charts
        function updateCharts() {
            updateCategoryChart();
            updateMonthlyChart();
            updateTrendChart();
        }

        // Update category chart
        function updateCategoryChart() {
            const ctx = document.getElementById('category-chart').getContext('2d');
            const categoryTotals = {};
            expenses.forEach(expense => {
                const categoryName = getCategoryName(expense.category_id);
                categoryTotals[categoryName] = (categoryTotals[categoryName] || 0) + expense.amount;
            });

            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: Object.keys(categoryTotals),
                    datasets: [{
                        data: Object.values(categoryTotals),
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Expenses by Category'
                    }
                }
            });
        }

        // Update monthly chart
        function updateMonthlyChart() {
            const ctx = document.getElementById('monthly-chart').getContext('2d');
            const monthlyTotals = {};
            expenses.forEach(expense => {
                const month = expense.date.substring(0, 7); // YYYY-MM
                monthlyTotals[month] = (monthlyTotals[month] || 0) + expense.amount;
            });

            const sortedMonths = Object.keys(monthlyTotals).sort();

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: sortedMonths,
                    datasets: [{
                        label: 'Monthly Spending',
                        data: sortedMonths.map(month => monthlyTotals[month]),
                        backgroundColor: '#36A2EB'
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Monthly Spending'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }

        // Update trend chart
        function updateTrendChart() {
            const ctx = document.getElementById('trend-chart').getContext('2d');
            const dailyTotals = {};
            expenses.forEach(expense => {
                dailyTotals[expense.date] = (dailyTotals[expense.date] || 0) + expense.amount;
            });

            const sortedDates = Object.keys(dailyTotals).sort();

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: sortedDates,
                    datasets: [{
                        label: 'Daily Spending',
                        data: sortedDates.map(date => dailyTotals[date]),
                        borderColor: '#4BC0C0',
                        fill: false
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Spending Trend'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }

        // Filter expenses
        document.getElementById('filter-button').addEventListener('click', () => {
            const startDate = document.getElementById('filter-start-date').value;
            const endDate = document.getElementById('filter-end-date').value;
            
            if (startDate && endDate) {
                const filteredExpenses = expenses.filter(expense => {
                    return expense.date >= startDate && expense.date <= endDate;
                });
                renderFilteredExpenses(filteredExpenses);
            } else {
                renderExpensesTable();
            }
        });

        // Render filtered expenses
        function renderFilteredExpenses(filteredExpenses) {
            const tbody = document.querySelector('#expenses-table tbody');
            tbody.innerHTML = '';
            filteredExpenses.forEach(expense => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${expense.date}</td>
                    <td>$${expense.amount.toFixed(2)}</td>
                    <td>${expense.description}</td>
                    <td>${getCategoryName(expense.category_id)}</td>
                    <td>${expense.is_recurring ? 'Yes' : 'No'}</td>
                    <td>
                        <button onclick="editExpense(${expense.id})">Edit</button>
                        <button onclick="deleteExpense(${expense.id})">Delete</button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // Initialize
        fetchExpenses();
        fetchCategories();
    </script>
</body>
</html>