Skip to content

Commit d1d7f3d

Browse files
devnamdev2003devnamdev2003
committed
up
1 parent c7d54d7 commit d1d7f3d

1 file changed

Lines changed: 109 additions & 56 deletions

File tree

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

Lines changed: 109 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,35 @@
88
<div class="flex items-center gap-3">
99
<div
1010
class="flex items-center justify-center w-8 h-8 shadow-lg rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 shadow-indigo-500/30">
11-
<i class="text-white fa-solid fa-wallet"></i>
11+
<i class="text-white fa-solid" [class]="viewMode === 'salary' ? 'fa-wallet' : 'fa-piggy-bank'"></i>
1212
</div>
1313
<div>
14-
<p class="text-md font-bold">Financial Dashboard</p>
14+
<p class="text-md font-bold">{{ viewMode === 'salary' ? 'Salary Dashboard' : 'Budget Planner' }}</p>
1515
</div>
1616
</div>
17+
<div class="relative flex w-32 h-8 bg-[var(--color-surface)] rounded-full shadow-md
18+
transition-all duration-300 ease-out select-none cursor-pointer">
1719

18-
<div class="flex items-center gap-3 relative right-6">
19-
<!-- Text label that opens month picker -->
20-
<div class="text-md font-semibold cursor-pointer select-none" (click)="hiddenMonthInput.showPicker()">
21-
{{ selectedMonth | date:'MMM yyyy' }}
20+
<div class="absolute top-0 left-0 h-full w-1/2 bg-[var(--theme-color)] rounded-full transition-transform duration-300 ease-out shadow-sm"
21+
[ngClass]="{ 'translate-x-0': viewMode === 'salary', 'translate-x-full': viewMode === 'budget' }">
2222
</div>
2323

24-
<!-- Hidden Month Input -->
25-
<div class="hiddeninputdiv absolute right-6">
26-
<input #hiddenMonthInput type="month" class="hiddeninput" [ngModel]="selectedMonth"
27-
(ngModelChange)="updateMonth($event)" [max]="maxMonth" />
28-
</div>
24+
<button
25+
class="relative z-10 w-1/2 h-full flex items-center justify-center text-xs transition-colors duration-200 focus:outline-none"
26+
(click)="toggleView('salary')"
27+
[ngClass]="{ 'text-white': viewMode === 'salary', 'text-[var(--color-text)] opacity-70': viewMode !== 'salary' }"
28+
title="Salary View">
29+
Salary
30+
</button>
31+
32+
<button
33+
class="relative z-10 w-1/2 h-full flex items-center justify-center text-xs transition-colors duration-200 focus:outline-none"
34+
(click)="toggleView('budget')"
35+
[ngClass]="{ 'text-white': viewMode === 'budget', 'text-[var(--color-text)] opacity-70': viewMode !== 'budget' }"
36+
title="Budget View">
37+
Budget
38+
</button>
39+
2940
</div>
3041

3142
</header>
@@ -35,42 +46,101 @@
3546

3647
<!-- Main Balance Card -->
3748
<section
38-
class="relative p-6 overflow-hidden text-white transition duration-500 transform cursor-default rounded-3xl bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 md:p-10 shadow-2xl shadow-indigo-500/20 hover:scale-[1.01] group animate-slide-up">
39-
<!-- Card Decoration -->
40-
<div class="absolute top-0 right-0 p-4 transition duration-500 opacity-10 group-hover:opacity-20">
41-
<i class="transform rotate-12 translate-x-4 -translate-y-4 fa-solid fa-sack-dollar text-9xl"></i>
49+
class="relative overflow-hidden text-white transition-all duration-500 rounded-3xl group animate-slide-up"
50+
[ngClass]="viewMode === 'salary' ? 'shadow-2xl shadow-indigo-500/20' : 'shadow-2xl shadow-emerald-500/20'">
51+
52+
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 transition-opacity duration-500 ease-in-out"
53+
[class.opacity-100]="viewMode === 'salary'" [class.opacity-0]="viewMode !== 'salary'">
4254
</div>
4355

