Skip to content

Commit 44bc94e

Browse files
devnamdev2003devnamdev2003
committed
update view
1 parent 88ef61c commit 44bc94e

3 files changed

Lines changed: 68 additions & 12 deletions

File tree

‎src/app/component/income-components/saving/saving.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl flex items-baselin
4242
Goal Remaining
4343
</div>
4444
<p class="text-xl font-semibold md:text-2xl">
45-
₹{{ currentMonthAdded | number:'1.2-2' }}
45+
₹{{ goalRemaining | number:'1.2-2' }}
4646
</p>
4747
</div>
4848
</div>
@@ -53,18 +53,18 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl flex items-baselin
5353
<section class="grid grid-cols-3 gap-3 md:gap-4 " style="animation-delay: 0.1s;">
5454
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
5555
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
56-
<i class="mb-2 text-lg text-indigo-500 fa-solid fa-flag-checkered"></i>
56+
<i class="mb-2 text-lg text-indigo-500 fa-solid fa-scale-balanced"></i>
5757
<div>
58-
<p class="text-[10px] opacity-60 uppercase tracking-wide">Goal Name</p>
58+
<p class="text-[10px] opacity-60 uppercase tracking-wide">Allowed/Day</p>
5959
<p class="text-sm font-bold md:text-base truncate" [title]="currentGoal?.goal_name || 'No Goal'">
60-
{{ currentGoal?.goal_name || 'No Goal' }}
60+
₹{{ allowedPerDay | number:'1.0-1' }}
6161
</p>
6262
</div>
6363
</div>
6464

6565
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
6666
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
67-
<i class="mb-2 text-lg text-emerald-500 fa-solid fa-chart-line"></i>
67+
<i class="mb-2 text-lg text-emerald-500 fa-solid fa-fire-flame-curved"></i>
6868
<div>
6969
<p class="text-[10px] opacity-60 uppercase tracking-wide">Saved/Day</p>
7070
<p class="text-sm font-bold md:text-base">
@@ -75,11 +75,11 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl flex items-baselin
7575

7676
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
7777
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
78-
<i class="mb-2 text-lg text-purple-500 fa-solid fa-hourglass-half"></i>
78+
<i class="mb-2 text-lg text-purple-500 fa-solid fa-bullseye"></i>
7979
<div>
80-
<p class="text-[10px] opacity-60 uppercase tracking-wide">Remaining</p>
80+
<p class="text-[10px] opacity-60 uppercase tracking-wide">Suggested/Day</p>
8181
<p class="text-sm font-bold md:text-base">
82-
{{ remainingPercentage | number:'1.0-1' }}%
82+
₹{{ suggestedPerDay | number:'1.0-1' }}
8383
</p>
8484
</div>
8585
</div>

‎src/app/component/income-components/saving/saving.component.ts‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
44
import { GoalService, Goal } from '../../../service/localStorage/goal.service';
55
import { SavingsService, Saving } from '../../../service/localStorage/savings.service';
66
import { ConfigService } from '../../../service/config/config.service';
7+
import { UtilService } from '../../../service/utils/util.service';
78

89
@Component({
910
selector: 'app-saving',
@@ -34,13 +35,17 @@ export class SavingComponent implements OnInit {
3435
goalTarget = 0;
3536
progressPercentage = 0;
3637
remainingPercentage = 0;
37-
currentMonthAdded = 0;
38+
goalRemaining = 0;
3839
averageSavedPerDay = 0;
40+
suggestedPerDay = 0;
41+
allowedPerDay = 0;
42+
3943

4044
constructor(
4145
private goalService: GoalService,
4246
private savingsService: SavingsService,
43-
private configService: ConfigService
47+
private configService: ConfigService,
48+
private utilService: UtilService
4449
) {
4550
this.todayDateStr = this.configService.getLocalTime().split('T')[0];
4651
}
@@ -63,8 +68,7 @@ export class SavingComponent implements OnInit {
6368
this.progressPercentage = Math.min(Math.max(progress, 0), 100);
6469
this.remainingPercentage = Math.max(100 - this.progressPercentage, 0);
6570

66-
const now = new Date();
67-
this.currentMonthAdded = (this.goalTarget - this.totalSavedAmount) > 0 ? this.goalTarget - this.totalSavedAmount : 0;
71+
this.goalRemaining = (this.goalTarget - this.totalSavedAmount) > 0 ? this.goalTarget - this.totalSavedAmount : 0;
6872

6973
if (this.currentGoal?.start_date && this.totalSavedAmount > 0) {
7074
const start = new Date(this.currentGoal.start_date).getTime();
@@ -74,6 +78,28 @@ export class SavingComponent implements OnInit {
7478
} else {
7579
this.averageSavedPerDay = 0;
7680
}
81+
this.allowedPerDay = this.allowedPerDayFunction();
82+
this.suggestedPerDay = this.suggestedPerDayFunction();
83+
}
84+
85+
allowedPerDayFunction(): number {
86+
if (this.currentGoal) {
87+
const days = this.utilService.calculateDaysBetween(this.currentGoal.start_date, this.currentGoal.target_date);
88+
if (days <= 0) return 0;
89+
this.allowedPerDay = this.goalTarget / days;
90+
return this.allowedPerDay;
91+
}
92+
return 0;
93+
}
94+
95+
suggestedPerDayFunction(): number {
96+
if (this.currentGoal) {
97+
const days = this.utilService.calculateDaysBetween(this.todayDateStr, this.currentGoal.target_date);
98+
if (days <= 0) return 0;
99+
this.suggestedPerDay = this.goalRemaining / days;
100+
return this.suggestedPerDay;
101+
}
102+
return 0;
77103
}
78104

79105
/* ---------- Saving Form Validation Getters ---------- */

‎src/app/service/utils/util.service.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable({
4+
providedIn: 'root'
5+
})
6+
export class UtilService {
7+
calculateDaysBetween(startDateStr: string, targetDateStr: string): number {
8+
9+
if (!startDateStr || !targetDateStr) {
10+
return 0;
11+
}
12+
13+
const startDate = new Date(startDateStr);
14+
const targetDate = new Date(targetDateStr);
15+
16+
if (isNaN(startDate.getTime()) || isNaN(targetDate.getTime())) {
17+
return 0;
18+
}
19+
20+
const start = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
21+
const end = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate());
22+
23+
const differenceInMs = end.getTime() - start.getTime();
24+
const differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);
25+
26+
const finalDays = Math.ceil(differenceInDays) + 1;
27+
28+
return finalDays < 0 ? 0 : finalDays;
29+
}
30+
}

0 commit comments

Comments
 (0)