Skip to content

Commit c589d9d

Browse files
committed
update ui
1 parent ac6b13e commit c589d9d

10 files changed

Lines changed: 1071 additions & 1082 deletions

File tree

README.md

Lines changed: 22 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -91,61 +91,38 @@ All expenses are stored in the device's **LocalStorage** and reflected immediate
9191

9292
---
9393

94-
### 5. **Budget & Salary View**
94+
### 5. **Budget & Salary Management**
9595

96-
The **Budget View** helps users manage their **monthly salary**, define optional **budgets**, and gain deep insights into their spending behavior.
96+
The **Budget & Salary** module provides a sophisticated financial dashboard that transitions between total income tracking and granular monthly budgeting.
9797

9898
**Key capabilities include:**
9999

100-
* 💼 **Salary Management**
101-
* Users can add their **monthly salary**.
102-
* Optionally, they can define a **monthly budget** that is less than or equal to their salary.
103-
* The system intelligently switches between:
104-
* **Salary-based tracking** (if no budget is set)
105-
* **Budget-based tracking** (if a budget is defined)
106-
* 📊 **Financial Overview Card**
107-
* Displays:
108-
* **Remaining Balance** (salary – expenses)
109-
* or **Remaining Budget** (budget – expenses)
110-
* Clearly shows **Total Income**, **Total Expenses**, and the remaining amount.
111-
* 📅 **Month-wise Analysis**
112-
* Users can switch between months using a month selector.
113-
* All calculations, analytics, and transactions update dynamically based on the selected month.
114-
* 📈 **Daily Spending Analytics**
115-
* **Allowed/Day** – Average amount the user can spend per day.
116-
* **Spent/Day** – Actual average spending per day so far.
117-
* **Suggested/Day** – Recommended spending per remaining day to stay within limits.
118-
* 🟩 **Budget Usage Indicator**
119-
* A dynamic progress bar visually represents how much of the salary or budget has been used.
120-
* Color indicators provide quick feedback:
121-
* 🟢 Green – Healthy spending
122-
* 🟠 Orange – Caution zone
123-
* 🔴 Red – Overspending
124-
* 🧠 **Smart Spending Insights**
125-
* Displays contextual messages such as:
126-
* “Excellent! You’re saving more than half your salary.”
127-
* “Careful! You’re running low on funds.”
128-
* “You have exceeded your salary!”
129-
* Helps users quickly understand their financial status without manual calculations.
130-
* 🧾 **Transaction Management**
131-
* Users can:
132-
* Add salary entries
133-
* Edit existing salary or budget values
134-
* Attach optional notes for clarity
135-
* Delete salary records when needed
136-
* All changes reflect instantly across analytics and visualizations.
100+
* 💼 **Dynamic Financial Modes**
101+
* **Salary Tracking:** Tracks total accumulated income and overall savings rates.
102+
* **Budget Tracking:** Focuses on a specific month's limits to prevent overspending.
103+
* The system intelligently calculates metrics based on the active `viewMode`.
137104

138-
---
139105

140-
If you want, next I can:
106+
* 📊 **Advanced Financial Analytics**
107+
* **Salary Growth:** Automatically calculates the percentage increase or decrease in income compared to the previous month.
108+
* **Savings Rate:** Real-time calculation of the percentage of income retained after expenses:
141109

142-
* Align **Dashboard** wording with graphs logic
143-
* Make README more **recruiter / interview friendly**
144-
* Shorten it for **GitHub featured project**
145110

146-
Just tell me 👍
111+
* **Daily Spending Intelligence:**
112+
* **Allowed/Day:** Your theoretical daily limit based on the total budget and days in the month.
113+
* **Spent/Day:** Actual average spending calculated from the day of your first expense to today.
114+
* **Suggested/Day:** A dynamic "correction" metric that tells you exactly how much you can spend for the *remaining* days to stay on target.
147115

