up

Author: devnamdev2003

README.md

@@ -98,55 +98,37 @@ The **Budget View** helps users manage their **monthly salary**, define optional
 **Key capabilities include:**
 
 * 💼 **Salary Management**
-
   * Users can add their **monthly salary**.
   * Optionally, they can define a **monthly budget** that is less than or equal to their salary.
   * The system intelligently switches between:
-
     * **Salary-based tracking** (if no budget is set)
     * **Budget-based tracking** (if a budget is defined)
-
 * 📊 **Financial Overview Card**
-
   * Displays:
-
     * **Remaining Balance** (salary – expenses)
     * or **Remaining Budget** (budget – expenses)
   * Clearly shows **Total Income**, **Total Expenses**, and the remaining amount.
-
 * 📅 **Month-wise Analysis**
-
   * Users can switch between months using a month selector.
   * All calculations, analytics, and transactions update dynamically based on the selected month.
-
 * 📈 **Daily Spending Analytics**
-
   * **Allowed/Day** – Average amount the user can spend per day.
   * **Spent/Day** – Actual average spending per day so far.
   * **Suggested/Day** – Recommended spending per remaining day to stay within limits.
-
 * 🟩 **Budget Usage Indicator**
-
   * A dynamic progress bar visually represents how much of the salary or budget has been used.
   * Color indicators provide quick feedback:
-
     * 🟢 Green – Healthy spending
     * 🟠 Orange – Caution zone
     * 🔴 Red – Overspending
-
 * 🧠 **Smart Spending Insights**
-
   * Displays contextual messages such as:
-
     * “Excellent! You’re saving more than half your salary.”
     * “Careful! You’re running low on funds.”
     * “You have exceeded your salary!”
   * Helps users quickly understand their financial status without manual calculations.
-
 * 🧾 **Transaction Management**
-
   * Users can:
-
     * Add salary entries
     * Edit existing salary or budget values
     * Attach optional notes for clarity

documentation/components/SalaryComponent.html

@@ -217,83 +217,65 @@ <h3>5. <strong>Budget &amp; Salary View</strong></h3>
 <p>The <strong>Budget View</strong> helps users manage their <strong>monthly salary</strong>, define optional <strong>budgets</strong>, and gain deep insights into their spending behavior.</p>
 <p><strong>Key capabilities include:</strong></p>
 <ul>
-<li><p>💼 <strong>Salary Management</strong></p>
-<ul>
-<li><p>Users can add their <strong>monthly salary</strong>.</p>
-</li>
-<li><p>Optionally, they can define a <strong>monthly budget</strong> that is less than or equal to their salary.</p>
-</li>
-<li><p>The system intelligently switches between:</p>
-<ul>
+<li>💼 <strong>Salary Management</strong><ul>
+<li>Users can add their <strong>monthly salary</strong>.</li>
+<li>Optionally, they can define a <strong>monthly budget</strong> that is less than or equal to their salary.</li>
+<li>The system intelligently switches between:<ul>
 <li><strong>Salary-based tracking</strong> (if no budget is set)</li>
 <li><strong>Budget-based tracking</strong> (if a budget is defined)</li>
 </ul>
 </li>
 </ul>
 </li>
-<li><p>📊 <strong>Financial Overview Card</strong></p>
-<ul>
-<li><p>Displays:</p>
-<ul>
+<li>📊 <strong>Financial Overview Card</strong><ul>
+<li>Displays:<ul>
 <li><strong>Remaining Balance</strong> (salary – expenses)</li>
 <li>or <strong>Remaining Budget</strong> (budget – expenses)</li>
 </ul>
 </li>
-<li><p>Clearly shows <strong>Total Income</strong>, <strong>Total Expenses</strong>, and the remaining amount.</p>
-</li>
+<li>Clearly shows <strong>Total Income</strong>, <strong>Total Expenses</strong>, and the remaining amount.</li>
 </ul>
 </li>
-<li><p>📅 <strong>Month-wise Analysis</strong></p>
-<ul>
+<li>📅 <strong>Month-wise Analysis</strong><ul>
 <li>Users can switch between months using a month selector.</li>
 <li>All calculations, analytics, and transactions update dynamically based on the selected month.</li>
 </ul>
 </li>
-<li><p>📈 <strong>Daily Spending Analytics</strong></p>
-<ul>
+<li>📈 <strong>Daily Spending Analytics</strong><ul>
 <li><strong>Allowed/Day</strong> – Average amount the user can spend per day.</li>
 <li><strong>Spent/Day</strong> – Actual average spending per day so far.</li>
 <li><strong>Suggested/Day</strong> – Recommended spending per remaining day to stay within limits.</li>
 </ul>
 </li>
-<li><p>🟩 <strong>Budget Usage Indicator</strong></p>
-<ul>
-<li><p>A dynamic progress bar visually represents how much of the salary or budget has been used.</p>
-</li>
-<li><p>Color indicators provide quick feedback:</p>
-<ul>
+<li>🟩 <strong>Budget Usage Indicator</strong><ul>
+<li>A dynamic progress bar visually represents how much of the salary or budget has been used.</li>
+<li>Color indicators provide quick feedback:<ul>
 <li>🟢 Green – Healthy spending</li>
 <li>🟠 Orange – Caution zone</li>
 <li>🔴 Red – Overspending</li>
 </ul>
 </li>
 </ul>
 </li>
-<li><p>🧠 <strong>Smart Spending Insights</strong></p>
-<ul>
-<li><p>Displays contextual messages such as:</p>
-<ul>
+<li>🧠 <strong>Smart Spending Insights</strong><ul>
+<li>Displays contextual messages such as:<ul>
 <li>“Excellent! You’re saving more than half your salary.”</li>
 <li>“Careful! You’re running low on funds.”</li>
 <li>“You have exceeded your salary!”</li>
 </ul>
 </li>
-<li><p>Helps users quickly understand their financial status without manual calculations.</p>
-</li>
+<li>Helps users quickly understand their financial status without manual calculations.</li>
 </ul>
 </li>
-<li><p>🧾 <strong>Transaction Management</strong></p>
-<ul>
-<li><p>Users can:</p>
-<ul>
+<li>🧾 <strong>Transaction Management</strong><ul>
+<li>Users can:<ul>
 <li>Add salary entries</li>
 <li>Edit existing salary or budget values</li>
 <li>Attach optional notes for clarity</li>
 <li>Delete salary records when needed</li>
 </ul>
 </li>
-<li><p>All changes reflect instantly across analytics and visualizations.</p>
-</li>
+<li>All changes reflect instantly across analytics and visualizations.</li>
 </ul>
 </li>
 </ul>

documentation/index.html

@@ -165,9 +165,9 @@ <h3 class="text-xl font-semibold">Transactions</h3>
                         </div>
                         <div>
                             @if(t.note) {
-                            <p class="font-medium truncate max-w-[60px]">{{ t.note }}</p>
+                            <p class="font-medium truncate max-w-[120px]">{{ t.note }}</p>
                             } @else {
-                            <p class="font-medium truncate max-w-[60px]">Income</p>
+                            <p class="font-medium truncate max-w-[120px]">Income</p>
                             }
                             <div class="flex flex-col text-xs opacity-60">
                                 <div class="flex gap-2">