From 6e12e199b83031095f69603a67b33190526a4086 Mon Sep 17 00:00:00 2001
From: Daryl Harry Bennet <darylhb2006@gmail.com>
Date: Tue, 10 Mar 2026 09:02:22 +0800
Subject: [PATCH] Updates on a certain parts

---
 Documentation.docx | Bin 0 -> 8039 bytes
 dashboard.html     | 222 ++++++++++++++++++++++++++++++++++++++++++++-
 index.html         |   8 --
 style.css          | 202 +++++++++++++++++++++++++++++++++++------
 4 files changed, 394 insertions(+), 38 deletions(-)
 create mode 100644 Documentation.docx

diff --git a/Documentation.docx b/Documentation.docx
new file mode 100644
index 0000000000000000000000000000000000000000..b94e148bb791e171660b51823c453216c57aed55
GIT binary patch
literal 8039
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
U?lFm>pimw^?T?8P`z!kY0}gQ+%>V!Z

literal 0
HcmV?d00001

diff --git a/dashboard.html b/dashboard.html
index f527fe0..dcf1899 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -653,11 +653,27 @@ <h4 style="margin: 15px 0 10px 0; font-size: 14px; color: #666;">Notification
                             <div class="settings-group">
                                 <h3>Financial Tools 📊</h3>
                                 <div class="settings-list">
-                                    <div class="setting-item"
-                                        onclick="showSection('reports', document.querySelector('a[href=\'#\'][onclick*=\'reports\']'))">
+                                    <div class="setting-item" onclick="toggleReportsSection()">
                                         <span class="setting-icon">📈</span>
                                         <span class="setting-label">Reports & Analytics</span>
-                                        <span class="setting-arrow">›</span>
+                                        <span class="setting-arrow" id="reports-arrow">›</span>
+                                    </div>
+                                    <!-- Reports & Analytics Dropdown Section -->
+                                    <div id="reports-dropdown-section" class="expandable-section">
+                                        <div class="reports-download-options">
+                                            <p style="margin-bottom: 10px; font-size: 13px; opacity: 0.8;">Download your
+                                                financial reports:</p>
+                                            <div style="display: flex; gap: 10px;">
+                                                <button class="quick-btn"
+                                                    style="flex: 1; padding: 10px; font-size: 14px;"
+                                                    onclick="downloadReport('PDF')">📄 PDF Report</button>
+                                                <button class="quick-btn"
+                                                    style="flex: 1; padding: 10px; font-size: 14px;"
+                                                    onclick="downloadReport('CSV')">📊 CSV Data</button>
+                                            </div>
+                                            <button class="view-more-btn" style="width: 100%; margin-top: 10px;"
+                                                onclick="showSection('reports')">View Full Analytics</button>
+                                        </div>
                                     </div>
                                     <div class="setting-item" onclick="openGoalModal()">
                                         <span class="setting-icon">🎯</span>
@@ -1147,6 +1163,32 @@ <h3 style="font-size: 16px; margin-bottom: 10px;">Budget Summary</h3>
         </div>
     </div>
 
+
+    <!-- CHATBOT -->
+    <div class="chatbot-trigger" onclick="toggleChatbot()">💬</div>
+    <div class="chatbot-container" id="chatbot-container">
+        <div class="chatbot-header">
+            <h3>MoneyBuddy 🤖</h3>
+            <span class="chatbot-close" onclick="toggleChatbot()">✕</span>
+        </div>
+        <div class="chatbot-messages" id="chatbot-messages">
+            <div class="message bot-message">
+                Hello! I'm your MoneyBuddy. How can I help you today?
+                <div class="chatbot-options">
+                    <span class="chat-option" onclick="handleBotOption('Add Goal')">🎯 Add Goal</span>
+                    <span class="chat-option" onclick="handleBotOption('Predict Budget')">📈 Predict Budget</span>
+                    <span class="chat-option" onclick="handleBotOption('Pay Bill')">💳 Pay Bill</span>
+                    <span class="chat-option" onclick="handleBotOption('Help')">❓ Help</span>
+                </div>
+            </div>
+        </div>
+        <div class="chatbot-input-area">
+            <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type a message..."
+                onkeypress="handleChatKeyPress(event)">
+            <button class="chatbot-send" onclick="sendMessage()">➤</button>
+        </div>
+    </div>
+
     <script>
         // Check if user is logged in
         let currentUserData = localStorage.getItem('currentUser');
@@ -1558,6 +1600,26 @@ <h3 style="font-size: 16px; margin-bottom: 10px;">Budget Summary</h3>
             }
         }
 
+        function toggleReportsSection() {
+            const section = document.getElementById('reports-dropdown-section');
+            const arrow = document.getElementById('reports-arrow');
+            const item = arrow ? arrow.closest('.setting-item') : null;
+
+            section.classList.toggle('show');
+            if (section.classList.contains('show')) {
+                if (item) item.classList.add('active');
+            } else {
+                if (item) item.classList.remove('active');
+            }
+        }
+
+        function downloadReport(format) {
+            alert(`Generating ${format} report...`);
+            setTimeout(() => {
+                alert(`${format} report downloaded successfully!`);
+            }, 1000);
+        }
+
         function toggleSupportSection(sectionId, arrowId) {
             const section = document.getElementById(sectionId);
             const arrow = document.getElementById(arrowId);
@@ -1753,6 +1815,160 @@ <h3 style="font-size: 16px; margin-bottom: 10px;">Budget Summary</h3>
             }
         }
 
+        /* --- Chatbot Logic --- */
+        function toggleChatbot() {
+            const container = document.getElementById('chatbot-container');
+            container.classList.toggle('active');
+            if (container.classList.contains('active')) {
+                document.getElementById('chatbot-input').focus();
+            }
+        }
+
+        function handleChatKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        }
+
+        function sendMessage() {
+            const input = document.getElementById('chatbot-input');
+            const message = input.value.trim();
+            if (!message) return;
+
+            addChatMessage('user', message);
+            input.value = '';
+
+            processUserMessage(message);
+        }
+
+        function addChatMessage(sender, text, options = []) {
+            const messagesContainer = document.getElementById('chatbot-messages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${sender}-message`;
+            messageDiv.innerHTML = text;
+
+            if (options.length > 0) {
+                const optionsDiv = document.createElement('div');
+                optionsDiv.className = 'chatbot-options';
+                options.forEach(opt => {
+                    const span = document.createElement('span');
+                    span.className = 'chat-option';
+                    span.innerText = opt.label;
+                    span.onclick = () => handleBotOption(opt.value || opt.label);
+                    optionsDiv.appendChild(span);
+                });
+                messageDiv.appendChild(optionsDiv);
+            }
+
+            messagesContainer.appendChild(messageDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+
+        function handleBotOption(option) {
+            addChatMessage('user', option);
+            processUserMessage(option);
+        }
+
+        function processUserMessage(message) {
+            const msg = message.toLowerCase();
+
+            // Artificial delay
+            setTimeout(() => {
+                if (msg.includes('goal')) {
+                    startGoalFlow();
+                } else if (msg.includes('predict') || msg.includes('budget') || msg.includes('month')) {
+                    handlePredictBudget();
+                } else if (msg.includes('pay') || msg.includes('bill')) {
+                    handlePaymentFlow();
+                } else if (msg.includes('help') || msg.includes('hi') || msg.includes('hello')) {
+                    addChatMessage('bot', 'I can help you with:<br>• Adding a savings goal 🎯<br>• Predicting your 3-month budget 📈<br>• Making bill payments 💳', [
+                        { label: '🎯 Add Goal' },
+                        { label: '📈 Predict Budget' },
+                        { label: '💳 Pay Bill' }
+                    ]);
+                } else {
+                    addChatMessage('bot', "I'm not sure I understand. Try asking about goals, budgets, or payments!", [
+                        { label: '❓ Help' }
+                    ]);
+                }
+            }, 500);
+        }
+
+        function startGoalFlow() {
+            addChatMessage('bot', "Sure! I can help you add a new goal. What is the name of your goal? (e.g., 'New Laptop 💻')");
+            // Simplified multi-step interaction logic using prompt for this prototype
+            setTimeout(() => {
+                const name = prompt('Goal Name:');
+                if (!name) return;
+                const target = prompt('Target Amount (RM):');
+                if (!target || isNaN(target)) return;
+
+                // Add the goal using existing logic
+                addChatMessage('bot', `Great! I've added your goal: <strong>${name}</strong> with a target of <strong>RM ${parseFloat(target).toFixed(2)}</strong>.`);
+
+                // Inject into UI (mocking the addGoal function behavior)
+                const goalHTML = `
+                    <div class="goal-item">
+                        <div class="goal-header">
+                            <span class="goal-name">${name}</span>
+                            <span class="goal-amount">RM 0.00 / RM ${parseFloat(target).toFixed(2)}</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: 0%;"></div>
+                        </div>
+                        <span class="goal-percentage">0%</span>
+                    </div>
+                `;
+                document.querySelectorAll('.goals-list').forEach(list => {
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = goalHTML;
+                    list.appendChild(tempDiv.firstElementChild);
+                });
+            }, 500);
+        }
+
+        function handlePredictBudget() {
+            const spent = 3200; // Mock current monthly spent from UI
+            const predicted = spent * 3;
+            const savingsGoal = 5000; // Mock current savings
+
+            addChatMessage('bot', `Based on your recent spending of <strong>RM ${spent.toLocaleString()}</strong> per month:<br><br>• <strong>Predicted 3-month usage:</strong> RM ${(predicted).toLocaleString()}<br>• <strong>Remaining Balance:</strong> RM ${(12500 - predicted).toLocaleString()}<br><br>You're on track to hit your milestones! Keep it up! 🚀`);
+        }
+
+        function handlePaymentFlow() {
+            const bills = [
+                { name: 'TNB Electricity', icon: '⚡', amount: '120.00', due: '20 Oct 2026', acc: '2200119988', holder: 'Alex Tan' },
+                { name: 'Maxis Bill', icon: '📱', amount: '89.90', due: '25 Oct 2026', acc: '012-3456789', holder: 'Alex Tan' }
+            ];
+
+            addChatMessage('bot', "Which bill would you like to pay?",
+                bills.map(b => ({ label: `${b.icon} ${b.name}`, value: `Pay ${b.name}` }))
+            );
+        }
+
+        // Specific bill selection logic
+        const originalProcess = processUserMessage;
+        processUserMessage = function (message) {
+            const msg = message.toLowerCase();
+            if (msg.startsWith('pay ')) {
+                const billName = message.substring(4);
+                const bills = [
+                    { name: 'TNB Electricity', icon: '⚡', amount: '120.00', due: '20 Oct 2026', acc: '2200119988', holder: 'Alex Tan' },
+                    { name: 'Maxis Bill', icon: '📱', amount: '89.90', due: '25 Oct 2026', acc: '012-3456789', holder: 'Alex Tan' }
+                ];
+                const bill = bills.find(b => b.name.toLowerCase() === billName.toLowerCase());
+                if (bill) {
+                    addChatMessage('bot', `Opening payment for ${bill.name}...`);
+                    setTimeout(() => {
+                        openPaymentModal(bill);
+                        toggleChatbot(); // Close chat when modal opens
+                    }, 500);
+                    return;
+                }
+            }
+            originalProcess(message);
+        };
+
     </script>
     <script src="script.js"></script>
 </body>
diff --git a/index.html b/index.html
index b875a50..508bee0 100644
--- a/index.html
+++ b/index.html
@@ -28,12 +28,4 @@ <h1 style="padding: 10px;">MoneyMate</h1>
     <script src="script.js"></script>
 </body>
 
-<<<<<<< HEAD
 </html>
-=======
-</html>
-
-<!--
-we are the world champions
--->
->>>>>>> b873e0d (First upload)
diff --git a/style.css b/style.css
index 051fdab..10357f0 100644
--- a/style.css
+++ b/style.css
@@ -1,35 +1,33 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
 :root {
-    /* Gruvbox Light */
-    --bg-color: #fbf1c7;
-    --text-color: #3c3836;
-    --container-bg: #f9f5d7;
-    --accent-color: #458588;
-    /* Blue */
-    --border-color: #458588;
-    --input-bg: #ffffff;
-    --input-border: #d5c4a1;
-    --button-text: #fbf1c7;
-    --sidebar-bg: #ebdbb2;
-    --sidebar-hover: #d5c4a1;
+    /* MoneyMate Theme - Light Mode */
+    --bg-color: #F7F0F0;
+    --text-color: #484349;
+    --container-bg: #FFFFFF;
+    --accent-color: #18A999;
+    --border-color: #18A999;
+    --input-bg: #FFFFFF;
+    --input-border: #8AF3FF;
+    --button-text: #F7F0F0;
+    --sidebar-bg: #F0E6E6;
+    --sidebar-hover: #E5DADA;
+    --hover-color: #109648;
 }
 
 .dark-mode {
-    /* Gruvbox Dark */
-    --bg-color: #282828;
-    --text-color: #ebdbb2;
-    --container-bg: #3c3836;
-    --accent-color: #83a598;
-    /* Blue */
-    --border-color: #83a598;
-    --input-bg: #504945;
-    --input-border: #a89984;
-    /* Lighter border for visibility */
-    --button-text: #282828;
-    --sidebar-bg: #1d2021;
-    /* Darker track for contrast */
-    --sidebar-hover: #504945;
+    /* MoneyMate Theme - Dark Mode */
+    --bg-color: #484349;
+    --text-color: #F7F0F0;
+    --container-bg: #2E2A2F;
+    --accent-color: #8AF3FF;
+    --border-color: #18A999;
+    --input-bg: #59535A;
+    --input-border: #18A999;
+    --button-text: #484349;
+    --sidebar-bg: #3D383E;
+    --sidebar-hover: #59535A;
+    --hover-color: #109648;
 }
 
 body {
@@ -2303,4 +2301,154 @@ button {
 .support-content strong {
     color: var(--accent-color);
     display: block;
-}
\ No newline at end of file
+}
+/* --- Chatbot Styles --- */
+.chatbot-trigger {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 60px;
+    height: 60px;
+    background-color: var(--accent-color);
+    color: var(--button-text);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    cursor: pointer;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    z-index: 2000;
+    transition: transform 0.3s, background-color 0.3s;
+}
+
+.chatbot-trigger:hover {
+    transform: scale(1.1);
+}
+
+.chatbot-container {
+    position: fixed;
+    bottom: 100px;
+    right: 30px;
+    width: 350px;
+    height: 500px;
+    background-color: var(--container-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    display: none;
+    flex-direction: column;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    z-index: 2000;
+    overflow: hidden;
+    transition: opacity 0.3s, transform 0.3s;
+    transform: translateY(20px);
+    opacity: 0;
+}
+
+.chatbot-container.active {
+    display: flex;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.chatbot-header {
+    background-color: var(--accent-color);
+    color: var(--button-text);
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chatbot-header h3 {
+    margin: 0;
+    font-size: 18px;
+}
+
+.chatbot-close {
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.chatbot-messages {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    background-color: var(--bg-color);
+}
+
+.message {
+    max-width: 80%;
+    padding: 10px 15px;
+    border-radius: 15px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.bot-message {
+    align-self: flex-start;
+    background-color: var(--container-bg);
+    color: var(--text-color);
+    border-bottom-left-radius: 2px;
+    border: 1px solid var(--border-color);
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: var(--accent-color);
+    color: var(--button-text);
+    border-bottom-right-radius: 2px;
+}
+
+.chatbot-input-area {
+    padding: 15px;
+    background-color: var(--container-bg);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 10px;
+}
+
+.chatbot-input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--input-border);
+    border-radius: 20px;
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    outline: none;
+}
+
+.chatbot-send {
+    background: none;
+    border: none;
+    color: var(--accent-color);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chatbot-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 10px;
+}
+
+.chat-option {
+    font-size: 12px;
+    padding: 5px 10px;
+    background-color: var(--sidebar-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 15px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.chat-option:hover {
+    background-color: var(--sidebar-hover);
+}