update

Author: devnamdev2003

assets/js/homeSection.js

@@ -1,12 +1,49 @@
 import { ExpenseService } from './localStorage/expenseLocal.js';
 import { CategoryService } from './localStorage/categoryLocal.js';
+import { BudgetService } from './localStorage/budgetLocal.js';
 
 let charts = {};
 
 function loadDashboardData() {
+    const expenses = ExpenseService.getAll();
+    const categories = CategoryService.getAll();
+
+    // Budget Section
+    const budgets = BudgetService.getAll();
+    const budgetSection = document.getElementById("budgetSection");
+    const budgetBar = document.getElementById("budgetProgressBar");
+    const budgetText = document.getElementById("budgetStatusText");
+
+    if (budgets.length > 0) {
+        const latestBudget = budgets[budgets.length - 1];
+        const totalBudget = parseFloat(latestBudget.amount);
+        const fromDate = new Date(latestBudget.fromDate);
+        const toDate = new Date(latestBudget.toDate);
+
+        const expensesInBudgetRange = expenses.filter(exp => {
+            const expDate = new Date(exp.date);
+            return expDate >= fromDate && expDate <= toDate;
+        });
+
+        const spent = expensesInBudgetRange.reduce((acc, curr) => acc + parseFloat(curr.amount), 0);
+        const percentage = Math.min(((spent / totalBudget) * 100), 100).toFixed(1);
+
+        budgetBar.style.width = `${percentage}%`;
+        budgetBar.innerText = `${percentage}%`;
+
+        budgetText.innerText = `You have spent ₹${spent.toFixed(2)} out of ₹${totalBudget.toFixed(2)} between ${latestBudget.fromDate} and ${latestBudget.toDate}.`;
+
+        // ✅ Show the section
+        budgetSection.classList.remove("hidden");
+
+    } else {
+        // ❌ Hide the section
+        budgetSection.classList.add("hidden");
+    }
+
+
     try {
-        const expenses = ExpenseService.getAll();
-        const categories = CategoryService.getAll();
+
         const categoryMap = {};
         categories.forEach((cat) => {
             categoryMap[cat.category_id] = cat.name;

index.html

@@ -117,13 +117,26 @@ <h1 class="text-lg font-semibold">Expense Tracker</h1>
     <main class="flex-1 p-6 overflow-y-auto w-full h-full">
       <!-- 🏠 Home Section -->
       <section id="home" class="section grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- 🔥 Budget Progress Section -->
+        <div id="budgetSection" class="bg-surface p-6 rounded-lg shadow-md col-span-1 md:col-span-2 hidden">
+          <h2 class="text-xl font-semibold mb-4">💰 Budget Progress</h2>
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+            <div id="budgetProgressBar"
+              class="h-full bg-[var(--color-accent)] text-white text-sm font-medium text-center leading-6 rounded-full transition-all duration-500 ease-in-out">
+              0%
+            </div>
+          </div>
+          <p id="budgetStatusText" class="mt-2 text-sm text-[var(--color-text)]"></p>
+        </div>
+
         <!-- Daily Spending -->
         <div class="bg-surface p-4 rounded shadow flex justify-center">
           <div class="w-full max-w-xl">
             <h2 class="text-lg font-semibold mb-2" id="today-spending-home"></h2>
             <canvas id="dailyChart" class="w-full h-auto"></canvas>
           </div>
         </div>
+
         <!-- Last 7 Days Spending -->
         <div class="bg-surface p-4 rounded shadow flex flex-col">
           <h2 class="text-lg font-semibold mb-2 text-left" id="last-7days-spending-home"></h2>
@@ -133,6 +146,7 @@ <h2 class="text-lg font-semibold mb-2 text-left" id="last-7days-spending-home"><
             </div>
           </div>
         </div>
+
         <!-- Category Expenses -->
         <div class="bg-surface p-4 rounded shadow flex flex-col">
           <h2 class="text-lg font-semibold mb-2 text-left">💹 Category Overview</h2>
@@ -483,7 +497,8 @@ <h2 class="text-lg font-semibold">Set Budget</h2>
               <p id="amountError" class="text-red-500 text-sm hidden mt-1"></p>
             </div>
 
-            <button type="submit" id="budgetModalSubmitButton" class="bg-[var(--color-accent)] text-white px-4 py-2 rounded w-full"></button>
+            <button type="submit" id="budgetModalSubmitButton"
+              class="bg-[var(--color-accent)] text-white px-4 py-2 rounded w-full"></button>
           </form>
         </dialog>