Skip to content

Commit d43bb3f

Browse files
devnamdev2003devnamdev2003
committed
update budget UI
1 parent 1866404 commit d43bb3f

7 files changed

Lines changed: 314 additions & 97 deletions

File tree

‎documentation/components/BudgetComponent.html‎

Lines changed: 218 additions & 57 deletions
Large diffs are not rendered by default.

‎documentation/components/MusicComponent.html‎

Lines changed: 9 additions & 1 deletion
Large diffs are not rendered by default.

‎documentation/coverage.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@
505505
<td>BudgetComponent</td>
506506
<td align="right" data-sort="100">
507507
<span class="coverage-percent">100 %</span>
508-
<span class="coverage-count">(28/28)</span>
508+
<span class="coverage-count">(31/31)</span>
509509
</td>
510510
</tr>
511511
<tr class="very-good">

‎documentation/js/search/search_index.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/features/budget/budget.component.html‎

Lines changed: 59 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,74 @@
11
<section id="budget">
2+
<div *ngIf="showBudgetSection; else noBudgetMessage" class="p-4 space-y-4">
23

3-
<!-- Budget Section -->
4-
<div *ngIf="showBudgetSection; else noBudgetMessage" class="p-4">
5-
<div *ngIf="showBudgetSection" class=" col-span-1 md:col-span-2">
6-
<h2 class="text-xl font-semibold mb-4">💰 Budget Progress</h2>
7-
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
8-
<div class="h-full rounded-full transition-all duration-700 ease-in-out flex items-center justify-center"
9-
[ngStyle]="{ width: animatedBudgetProgress + '%' }" [ngClass]="budgetColorClass">
4+
<!-- Header -->
5+
<header class="flex flex-wrap items-center justify-between">
6+
<div>
7+
<p class="text-xs"> {{ latestBudget.fromDate | date:'dd MMM yyyy' }}</p>
8+
</div>
9+
<div>
10+
<p class="text-xs"> {{ latestBudget.toDate | date:'dd MMM yyyy' }}</p>
11+
</div>
12+
</header>
1013

11-
<span class="text-white text-sm font-semibold">
12-
{{ displayedPercentage.toFixed(1) }}%
13-
</span>
14+
<!-- Progress -->
15+
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
16+
<div class="h-full rounded-full transition-all duration-700 ease-in-out flex items-center justify-center"
17+
[ngStyle]="{ width: animatedBudgetProgress + '%' }" [ngClass]="budgetColorClass">
18+
19+
<span class="text-white text-sm font-semibold">
20+
{{ displayedPercentage.toFixed(1) }}%
21+
</span>
1422

15-
</div>
1623
</div>
24+
</div>
1725

18-
<p class="mt-4 text-sm text-[var(--color-text)]">
19-
{{ budgetMessage }}
20-
</p>
26+
<p class="mt-4 text-sm text-[var(--color-text)]">
27+
{{ budgetMessage }}
28+
</p>
2129