44-
<div class="relative z-10">
45-
<p class="mb-1 text-sm font-medium tracking-wider text-indigo-200 uppercase">{{ balanceLable }}</p>
46-
<h2 class="mb-6 text-2xl font-bold tracking-tight md:text-4xl">{{ userCurrancy }} {{ totalBalance |
47-
number:'1.1-2'}} / {{totalBudget > 0 ? (totalBudget | number:'1.1-2') : (totalIncome |
48-
number:'1.1-2')}}
49-
</h2>
56+
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 via-teal-600 to-emerald-800 transition-opacity duration-500 ease-in-out"
57+
[class.opacity-100]="viewMode === 'budget'" [class.opacity-0]="viewMode !== 'budget'">
58+
</div>
5059

51-
<div class="flex gap-8">
52-
<div>
53-
<div class="flex items-center gap-2 mb-1 text-xs text-indigo-200 md:text-sm">
54-
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
55-
<i class="fa-solid fa-arrow-down text-[10px]"></i>
60+
<div class="absolute top-0 right-0 p-4 transition-all duration-500 transform"
61+
[ngClass]="viewMode === 'salary' ? 'opacity-20 translate-y-0 rotate-12' : 'opacity-0 translate-y-4 rotate-0'">
62+
<i class="fa-solid fa-sack-dollar text-9xl"></i>
63+
</div>
64+
65+
<div class="absolute top-0 right-0 p-4 transition-all duration-500 transform"
66+
[ngClass]="viewMode === 'budget' ? 'opacity-20 translate-y-0 rotate-12' : 'opacity-0 translate-y-4 rotate-0'">
67+
<i class="fa-solid fa-chart-pie text-9xl"></i>
68+
</div>
69+
70+
71+
<div class="relative z-10 grid grid-cols-1 grid-rows-1">
72+
73+
<div class="col-start-1 row-start-1 p-6 md:p-10 transition-all duration-500 ease-out transform"
74+
[ngClass]="viewMode === 'salary' ? 'opacity-100 scale-100 pointer-events-auto' : 'opacity-0 scale-95 pointer-events-none'">
75+
76+
<p class="mb-1 text-xs font-medium tracking-wider uppercase opacity-80">Current Balance</p>
77+
78+
<h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
79+
{{ userCurrancy }} {{ (totalIncome - totalExpense) | number:'1.1-2' }}
80+
</h2>
81+
82+
<div class="flex gap-8">
83+
<div>
84+
<div class="flex items-center gap-2 mb-1 text-xs opacity-80 md:text-sm">
85+
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
86+
<i class="fa-solid fa-arrow-down text-[10px]"></i>
87+
</div>
88+
Total Income
89+
</div>
90+
<p class="text-xl font-semibold md:text-2xl">
91+
{{ userCurrancy }}{{ totalIncome | number:'1.2-2'}}
92+
</p>
93+
</div>
94+
<div>
95+
<div class="flex items-center gap-2 mb-1 text-xs opacity-80 md:text-sm">
96+
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
97+
<i class="fa-solid fa-arrow-up text-[10px]"></i>
98+
</div>
99+
Total Spent
56100
</div>
57-
Income
101+
<p class="text-xl font-semibold md:text-2xl text-white">
102+
{{ userCurrancy }}{{ totalExpense | number:'1.2-2'}}
103+
</p>
58104
</div>
59-
<p class="text-xl font-semibold md:text-2xl">{{ userCurrancy }}{{ totalIncome |
60-
number:'1.2-2'}}</p>
61105
</div>
62-
<div>
63-
<div class="flex items-center gap-2 mb-1 text-xs text-indigo-200 md:text-sm">
64-
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
65-
<i class="fa-solid fa-arrow-up text-[10px]"></i>
106+
</div>
107+
108+
109+
<div class="col-start-1 row-start-1 p-6 md:p-10 transition-all duration-500 ease-out transform"
110+
[ngClass]="viewMode === 'budget' ? 'opacity-100 scale-100 pointer-events-auto' : 'opacity-0 scale-95 pointer-events-none'">
111+
112+
<p class="mb-1 text-xs font-medium tracking-wider uppercase opacity-80">Remaining Budget</p>
113+
114+
<h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
115+
{{ userCurrancy }} {{ (totalBudget - totalExpense) | number:'1.1-2' }}
116+
</h2>
117+
118+
<div class="flex gap-8">
119+
<div>
120+
<div class="flex items-center gap-2 mb-1 text-xs opacity-80 md:text-sm">
121+
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
122+
<i class="fa-solid fa-bullseye text-[10px]"></i>
123+
</div>
124+
Total Budget
125+
</div>
126+
<p class="text-xl font-semibold md:text-2xl">
127+
{{ userCurrancy }}{{ totalBudget | number:'1.2-2'}}
128+
</p>
129+
</div>
130+
<div>
131+
<div class="flex items-center gap-2 mb-1 text-xs opacity-80 md:text-sm">
132+
<div class="flex items-center justify-center w-5 h-5 rounded-full bg-white/20">
133+
<i class="fa-solid fa-arrow-up text-[10px]"></i>
134+
</div>
135+
Total Spent
66136
</div>
67-
Expense
137+
<p class="text-xl font-semibold md:text-2xl text-white">
138+
{{ userCurrancy }}{{ totalExpense | number:'1.2-2'}}
139+
</p>
68140
</div>
69-
<p class="text-xl font-semibold md:text-2xl text-white">{{ userCurrancy }}{{ totalExpense |
70-
number:'1.2-2'}}
71-
</p>
72141
</div>
73142
</div>
143+
74144
</div>
75145
</section>
76146