116+
* 🎨 **Visual Feedback & Progress**
117+
* **Smart Progress Bar:** A multi-state indicator that shifts colors based on your spending velocity:
118+
* 🟢 **Green to Indigo:** (Below 50%) - Safe zone.
119+
* 🟠 **Orange:** (50% - 90%) - Warning zone.
120+
* 🔴 **Red:** (Above 90%) - Critical limit/Exceeded.
121+
* **Contextual Status:** Text insights (e.g., *"Excellent! Saving > 50%"* or *"⚠️ You have exceeded your limit!"*).
148122

123+
* 🛠️ **Transaction Management**
124+
* **Full CRUD Operations:** Add, edit, and delete salary/budget records.
125+
* **Validation Layer:** Integrated error handling for amounts (max limit ), required notes, and month selection.
149126
---
150127

151128
### 6. **Settings View**

documentation/components/SalaryComponent.html

Lines changed: 742 additions & 894 deletions
Large diffs are not rendered by default.

documentation/coverage.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -623,9 +623,9 @@
623623
</td>
624624
<td>component</td>
625625
<td>SalaryComponent</td>
626-
<td align="right" data-sort="100">
627-
<span class="coverage-percent">100 %</span>
628-
<span class="coverage-count">(56/56)</span>
626+
<td align="right" data-sort="98">
627+
<span class="coverage-percent">98 %</span>
628+
<span class="coverage-count">(52/53)</span>
629629
</td>
630630
</tr>
631631
<tr class="very-good">
@@ -829,7 +829,7 @@
829829
<td>Salary</td>
830830
<td align="right" data-sort="100">
831831
<span class="coverage-percent">100 %</span>
832-
<span class="coverage-count">(7/7)</span>
832+
<span class="coverage-count">(8/8)</span>
833833
</td>
834834
</tr>
835835
<tr class="very-good">

documentation/index.html

