From a81f4537b06737bcb5d7566326d2ad39419b246f Mon Sep 17 00:00:00 2001
From: MistryVishwa <vishwamistry18@gmail.com>
Date: Sat, 13 Jun 2026 19:47:01 +0530
Subject: [PATCH 1/3] feat: Add Subscription Management Dashboard project

---
 .../README.md                                 |  17 +
 .../index.html                                | 200 ++++++
 .../project.json                              |  16 +
 .../script.js                                 | 330 ++++++++++
 .../style.css                                 | 607 ++++++++++++++++++
 5 files changed, 1170 insertions(+)
 create mode 100644 Projects/subscription-management-dashboard/README.md
 create mode 100644 Projects/subscription-management-dashboard/index.html
 create mode 100644 Projects/subscription-management-dashboard/project.json
 create mode 100644 Projects/subscription-management-dashboard/script.js
 create mode 100644 Projects/subscription-management-dashboard/style.css
diff --git a/Projects/subscription-management-dashboard/README.md b/Projects/subscription-management-dashboard/README.md
new file mode 100644
index 00000000..fe21b73a
--- /dev/null
+++ b/Projects/subscription-management-dashboard/README.md
@@ -0,0 +1,17 @@
+# Subscription Management Dashboard
+
+A centralized platform to track, manage, and analyze all your recurring subscriptions. 
+
+## Features
+- **Subscription Management**: Add, edit, and delete subscriptions.
+- **Categorization**: Organize by Streaming, Productivity, Gaming, etc.
+- **Expense Dashboard**: View monthly/annual spending and category breakdowns.
+- **Renewal Tracking**: Monitor upcoming renewals and expiration dates.
+- **Data Persistence**: Saves your data automatically in Local Storage.
+- **Theme Support**: Toggle between Light and Dark mode.
+
+## How to Run
+Simply open `index.html` in your web browser. All data is saved automatically in your browser's local storage.
+
+## Author
+[MistryVishwa](https://github.com/MistryVishwa)
diff --git a/Projects/subscription-management-dashboard/index.html b/Projects/subscription-management-dashboard/index.html
new file mode 100644
index 00000000..5aed58c1
--- /dev/null
+++ b/Projects/subscription-management-dashboard/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Subscription Management Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="brand">
+                <div class="logo">S</div>
+                <h2>SubManager</h2>
+            </div>
+            <nav class="nav-menu">
+                <button class="nav-item active" data-view="dashboard">
+                    <span class="icon">📊</span> Dashboard
+                </button>
+                <button class="nav-item" data-view="subscriptions">
+                    <span class="icon">📋</span> Subscriptions
+                </button>
+                <button class="nav-item" data-view="analytics">
+                    <span class="icon">📈</span> Analytics
+                </button>
+            </nav>
+            <div class="sidebar-bottom">
+                <button id="themeToggle" class="theme-toggle">
+                    <span class="icon">🌓</span> Toggle Theme
+                </button>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <header class="top-header">
+                <h1>Overview</h1>
+                <div class="header-actions">
+                    <div class="search-bar">
+                        <span class="icon">🔍</span>
+                        <input type="text" id="searchInput" placeholder="Search subscriptions...">
+                    </div>
+                    <button class="btn btn-primary" id="addBtn">+ New Subscription</button>
+                </div>
+            </header>
+
+            <!-- Dashboard View -->
+            <section id="dashboardView" class="view-section active">
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-title">Monthly Cost</div>
+                        <div class="stat-value" id="monthlyCost">$0.00</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-title">Annual Cost</div>
+                        <div class="stat-value" id="annualCost">$0.00</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-title">Active Subscriptions</div>
+                        <div class="stat-value" id="activeSubs">0</div>
+                    </div>
+                    <div class="stat-card warning-card">
+                        <div class="stat-title">Upcoming Renewals (7 Days)</div>
+                        <div class="stat-value" id="upcomingRenewals">0</div>
+                    </div>
+                </div>
+
+                <div class="dashboard-grid">
+                    <div class="card subscriptions-list-preview">
+                        <div class="card-header">
+                            <h3>Upcoming Renewals</h3>
+                            <button class="btn btn-text" onclick="document.querySelector('[data-view=subscriptions]').click()">View All</button>
+                        </div>
+                        <div class="list-container" id="upcomingList">
+                            <!-- Populated by JS -->
+                        </div>
+                    </div>
+                    
+                    <div class="card category-breakdown">
+                        <div class="card-header">
+                            <h3>Expense by Category</h3>
+                        </div>
+                        <div class="category-bars" id="categoryBars">
+                            <!-- Populated by JS -->
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Subscriptions View -->
+            <section id="subscriptionsView" class="view-section">
+                <div class="filters-bar">
+                    <select id="filterCategory" class="input-field">
+                        <option value="All">All Categories</option>
+                        <option value="Streaming Services">Streaming Services</option>
+                        <option value="Music Platforms">Music Platforms</option>
+                        <option value="Cloud Storage">Cloud Storage</option>
+                        <option value="Productivity Tools">Productivity Tools</option>
+                        <option value="Online Learning Platforms">Online Learning Platforms</option>
+                        <option value="Gaming Memberships">Gaming Memberships</option>
+                        <option value="Software Licenses">Software Licenses</option>
+                        <option value="News & Magazines">News & Magazines</option>
+                        <option value="Fitness Applications">Fitness Applications</option>
+                        <option value="Custom">Custom</option>
+                    </select>
+                    <select id="sortOption" class="input-field">
+                        <option value="date-asc">Renewal Date (Soonest)</option>
+                        <option value="cost-desc">Cost (Highest)</option>
+                        <option value="cost-asc">Cost (Lowest)</option>
+                    </select>
+                </div>
+                
+                <div class="subs-grid" id="subsGrid">
+                    <!-- Populated by JS -->
+                </div>
+                <div id="emptySubs" class="empty-state hidden">
+                    <div class="empty-icon">📂</div>
+                    <p>No subscriptions found. Add your first one!</p>
+                </div>
+            </section>
+
+            <!-- Analytics View -->
+            <section id="analyticsView" class="view-section">
+                <div class="card">
+                    <div class="card-header">
+                        <h3>Financial Insights</h3>
+                    </div>
+                    <div class="insights-grid" id="insightsContainer">
+                        <!-- Populated by JS -->
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modal Form -->
+    <div class="modal-overlay hidden" id="subModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modalTitle">Add Subscription</h2>
+                <button class="close-btn" id="closeModal">✕</button>
+            </div>
+            <form id="subForm">
+                <input type="hidden" id="subId">
+                <div class="form-group">
+                    <label>Service Name</label>
+                    <input type="text" id="subName" class="input-field" required placeholder="e.g. Netflix">
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Cost ($)</label>
+                        <input type="number" id="subCost" class="input-field" step="0.01" required placeholder="15.99">
+                    </div>
+                    <div class="form-group">
+                        <label>Billing Cycle</label>
+                        <select id="subCycle" class="input-field" required>
+                            <option value="Monthly">Monthly</option>
+                            <option value="Yearly">Yearly</option>
+                            <option value="Weekly">Weekly</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Category</label>
+                        <select id="subCategory" class="input-field" required>
+                            <option value="Streaming Services">Streaming Services</option>
+                            <option value="Music Platforms">Music Platforms</option>
+                            <option value="Cloud Storage">Cloud Storage</option>
+                            <option value="Productivity Tools">Productivity Tools</option>
+                            <option value="Online Learning Platforms">Online Learning Platforms</option>
+                            <option value="Gaming Memberships">Gaming Memberships</option>
+                            <option value="Software Licenses">Software Licenses</option>
+                            <option value="News & Magazines">News & Magazines</option>
+                            <option value="Fitness Applications">Fitness Applications</option>
+                            <option value="Custom">Custom</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Next Renewal Date</label>
+                        <input type="date" id="subDate" class="input-field" required>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Notes (Optional)</label>
+                    <input type="text" id="subNotes" class="input-field" placeholder="Account info, shared with family, etc.">
+                </div>
+                <div class="form-actions">
+                    <button type="button" class="btn btn-outline" id="cancelBtn">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save Subscription</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/subscription-management-dashboard/project.json b/Projects/subscription-management-dashboard/project.json
new file mode 100644
index 00000000..48f7014d
--- /dev/null
+++ b/Projects/subscription-management-dashboard/project.json
@@ -0,0 +1,16 @@
+{
+  "name": "Subscription Management Dashboard",
+  "description": "Track, manage, and analyze all your recurring subscriptions and monthly expenses in one place.",
+  "author": "MistryVishwa",
+  "github": "MistryVishwa",
+  "tags": [
+    "enhancement",
+    "good first issue",
+    "javascript",
+    "frontend",
+    "finance",
+    "dashboard",
+    "subscription-management"
+  ],
+  "folder_name": "subscription-management-dashboard"
+}
diff --git a/Projects/subscription-management-dashboard/script.js b/Projects/subscription-management-dashboard/script.js
new file mode 100644
index 00000000..32a60aaa
--- /dev/null
+++ b/Projects/subscription-management-dashboard/script.js
@@ -0,0 +1,330 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- State ---
+    let subscriptions = JSON.parse(localStorage.getItem('sm_subs')) || [];
+    
+    if (subscriptions.length === 0) {
+        subscriptions = [
+            { id: '1', name: 'Netflix', cost: 15.49, cycle: 'Monthly', category: 'Streaming Services', date: getFutureDate(5), notes: 'Family Plan' },
+            { id: '2', name: 'Spotify', cost: 9.99, cycle: 'Monthly', category: 'Music Platforms', date: getFutureDate(12), notes: '' },
+            { id: '3', name: 'Adobe CC', cost: 54.99, cycle: 'Monthly', category: 'Productivity Tools', date: getFutureDate(2), notes: 'Work' },
+            { id: '4', name: 'Amazon Prime', cost: 139.00, cycle: 'Yearly', category: 'Streaming Services', date: getFutureDate(45), notes: 'Annual renewal' }
+        ];
+        saveData();
+    }
+
+    // --- DOM Elements ---
+    const navItems = document.querySelectorAll('.nav-item');
+    const sections = document.querySelectorAll('.view-section');
+    const themeToggle = document.getElementById('themeToggle');
+    
+    const subsGrid = document.getElementById('subsGrid');
+    const upcomingList = document.getElementById('upcomingList');
+    const categoryBars = document.getElementById('categoryBars');
+    const insightsContainer = document.getElementById('insightsContainer');
+    
+    const searchInput = document.getElementById('searchInput');
+    const filterCategory = document.getElementById('filterCategory');
+    const sortOption = document.getElementById('sortOption');
+
+    const subModal = document.getElementById('subModal');
+    const subForm = document.getElementById('subForm');
+    const addBtn = document.getElementById('addBtn');
+    const closeModalBtn = document.getElementById('closeModal');
+    const cancelBtn = document.getElementById('cancelBtn');
+
+    // --- Initialization ---
+    const savedTheme = localStorage.getItem('sm_theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+
+    function getFutureDate(daysOut) {
+        const d = new Date();
+        d.setDate(d.getDate() + daysOut);
+        return d.toISOString().split('T')[0];
+    }
+
+    function calculateMonthlyCost(cost, cycle) {
+        if (cycle === 'Yearly') return cost / 12;
+        if (cycle === 'Weekly') return cost * 4.33;
+        return cost;
+    }
+
+    function calculateAnnualCost(cost, cycle) {
+        if (cycle === 'Monthly') return cost * 12;
+        if (cycle === 'Weekly') return cost * 52;
+        return cost;
+    }
+
+    function formatCurrency(num) {
+        return '$' + parseFloat(num).toFixed(2);
+    }
+
+    function calculateDaysUntil(dateStr) {
+        const today = new Date();
+        today.setHours(0,0,0,0);
+        const target = new Date(dateStr);
+        target.setHours(0,0,0,0);
+        const diffTime = target - today;
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    }
+
+    function saveData() {
+        localStorage.setItem('sm_subs', JSON.stringify(subscriptions));
+        updateUI();
+    }
+
+    // --- Navigation & Theme ---
+    navItems.forEach(btn => {
+        btn.addEventListener('click', () => {
+            navItems.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            sections.forEach(s => s.classList.remove('active'));
+            const targetView = document.getElementById(btn.dataset.view + 'View');
+            if(targetView) targetView.classList.add('active');
+            document.querySelector('.top-header h1').textContent = btn.textContent.trim();
+        });
+    });
+
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const newTheme = isDark ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('sm_theme', newTheme);
+    });
+
+    // --- Modal Management ---
+    function openModal(id = null) {
+        if (id) {
+            const sub = subscriptions.find(s => s.id === id);
+            document.getElementById('subId').value = sub.id;
+            document.getElementById('subName').value = sub.name;
+            document.getElementById('subCost').value = sub.cost;
+            document.getElementById('subCycle').value = sub.cycle;
+            document.getElementById('subCategory').value = sub.category;
+            document.getElementById('subDate').value = sub.date;
+            document.getElementById('subNotes').value = sub.notes;
+            document.getElementById('modalTitle').textContent = 'Edit Subscription';
+        } else {
+            subForm.reset();
+            document.getElementById('subId').value = '';
+            document.getElementById('modalTitle').textContent = 'Add Subscription';
+        }
+        subModal.classList.remove('hidden');
+    }
+
+    function closeModal() {
+        subModal.classList.add('hidden');
+    }
+
+    addBtn.addEventListener('click', () => openModal());
+    closeModalBtn.addEventListener('click', closeModal);
+    cancelBtn.addEventListener('click', closeModal);
+
+    subForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const subData = {
+            id: document.getElementById('subId').value || Date.now().toString(),
+            name: document.getElementById('subName').value,
+            cost: parseFloat(document.getElementById('subCost').value),
+            cycle: document.getElementById('subCycle').value,
+            category: document.getElementById('subCategory').value,
+            date: document.getElementById('subDate').value,
+            notes: document.getElementById('subNotes').value
+        };
+
+        const existingIdx = subscriptions.findIndex(s => s.id === subData.id);
+        if (existingIdx >= 0) {
+            subscriptions[existingIdx] = subData;
+        } else {
+            subscriptions.push(subData);
+        }
+
+        closeModal();
+        saveData();
+    });
+
+    window.editSub = (id) => openModal(id);
+    
+    window.deleteSub = (id) => {
+        if(confirm("Are you sure you want to delete this subscription?")) {
+            subscriptions = subscriptions.filter(s => s.id !== id);
+            saveData();
+        }
+    };
+
+    // --- Filters ---
+    [searchInput, filterCategory, sortOption].forEach(el => {
+        el.addEventListener('input', updateUI);
+    });
+
+    function getFilteredSubs() {
+        const query = searchInput.value.toLowerCase();
+        const cat = filterCategory.value;
+        const sort = sortOption.value;
+
+        let filtered = subscriptions.filter(s => {
+            const matchQuery = s.name.toLowerCase().includes(query);
+            const matchCat = cat === 'All' || s.category === cat;
+            return matchQuery && matchCat;
+        });
+
+        if (sort === 'cost-desc') filtered.sort((a,b) => calculateMonthlyCost(b.cost, b.cycle) - calculateMonthlyCost(a.cost, a.cycle));
+        if (sort === 'cost-asc') filtered.sort((a,b) => calculateMonthlyCost(a.cost, a.cycle) - calculateMonthlyCost(b.cost, b.cycle));
+        if (sort === 'date-asc') filtered.sort((a,b) => new Date(a.date) - new Date(b.date));
+
+        return filtered;
+    }
+
+    // --- Rendering ---
+    function updateUI() {
+        renderDashboardStats();
+        renderSubscriptions();
+        renderAnalytics();
+    }
+
+    function renderDashboardStats() {
+        let totalMonthly = 0;
+        let totalAnnual = 0;
+        let renewalsWeek = 0;
+
+        subscriptions.forEach(s => {
+            totalMonthly += calculateMonthlyCost(s.cost, s.cycle);
+            totalAnnual += calculateAnnualCost(s.cost, s.cycle);
+            
+            const days = calculateDaysUntil(s.date);
+            if(days >= 0 && days <= 7) renewalsWeek++;
+        });
+
+        document.getElementById('monthlyCost').textContent = formatCurrency(totalMonthly);
+        document.getElementById('annualCost').textContent = formatCurrency(totalAnnual);
+        document.getElementById('activeSubs').textContent = subscriptions.length;
+        document.getElementById('upcomingRenewals').textContent = renewalsWeek;
+
+        // Upcoming List
+        const sortedByDate = [...subscriptions].sort((a,b) => new Date(a.date) - new Date(b.date)).filter(s => calculateDaysUntil(s.date) >= 0);
+        
+        if (sortedByDate.length === 0) {
+            upcomingList.innerHTML = '<p style="color:var(--text-secondary); font-size:14px">No upcoming renewals.</p>';
+        } else {
+            upcomingList.innerHTML = sortedByDate.slice(0, 4).map(s => {
+                const days = calculateDaysUntil(s.date);
+                let dayText = days === 0 ? 'Today' : days === 1 ? 'Tomorrow' : `In ${days} days`;
+                return `
+                <div class="list-item">
+                    <div class="item-info">
+                        <h4>${s.name}</h4>
+                        <p>${s.category}</p>
+                    </div>
+                    <div class="item-meta">
+                        <div class="cost">${formatCurrency(s.cost)} <span style="font-weight:normal; font-size:12px; color:var(--text-secondary)">/${s.cycle.substring(0,2)}</span></div>
+                        <div class="date" style="${days <= 3 ? 'color:var(--warning); font-weight:600;' : ''}">${dayText}</div>
+                    </div>
+                </div>
+                `;
+            }).join('');
+        }
+
+        // Category Breakdown
+        const catMap = {};
+        subscriptions.forEach(s => {
+            if(!catMap[s.category]) catMap[s.category] = 0;
+            catMap[s.category] += calculateMonthlyCost(s.cost, s.cycle);
+        });
+
+        const catArray = Object.keys(catMap).map(k => ({ name: k, amount: catMap[k] })).sort((a,b) => b.amount - a.amount);
+        
+        if (catArray.length === 0) {
+            categoryBars.innerHTML = '<p style="color:var(--text-secondary); font-size:14px">No data to display.</p>';
+        } else {
+            const maxVal = Math.max(...catArray.map(c => c.amount));
+            categoryBars.innerHTML = catArray.map(c => {
+                const pct = (c.amount / maxVal) * 100;
+                return `
+                <div class="cat-bar-container">
+                    <div class="cat-bar-header">
+                        <span>${c.name}</span>
+                        <span>${formatCurrency(c.amount)}/mo</span>
+                    </div>
+                    <div class="cat-bar-bg">
+                        <div class="cat-bar-fill" style="width: ${pct}%"></div>
+                    </div>
+                </div>
+                `;
+            }).join('');
+        }
+    }
+
+    function renderSubscriptions() {
+        const filtered = getFilteredSubs();
+        const emptyState = document.getElementById('emptySubs');
+        
+        if (filtered.length === 0) {
+            subsGrid.innerHTML = '';
+            emptyState.classList.remove('hidden');
+        } else {
+            emptyState.classList.add('hidden');
+            subsGrid.innerHTML = filtered.map(s => {
+                const days = calculateDaysUntil(s.date);
+                let dayText = days < 0 ? 'Expired' : days === 0 ? 'Renews Today' : `Renews in ${days} days`;
+                
+                return `
+                <div class="sub-card">
+                    <div class="sub-card-header">
+                        <div>
+                            <h3 style="margin-bottom:4px">${s.name}</h3>
+                            <span class="sub-badge">${s.category}</span>
+                        </div>
+                    </div>
+                    <div class="sub-card-body">
+                        <div class="sub-price">${formatCurrency(s.cost)}</div>
+                        <div class="sub-cycle">per ${s.cycle.toLowerCase()}</div>
+                    </div>
+                    <div class="sub-card-footer">
+                        <div class="sub-date" style="${days <= 3 && days >= 0 ? 'color:var(--warning); font-weight:600;' : days < 0 ? 'color:var(--danger); font-weight:600;' : ''}">
+                            ${dayText} (${s.date})
+                        </div>
+                        <div class="sub-actions">
+                            <button class="icon-btn" onclick="editSub('${s.id}')" title="Edit">✎</button>
+                            <button class="icon-btn delete" onclick="deleteSub('${s.id}')" title="Delete">🗑</button>
+                        </div>
+                    </div>
+                </div>
+                `;
+            }).join('');
+        }
+    }
+
+    function renderAnalytics() {
+        if(subscriptions.length === 0){
+            insightsContainer.innerHTML = '<p style="color:var(--text-secondary)">Not enough data to generate insights. Add subscriptions first.</p>';
+            return;
+        }
+
+        let maxSub = subscriptions[0];
+        subscriptions.forEach(s => {
+            if(calculateMonthlyCost(s.cost, s.cycle) > calculateMonthlyCost(maxSub.cost, maxSub.cycle)) {
+                maxSub = s;
+            }
+        });
+
+        const annTotal = subscriptions.reduce((sum, s) => sum + calculateAnnualCost(s.cost, s.cycle), 0);
+
+        insightsContainer.innerHTML = `
+            <div class="insight-item">
+                <h4 style="margin-bottom:8px">Highest Expense</h4>
+                <p style="color:var(--text-secondary); font-size:14px">Your most expensive subscription is <strong>${maxSub.name}</strong>, costing you <strong>${formatCurrency(calculateMonthlyCost(maxSub.cost, maxSub.cycle))}</strong> per month.</p>
+            </div>
+            <div class="insight-item">
+                <h4 style="margin-bottom:8px">Yearly Projection</h4>
+                <p style="color:var(--text-secondary); font-size:14px">If you keep your current subscriptions, you will spend <strong>${formatCurrency(annTotal)}</strong> over the next year.</p>
+            </div>
+            <div class="insight-item">
+                <h4 style="margin-bottom:8px">Optimization Tip</h4>
+                <p style="color:var(--text-secondary); font-size:14px">Review your "Streaming Services" subscriptions. Consolidating services can often save 15-20% annually.</p>
+            </div>
+        `;
+    }
+
+    // Initial render
+    updateUI();
+});
diff --git a/Projects/subscription-management-dashboard/style.css b/Projects/subscription-management-dashboard/style.css
new file mode 100644
index 00000000..b6b340a2
--- /dev/null
+++ b/Projects/subscription-management-dashboard/style.css
@@ -0,0 +1,607 @@
+:root {
+    /* Light Theme Variables */
+    --bg-main: #f3f4f6;
+    --bg-card: #ffffff;
+    --bg-sidebar: #ffffff;
+    
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    
+    --primary: #4f46e5;
+    --primary-hover: #4338ca;
+    
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    
+    --border: #e5e7eb;
+    
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] {
+    --bg-main: #111827;
+    --bg-card: #1f2937;
+    --bg-sidebar: #1f2937;
+    
+    --text-primary: #f9fafb;
+    --text-secondary: #9ca3af;
+    
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    
+    --border: #374151;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-main);
+    color: var(--text-primary);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Layout */
+.app-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.sidebar {
+    width: 260px;
+    background-color: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 24px 0;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 24px;
+    margin-bottom: 40px;
+}
+
+.logo {
+    width: 40px;
+    height: 40px;
+    background-color: var(--primary);
+    color: white;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.brand h2 {
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.nav-menu {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0 16px;
+}
+
+.nav-item, .theme-toggle {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 15px;
+    font-weight: 500;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.nav-item:hover, .theme-toggle:hover {
+    background-color: rgba(79, 70, 229, 0.1);
+    color: var(--primary);
+}
+
+.nav-item.active {
+    background-color: var(--primary);
+    color: white;
+}
+
+.sidebar-bottom {
+    padding: 0 16px;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 32px 40px;
+}
+
+.top-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+}
+
+.top-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+}
+
+.header-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 16px;
+    width: 300px;
+}
+
+.search-bar .icon {
+    color: var(--text-secondary);
+    margin-right: 8px;
+}
+
+.search-bar input {
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--text-primary);
+    width: 100%;
+    font-family: inherit;
+}
+
+.btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    font-size: 14px;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-hover);
+}
+
+.btn-outline {
+    background-color: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+}
+
+.btn-outline:hover {
+    background-color: var(--bg-card);
+}
+
+.btn-text {
+    background: transparent;
+    color: var(--primary);
+    padding: 0;
+}
+
+.btn-text:hover {
+    text-decoration: underline;
+}
+
+/* Views */
+.view-section {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.view-section.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Dashboard Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background-color: var(--bg-card);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border);
+}
+
+.stat-title {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.warning-card .stat-value {
+    color: var(--warning);
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 24px;
+}
+
+.card {
+    background-color: var(--bg-card);
+    border-radius: 12px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border);
+    padding: 24px;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.card-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.list-item:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.item-info h4 {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.item-info p {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.item-meta {
+    text-align: right;
+}
+
+.item-meta .cost {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.item-meta .date {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+/* Category Bars */
+.category-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.cat-bar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cat-bar-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.cat-bar-bg {
+    height: 8px;
+    background-color: var(--bg-main);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.cat-bar-fill {
+    height: 100%;
+    background-color: var(--primary);
+    border-radius: 4px;
+}
+
+/* Subscriptions View */
+.filters-bar {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.subs-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+}
+
+.sub-card {
+    background-color: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.sub-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.sub-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+}
+
+.sub-badge {
+    background-color: rgba(79, 70, 229, 0.1);
+    color: var(--primary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.sub-card-body {
+    margin-bottom: 20px;
+}
+
+.sub-price {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.sub-cycle {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.sub-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.sub-date {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.sub-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.icon-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 16px;
+    transition: color 0.2s;
+}
+
+.icon-btn:hover {
+    color: var(--primary);
+}
+
+.icon-btn.delete:hover {
+    color: var(--danger);
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 1;
+    transition: opacity 0.3s;
+}
+
+.modal-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal-content {
+    background-color: var(--bg-card);
+    width: 100%;
+    max-width: 500px;
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    padding: 24px;
+    transform: translateY(0);
+    transition: transform 0.3s;
+}
+
+.modal-overlay.hidden .modal-content {
+    transform: translateY(20px);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.close-btn {
+    background: transparent;
+    border: none;
+    font-size: 20px;
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+
+.form-group {
+    margin-bottom: 16px;
+    width: 100%;
+}
+
+.form-row {
+    display: flex;
+    gap: 16px;
+}
+
+label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: var(--text-secondary);
+}
+
+.input-field {
+    width: 100%;
+    background-color: var(--bg-main);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    padding: 10px 12px;
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.input-field:focus {
+    border-color: var(--primary);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 24px;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 60px 0;
+    color: var(--text-secondary);
+}
+
+.empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+}
+
+.insights-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.insight-item {
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--bg-main);
+    border-left: 4px solid var(--primary);
+}
+
+@media (max-width: 768px) {
+    .app-container {
+        flex-direction: column;
+    }
+    .sidebar {
+        width: 100%;
+        height: auto;
+        padding: 16px;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .brand { margin-bottom: 0; padding: 0; }
+    .nav-menu { flex-direction: row; padding: 0; gap: 8px; justify-content: center; }
+    .nav-item span { display: none; }
+    .nav-item { padding: 8px; justify-content: center; }
+    .sidebar-bottom { padding: 0; }
+    .theme-toggle span { display: none; }
+    
+    .stats-grid { grid-template-columns: 1fr 1fr; }
+    .dashboard-grid { grid-template-columns: 1fr; }
+    .form-row { flex-direction: column; gap: 0; }
+    .search-bar { width: 200px; }
+}
+@media (max-width: 480px) {
+    .stats-grid { grid-template-columns: 1fr; }
+    .top-header { flex-direction: column; align-items: flex-start; gap: 16px; }
+    .search-bar { width: 100%; }
+}

From 176d8caade93bedd5a61478d3f2e0673f929bc0c Mon Sep 17 00:00:00 2001
From: MistryVishwa <vishwamistry18@gmail.com>
Date: Sat, 13 Jun 2026 22:25:15 +0530
Subject: [PATCH 2/3] fix: rename project folder and title to Title Case

---
 .../README.md                                                   | 0
 .../index.html                                                  | 0
 .../project.json                                                | 2 +-
 .../script.js                                                   | 0
 .../style.css                                                   | 0
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename Projects/{subscription-management-dashboard => Pro Subscription Management Dashboard}/README.md (100%)
 rename Projects/{subscription-management-dashboard => Pro Subscription Management Dashboard}/index.html (100%)
 rename Projects/{subscription-management-dashboard => Pro Subscription Management Dashboard}/project.json (88%)
 rename Projects/{subscription-management-dashboard => Pro Subscription Management Dashboard}/script.js (100%)
 rename Projects/{subscription-management-dashboard => Pro Subscription Management Dashboard}/style.css (100%)

diff --git a/Projects/subscription-management-dashboard/README.md b/Projects/Pro Subscription Management Dashboard/README.md
similarity index 100%
rename from Projects/subscription-management-dashboard/README.md
rename to Projects/Pro Subscription Management Dashboard/README.md
diff --git a/Projects/subscription-management-dashboard/index.html b/Projects/Pro Subscription Management Dashboard/index.html
similarity index 100%
rename from Projects/subscription-management-dashboard/index.html
rename to Projects/Pro Subscription Management Dashboard/index.html
diff --git a/Projects/subscription-management-dashboard/project.json b/Projects/Pro Subscription Management Dashboard/project.json
similarity index 88%
rename from Projects/subscription-management-dashboard/project.json
rename to Projects/Pro Subscription Management Dashboard/project.json
index 48f7014d..c80bd06c 100644
--- a/Projects/subscription-management-dashboard/project.json
+++ b/Projects/Pro Subscription Management Dashboard/project.json	
@@ -1,5 +1,5 @@
 {
-  "name": "Subscription Management Dashboard",
+  "name": "Pro Subscription Management Dashboard",
   "description": "Track, manage, and analyze all your recurring subscriptions and monthly expenses in one place.",
   "author": "MistryVishwa",
   "github": "MistryVishwa",
diff --git a/Projects/subscription-management-dashboard/script.js b/Projects/Pro Subscription Management Dashboard/script.js
similarity index 100%
rename from Projects/subscription-management-dashboard/script.js
rename to Projects/Pro Subscription Management Dashboard/script.js
diff --git a/Projects/subscription-management-dashboard/style.css b/Projects/Pro Subscription Management Dashboard/style.css
similarity index 100%
rename from Projects/subscription-management-dashboard/style.css
rename to Projects/Pro Subscription Management Dashboard/style.css

From 448fa8af43ab3f1bd6a884795d88b5ef0b68b24e Mon Sep 17 00:00:00 2001
From: MistryVishwa <vishwamistry18@gmail.com>
Date: Sun, 14 Jun 2026 14:12:01 +0530
Subject: [PATCH 3/3] fix: Format project.json to match exact template schema

---
 .../project.json                                  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/Projects/Pro Subscription Management Dashboard/project.json b/Projects/Pro Subscription Management Dashboard/project.json
index c80bd06c..077d931a 100644
--- a/Projects/Pro Subscription Management Dashboard/project.json	
+++ b/Projects/Pro Subscription Management Dashboard/project.json	
@@ -1,16 +1,17 @@
 {
-  "name": "Pro Subscription Management Dashboard",
+  "title": "Pro Subscription Management Dashboard",
   "description": "Track, manage, and analyze all your recurring subscriptions and monthly expenses in one place.",
-  "author": "MistryVishwa",
-  "github": "MistryVishwa",
+  "author": {
+    "name": "MistryVishwa",
+    "github": "MistryVishwa"
+  },
   "tags": [
     "enhancement",
-    "good first issue",
+    "good-first-issue",
     "javascript",
     "frontend",
     "finance",
-    "dashboard",
-    "subscription-management"
+    "dashboard"
   ],
-  "folder_name": "subscription-management-dashboard"
+  "entry": "index.html"
 }