@@ -138,7 +208,7 @@ <h2 class="mb-6 text-2xl font-bold tracking-tight md:text-4xl">{{ userCurrancy }
138208
<p class="text-[10px] text-center italic" [ngClass]="analysisTextClass">{{ analysisText }}</p>
139209
</section>
140210

141-
<!-- Transactions List Header (Reset button removed) -->
211+
<!-- Transactions List Header -->
142212
<div class="flex items-end justify-between animate-slide-up" style="animation-delay: 0.2s;">
143213
<h3 class="text-xl font-semibold">Transactions</h3>
144214
</div>
@@ -148,7 +218,7 @@ <h3 class="text-xl font-semibold">Transactions</h3>
148218
@if (filteredTransactions.length === 0) {
149219
<div class="py-10 text-center opacity-50 animate-fade-in">
150220
<i class="mb-3 text-4xl fa-solid fa-filter"></i>
151-
<p>No transactions for {{ selectedMonth | date:'MMMM' }}</p>
221+
<p>No transactions found</p>
152222
<button (click)="openModal()" class="mt-4 text-indigo-500 underline">Add one now</button>
153223
</div>
154224
} @else {
@@ -224,8 +294,6 @@ <h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transacti
224294
</div>
225295

226296
<form (submit)="saveTransaction()">
227-
<!-- Date Input Removed (Handled automatically) -->
228-
229297
<!-- Amount / Salary -->
230298
<div class="mb-4">
231299
<label class="block mb-2 text-sm opacity-60">Amount / Salary</label>
@@ -243,21 +311,6 @@ <h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transacti
243311
}
244312
</div>
245313

246-
<!-- Budget -->
247-
<div class="mb-4 animate-fade-in">
248-
<label class="block mb-2 text-sm opacity-60">Budget for this month (Optional)</label>
249-
<div class="relative">
250-
<span class="absolute left-4 top-3.5 opacity-40"><i class="fa-solid fa-chart-line"></i></span>
251-
<input type="number" [(ngModel)]="newBudget" name="budget" placeholder="e.g. 5000"
252-
class="w-full py-3 pl-10 pr-4 transition-colors border rounded-xl focus:outline-none focus:border-indigo-500"
253-
[class.border-red-500]="errors().budget"
254-
style="background-color: var(--color-bg-500); border-color: var(--color-bg-600); color: inherit;">
255-
</div>
256-
@if (errors().budget) {
257-
<p class="text-xs text-red-500 mt-1 animate-fade-in">{{ errors().budget }}</p>
258-
}
259-
</div>
260-
261314
<!-- Note (New) -->
262315
<div class="mb-4">
263316
<label class="block mb-2 text-sm opacity-60">Note</label>

0 commit comments

Comments
 (0)