Lines changed: 27 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -213,81 +213,49 @@ <h3>4. <strong>List View</strong></h3>
213213
</li>
214214
</ul>
215215
<hr>
216-
<h3>5. <strong>Budget &amp; Salary View</strong></h3>
217-
<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>
216+
<h3>5. <strong>Budget &amp; Salary Management</strong></h3>
217+
<p>The <strong>Budget &amp; Salary</strong> module provides a sophisticated financial dashboard that transitions between total income tracking and granular monthly budgeting.</p>
218218
<p><strong>Key capabilities include:</strong></p>
219219
<ul>
220-
<li>💼 <strong>Salary Management</strong><ul>
221-
<li>Users can add their <strong>monthly salary</strong>.</li>
222-
<li>Optionally, they can define a <strong>monthly budget</strong> that is less than or equal to their salary.</li>
223-
<li>The system intelligently switches between:<ul>
224-
<li><strong>Salary-based tracking</strong> (if no budget is set)</li>
225-
<li><strong>Budget-based tracking</strong> (if a budget is defined)</li>
226-
</ul>
227-
</li>
228-
</ul>
229-
</li>
230-
<li>📊 <strong>Financial Overview Card</strong><ul>
231-
<li>Displays:<ul>
232-
<li><strong>Remaining Balance</strong> (salary – expenses)</li>
233-
<li>or <strong>Remaining Budget</strong> (budget – expenses)</li>
234-
</ul>
235-
</li>
236-
<li>Clearly shows <strong>Total Income</strong>, <strong>Total Expenses</strong>, and the remaining amount.</li>
237-
</ul>
238-
</li>
239-
<li>📅 <strong>Month-wise Analysis</strong><ul>
240-
<li>Users can switch between months using a month selector.</li>
241-
<li>All calculations, analytics, and transactions update dynamically based on the selected month.</li>
242-
</ul>
243-
</li>
244-
<li>📈 <strong>Daily Spending Analytics</strong><ul>
245-
<li><strong>Allowed/Day</strong> – Average amount the user can spend per day.</li>
246-
<li><strong>Spent/Day</strong> – Actual average spending per day so far.</li>
247-
<li><strong>Suggested/Day</strong> – Recommended spending per remaining day to stay within limits.</li>
248-
</ul>
249-
</li>
250-
<li>🟩 <strong>Budget Usage Indicator</strong><ul>
251-
<li>A dynamic progress bar visually represents how much of the salary or budget has been used.</li>
252-
<li>Color indicators provide quick feedback:<ul>
253-
<li>🟢 Green – Healthy spending</li>
254-
<li>🟠 Orange – Caution zone</li>
255-
<li>🔴 Red – Overspending</li>
220+
<li><p>💼 <strong>Dynamic Financial Modes</strong></p>
221+
<ul>
222+
<li><strong>Salary Tracking:</strong> Tracks total accumulated income and overall savings rates.</li>
223+
<li><strong>Budget Tracking:</strong> Focuses on a specific month&#39;s limits to prevent overspending.</li>
224+
<li>The system intelligently calculates metrics based on the active <code>viewMode</code>.</li>
256225
</ul>
257226
</li>
227+
<li><p>📊 <strong>Advanced Financial Analytics</strong></p>
228+
<ul>
229+
<li><strong>Salary Growth:</strong> Automatically calculates the percentage increase or decrease in income compared to the previous month.</li>
230+
<li><strong>Savings Rate:</strong> Real-time calculation of the percentage of income retained after expenses:</li>
258231
</ul>
259232
</li>
260-
<li>🧠 <strong>Smart Spending Insights</strong><ul>
261-
<li>Displays contextual messages such as:<ul>
262-
<li>“Excellent! You’re saving more than half your salary.”</li>
263-
<li>“Careful! You’re running low on funds.”</li>
264-
<li>“You have exceeded your salary!”</li>
233+
<li><p><strong>Daily Spending Intelligence:</strong></p>
234+
<ul>
235+
<li><strong>Allowed/Day:</strong> Your theoretical daily limit based on the total budget and days in the month.</li>
236+
<li><strong>Spent/Day:</strong> Actual average spending calculated from the day of your first expense to today.</li>
237+
<li><strong>Suggested/Day:</strong> A dynamic &quot;correction&quot; metric that tells you exactly how much you can spend for the <em>remaining</em> days to stay on target.</li>
265238
</ul>
266239
</li>
267-
<li>Helps users quickly understand their financial status without manual calculations.</li>
240+
<li><p>🎨 <strong>Visual Feedback &amp; Progress</strong></p>
241+
<ul>
242+
<li><strong>Smart Progress Bar:</strong> A multi-state indicator that shifts colors based on your spending velocity:<ul>
243+
<li>🟢 <strong>Green to Indigo:</strong> (Below 50%) - Safe zone.</li>
244+
<li>🟠 <strong>Orange:</strong> (50% - 90%) - Warning zone.</li>
245+
<li>🔴 <strong>Red:</strong> (Above 90%) - Critical limit/Exceeded.</li>
268246
</ul>
269247
</li>
270-
<li>🧾 <strong>Transaction Management</strong><ul>
271-
<li>Users can:<ul>
272-
<li>Add salary entries</li>
273-
<li>Edit existing salary or budget values</li>
274-
<li>Attach optional notes for clarity</li>
275-
<li>Delete salary records when needed</li>
248+
<li><strong>Contextual Status:</strong> Text insights (e.g., <em>&quot;Excellent! Saving &gt; 50%&quot;</em> or <em>&quot;⚠️ You have exceeded your limit!&quot;</em>).</li>
276249
</ul>
277250
</li>
278-
<li>All changes reflect instantly across analytics and visualizations.</li>
251+
<li><p>🛠️ <strong>Transaction Management</strong></p>
252+
<ul>
253+
<li><strong>Full CRUD Operations:</strong> Add, edit, and delete salary/budget records.</li>
254+
<li><strong>Validation Layer:</strong> Integrated error handling for amounts (max limit ), required notes, and month selection.</li>
279255
</ul>
280256
</li>
281257
</ul>
282258
<hr>
283-
<p>If you want, next I can:</p>
284-
<ul>
285-
<li>Align <strong>Dashboard</strong> wording with graphs logic</li>
286-
<li>Make README more <strong>recruiter / interview friendly</strong></li>
287-
<li>Shorten it for <strong>GitHub featured project</strong></li>
288-
</ul>
289-
<p>Just tell me 👍</p>
290-
<hr>
291259
<h3>6. <strong>Settings View</strong></h3>
292260
<p>Provides customization and utility options for better personalization:</p>
293261
<ul>