22-
<!-- Daily Metrics -->
23-
<div class="grid mt-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-[var(--color-text)]">
24-
<div class="bg-[var(--input-bg)] p-4 rounded shadow flex justify-between items-center">
25-
<p class="text-sm font-medium">Avg Allowed / Day</p>
26-
<p class="text-lg font-bold mt-1 text-blue-500">{{currency}}{{ avgAllowedPerDay.toFixed(2) }}</p>
27-
</div>
28-
<div class="bg-[var(--input-bg)] p-4 rounded shadow flex justify-between items-center">
29-
<p class="text-sm font-medium">Spent / Day</p>
30-
<p class="text-lg font-bold mt-1 text-red-500">{{currency}}{{ avgSpentPerDay.toFixed(2) }}</p>
30+
<!-- Summary Row -->
31+
<div class="grid gap-3 text-sm md:grid-cols-2">
32+
<!-- Total Budget (Full width) -->
33+
<div class="bg-[var(--input-bg)] p-3 rounded shadow flex justify-between items-center">
34+
<p class="text-sm">Budget</p>
35+
<p class="text-lg font-bold mt-1">{{currency}}{{ totalBudget }}</p>
36+
</div>
37+
38+
<!-- Spent & Remaining (Half width each) -->
39+
<div class="grid grid-cols-2 gap-3">
40+
<div class="bg-[var(--input-bg)] p-3 rounded shadow items-center align-center">
41+
<p class="text-sm">Spent</p>
42+
<p class="text-lg font-bold mt-1 text-red-500">
43+
{{currency}}{{ totalSpent }}
44+
</p>
3145
</div>
32-
<div class="bg-[var(--input-bg)] p-4 rounded shadow flex justify-between items-center">
33-
<p class="text-sm font-medium">Suggested / Day</p>
34-
<p class="text-lg font-bold mt-1 text-green-500">{{currency}}{{ suggestedPerDay.toFixed(2) }}</p>
46+
<div class="bg-[var(--input-bg)] p-3 rounded shadow items-center align-center">
47+
<p class="text-sm">Remaining</p>
48+
<p class="text-lg font-bold mt-1 text-green-600">
49+
{{currency}}{{ remainingBudgets }}
50+
</p>
3551
</div>
3652
</div>
3753
</div>
54+
55+
<!-- Daily Metrics -->
56+
<div class="grid mt-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-[var(--color-text)]">
57+
<div class="bg-[var(--input-bg)] p-3 rounded shadow flex justify-between items-center">
58+
<p class="text-sm font-medium">Avg Allowed / Day</p>
59+
<p class="text-lg font-bold mt-1 text-blue-500">{{currency}}{{ avgAllowedPerDay.toFixed(2) }}</p>
60+
</div>
61+
<div class="bg-[var(--input-bg)] p-3 rounded shadow flex justify-between items-center">
62+
<p class="text-sm font-medium">Spent / Day</p>
63+
<p class="text-lg font-bold mt-1 text-red-500">{{currency}}{{ avgSpentPerDay.toFixed(2) }}</p>
64+
</div>
65+
<div class="bg-[var(--input-bg)] p-3 rounded shadow flex justify-between items-center">
66+
<p class="text-sm font-medium">Suggested / Day</p>
67+
<p class="text-lg font-bold mt-1 text-green-500">{{currency}}{{ suggestedPerDay.toFixed(2) }}</p>
68+
</div>
69+
</div>
3870
<div class="w-full flex justify-start">
39-
<div class="w-full max-w-[600px] py-4 flex space-x-3">
71+
<div class="w-full max-w-[600px] py-2 flex space-x-3">
4072
<button (click)="openEditModal()"
4173
class="flex-1 bg-[var(--color-accent)] hover:opacity-90 text-white py-2 px-4 rounded-lg shadow-md transition">
4274
Update

‎src/app/features/budget/budget.component.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,15 @@ export class BudgetComponent implements OnInit {
106106
*/
107107
displayedPercentage = 0;
108108

109+
/** Total budget amount */
110+
totalBudget = '0';
111+
112+
/** Remaining budget amount */
113+
remainingBudgets = '0';
114+
115+
/** Total amount spent within the budget period */
116+
totalSpent = '0';
117+
109118
/**
110119
* Creates an instance of BudgetComponent.
111120
*
@@ -280,16 +289,15 @@ export class BudgetComponent implements OnInit {
280289

281290
// Generate budget status message
282291
if (spent > totalBudget) {
283-
this.budgetMessage =
284-
`⚠️ You have exceeded your budget! You spent ${this.currency}${spent.toFixed(2)} ` +
285-
`which is ${this.currency}${(spent - totalBudget).toFixed(2)} over the limit set ` +
286-
`between ${this.latestBudget.fromDate} and ${this.latestBudget.toDate}. 😰`;
292+
this.totalSpent = spent.toFixed(2);
293+
this.totalBudget = totalBudget.toFixed(2);
294+
this.remainingBudgets = '0';
295+
this.budgetMessage = `⚠️ You have exceeded your budget!`;
287296
} else {
288-
this.budgetMessage =
289-
`✅ You have spent ${this.currency}${spent.toFixed(2)} out of ` +
290-
`${this.currency}${totalBudget.toFixed(2)} between ` +
291-
`${this.latestBudget.fromDate} and ${this.latestBudget.toDate}. 💸 Remaining: ` +
292-
`${this.currency}${remaining.toFixed(2)}`;
297+
this.totalSpent = spent.toFixed(2);
298+
this.totalBudget = totalBudget.toFixed(2);
299+
this.remainingBudgets = remaining.toFixed(2);
300+
this.budgetMessage = '';
293301
}
294302

295303
// Calculate average daily insights

‎src/app/features/music/music.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@
7878
style="filter: var(--icon-color2);" />
7979
</button>
8080

81+
<button (click)="toggleLike()"
82+
class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--list-hover)] active:scale-90 transition-transform">
83+
<img [src]="isLiked()
84+
? 'assets/img/music_icon/icons8-love-fill-48.png'
85+
: 'assets/img/music_icon/icons8-love-48.png'" class="w-6 h-6"
86+
[style]="isLiked() ? 'filter: var(--icon-color1);' : 'filter: var(--icon-color2);'" />
87+
</button>
88+
8189
</div>
8290
</div>
8391

0 commit comments

Comments
 (0)