documentation/injectables/SalaryService.html

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ <h3 id="constructor">Constructor</h3>
216216
</tr>
217217
<tr>
218218
<td class="col-md-4">
219-
<div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/app/service/localStorage/salary.service.ts:44</a></div>
219+
<div class="io-line">Defined in <a href="" data-line="47" class="link-to-prism">src/app/service/localStorage/salary.service.ts:47</a></div>
220220
</td>
221221
</tr>
222222

@@ -286,8 +286,8 @@ <h3 id="methods">
286286

287287
<tr>
288288
<td class="col-md-4">
289-
<div class="io-line">Defined in <a href="" data-line="85"
290-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:85</a></div>
289+
<div class="io-line">Defined in <a href="" data-line="88"
290+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:88</a></div>
291291
</td>
292292
</tr>
293293

@@ -365,8 +365,8 @@ <h3 id="methods">
365365

366366
<tr>
367367
<td class="col-md-4">
368-
<div class="io-line">Defined in <a href="" data-line="141"
369-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:141</a></div>
368+
<div class="io-line">Defined in <a href="" data-line="144"
369+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:144</a></div>
370370
</td>
371371
</tr>
372372

@@ -439,8 +439,8 @@ <h3 id="methods">
439439

440440
<tr>
441441
<td class="col-md-4">
442-
<div class="io-line">Defined in <a href="" data-line="71"
443-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:71</a></div>
442+
<div class="io-line">Defined in <a href="" data-line="74"
443+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:74</a></div>
444444
</td>
445445
</tr>
446446

@@ -482,8 +482,8 @@ <h3 id="methods">
482482

483483
<tr>
484484
<td class="col-md-4">
485-
<div class="io-line">Defined in <a href="" data-line="169"
486-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:169</a></div>
485+
<div class="io-line">Defined in <a href="" data-line="172"
486+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:172</a></div>
487487
</td>
488488
</tr>
489489

@@ -559,8 +559,8 @@ <h3 id="methods">
559559

560560
<tr>
561561
<td class="col-md-4">
562-
<div class="io-line">Defined in <a href="" data-line="61"
563-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:61</a></div>
562+
<div class="io-line">Defined in <a href="" data-line="64"
563+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:64</a></div>
564564
</td>
565565
</tr>
566566

@@ -603,8 +603,8 @@ <h3 id="methods">
603603

604604
<tr>
605605
<td class="col-md-4">
606-
<div class="io-line">Defined in <a href="" data-line="114"
607-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:114</a></div>
606+
<div class="io-line">Defined in <a href="" data-line="117"
607+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:117</a></div>
608608
</td>
609609
</tr>
610610

@@ -699,8 +699,8 @@ <h3 id="methods">
699699

700700
<tr>
701701
<td class="col-md-4">
702-
<div class="io-line">Defined in <a href="" data-line="158"
703-
class="link-to-prism">src/app/service/localStorage/salary.service.ts:158</a></div>
702+
<div class="io-line">Defined in <a href="" data-line="161"
703+
class="link-to-prism">src/app/service/localStorage/salary.service.ts:161</a></div>
704704
</td>
705705
</tr>
706706

@@ -786,6 +786,9 @@ <h3 id="methods">
786786

787787
/** Optional note or description */
788788
note?: string;
789+
790+
/** View mode: &#x27;salary&#x27; or &#x27;budget&#x27; */
791+
viewMode: string;
789792
}
790793

791794
/**

0 commit comments

Comments
 (0)