Skip to content

Commit ac6b13e

Browse files
devnamdev2003devnamdev2003
committed
chnage salary view
1 parent d1d7f3d commit ac6b13e

4 files changed

Lines changed: 270 additions & 500 deletions

File tree

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

Lines changed: 110 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -69,62 +69,33 @@
6969

7070

7171
<div class="relative z-10 grid grid-cols-1 grid-rows-1">
72+
<div class="col-start-1 row-start-1 p-6 md:p-10 transition-all duration-500 ease-out transform">
7273

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
100-
</div>
101-
<p class="text-xl font-semibold md:text-2xl text-white">
102-
{{ userCurrancy }}{{ totalExpense | number:'1.2-2'}}
103-
</p>
104-
</div>
105-
</div>
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>
74+
<p class="mb-1 text-xs font-medium tracking-wider uppercase opacity-80">
75+
{{ viewMode === 'salary' ? 'Current Balance' : 'Remaining Budget' }}
76+
</p>
11377

11478
<h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
115-
{{ userCurrancy }} {{ (totalBudget - totalExpense) | number:'1.1-2' }}
79+
{{ userCurrancy }}
80+
@if(viewMode === 'salary') {
81+
{{ (totalIncome - totalExpense) | number:'1.1-2' }}
82+
} @else {
83+
{{ (totalBudget - totalExpense) | number:'1.1-2' }}
84+
}
11685
</h2>
11786

11887
<div class="flex gap-8">
11988
<div>
12089
<div class="flex items-center gap-2 mb-1 text-xs opacity-80 md:text-sm">
12190
<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>
91+
<i class="fa-solid text-[10px]"
92+
[class]="viewMode === 'salary' ? 'fa-arrow-down' : 'fa-bullseye'"></i>
12393
</div>
124-
Total Budget
94+
{{ viewMode === 'salary' ? 'Total Income' : 'Total Budget' }}
12595
</div>
12696
<p class="text-xl font-semibold md:text-2xl">
127-
{{ userCurrancy }}{{ totalBudget | number:'1.2-2'}}
97+
{{ userCurrancy }}{{ (viewMode === 'salary' ? totalIncome : totalBudget) |
98+
number:'1.2-2'}}
12899
</p>
129100
</div>
130101
<div>
@@ -149,18 +120,36 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
149120
<!-- Box 1: Avg Allowed -->
150121
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
151122
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
152-
<i class="mb-2 text-lg text-indigo-500 fa-solid fa-scale-balanced"></i>
153-
<div>
154-
<p class="text-[10px] opacity-60 uppercase tracking-wide">Allowed/Day</p>
155-
<p class="text-sm font-bold md:text-base">
156-
@if (dailyAllowed !== null) {
157-
{{ userCurrancy }}{{ dailyAllowed | number:'1.2-2' }}
158-
} @else {
159-
N/A
160-
}
161123

162-
</p>
163-
</div>
124+
@if (viewMode === 'salary') {
125+
@if (salaryGrowth > 0) {
126+
<i class="mb-2 text-lg text-emerald-500 fa-solid fa-arrow-trend-up"></i>
127+
} @else if (salaryGrowth < 0) { <i class="mb-2 text-lg text-red-500 fa-solid fa-arrow-trend-down">
128+
</i>
129+
} @else {
130+
<i class="mb-2 text-lg fa-solid fa-minus opacity-50"></i>
131+
}
132+
133+
<div>
134+
<p class="text-[10px] opacity-60 uppercase tracking-wide">Growth Rate</p>
135+
<div class="flex items-end gap-1">
136+
<p class="text-sm font-bold md:text-base"
137+
[ngClass]="salaryGrowth >= 0 ? 'text-emerald-500' : 'text-red-500'">
138+
{{ salaryGrowth > 0 ? '+' : ''}}{{ salaryGrowth | number:'1.1-1' }}%
139+
</p>
140+
</div>
141+
</div>
142+
} @else {
143+
<i class="mb-2 text-lg text-indigo-500 fa-solid fa-scale-balanced"></i>
144+
<div>
145+
<p class="text-[10px] opacity-60 uppercase tracking-wide">Allowed/Day</p>
146+
<p class="text-sm font-bold md:text-base">
147+
@if (dailyAllowed !== null) {
148+
{{ userCurrancy }}{{ dailyAllowed | number:'1.2-2' }}
149+
} @else { N/A }
150+
</p>
151+
</div>
152+
}
164153
</div>
165154

166155
<!-- Box 2: Spent / Day -->
@@ -169,34 +158,43 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
169158
<i class="mb-2 text-lg text-orange-500 fa-solid fa-fire-flame-curved"></i>
170159
<div>
171160
<p class="text-[10px] opacity-60 uppercase tracking-wide">Spent/Day</p>
172-
<p class="text-sm font-bold md:text-base">{{ userCurrancy }}{{ dailySpent | number:'1.2-2' }}
161+
<p class="text-sm font-bold md:text-base">
162+
{{ userCurrancy }}{{ dailySpent | number:'1.2-2' }}
173163
</p>
174164
</div>
175165
</div>
176166

177167
<!-- Box 3: Suggested / Day -->
178168
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
179169
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
170+
171+
@if (viewMode === 'salary') {
172+
<i class="mb-2 text-lg fa-solid fa-percent"
173+
[ngClass]="savingsPercentage >= 0 ? 'text-purple-500' : 'text-red-500'"></i>
174+
<div>
175+
<p class="text-[10px] opacity-60 uppercase tracking-wide">Savings Rate</p>
176+
<p class="text-sm font-bold md:text-base" [class.text-red-500]="savingsPercentage < 0">
177+
{{ savingsPercentage | number:'1.1-1' }}%
178+
</p>
179+
</div>
180+
} @else {
180181
<i class="mb-2 text-lg text-teal-500 fa-solid fa-bullseye"></i>
181182
<div>
182183
<p class="text-[10px] opacity-60 uppercase tracking-wide">Suggested/Day</p>
183184
<p class="text-sm font-bold md:text-base">
184185
@if (dailySuggested !== null) {
185186
{{ userCurrancy }}{{ dailySuggested | number:'1.2-2' }}
186-
} @else {
187-
N/A
188-
}
187+
} @else { N/A }
189188
</p>
190-
191189
</div>
190+
}
192191
</div>
193192
</section>
194-
195193
<!-- Visual Bar Chart -->
196194
<section class="p-4 rounded-2xl animate-slide-up"
197195
style="animation-delay: 0.15s; background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
198196
<div class="flex justify-between mb-2 text-xs opacity-60">
199-
<span>{{ budgetLabel }}</span>
197+
<span>{{ viewMode === 'salary' ? 'Salary Usage' : 'Budget Usage' }}</span>
200198
<span>{{ budgetPercentage }}% used</span>
201199
</div>
202200
<div class="w-full h-3 mb-2 overflow-hidden rounded-full"
@@ -210,16 +208,21 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
210208

211209
<!-- Transactions List Header -->
212210
<div class="flex items-end justify-between animate-slide-up" style="animation-delay: 0.2s;">
213-
<h3 class="text-xl font-semibold">Transactions</h3>
211+
<h3 class="text-xl font-semibold">
212+
{{ viewMode === 'salary' ? 'Income Transactions' : 'Budget History' }}
213+
</h3>
214214
</div>
215215

216216
<!-- Transactions List -->
217217
<div class="pb-16 space-y-3 animate-slide-up" style="animation-delay: 0.3s;">
218218
@if (filteredTransactions.length === 0) {
219219
<div class="py-10 text-center opacity-50 animate-fade-in">
220220
<i class="mb-3 text-4xl fa-solid fa-filter"></i>
221-
<p>No transactions found</p>
221+
<p>{{ viewMode === 'salary' ? 'No Income found' : 'No Budget found for this month' }}</p>
222+
223+
@if(viewMode === 'salary' || (viewMode === 'budget' && !hasBudgetForCurrentMonth)) {
222224
<button (click)="openModal()" class="mt-4 text-indigo-500 underline">Add one now</button>
225+
}
223226
</div>
224227
} @else {
225228
@for (t of filteredTransactions; track t.salary_id) {
@@ -229,31 +232,25 @@ <h3 class="text-xl font-semibold">Transactions</h3>
229232
[class.border-l-4]="true">
230233

231234
<div class="z-10 flex items-center gap-4">
232-
<div class="flex items-center justify-center w-10 h-10 rounded-full
233-
bg-green-500/10 text-green-500">
234-
<i class="fa-solid fa-arrow-down"></i>
235+
<div class="flex items-center justify-center w-10 h-10 rounded-full"
236+
[ngClass]="viewMode === 'salary' ? 'bg-green-500/10 text-green-500' : 'bg-teal-500/10 text-teal-500'">
237+
<i class="fa-solid" [class]="viewMode === 'salary' ? 'fa-arrow-down' : 'fa-bullseye'"></i>
235238
</div>
236239
<div>
237-
@if(t.note) {
238-
<p class="font-medium truncate max-w-[120px]">{{ t.note }}</p>
239-
} @else {
240-
<p class="font-medium truncate max-w-[120px]">Income</p>
241-
}
240+
<p class="font-medium truncate max-w-[120px]">
241+
{{ viewMode === 'salary' ? 'Income' : 'Budget Limit' }}
242+
</p>
242243
<div class="flex flex-col text-xs opacity-60">
243244
<div class="flex gap-2">
244-
<span>{{ t.date | date:'mediumDate' }}</span>
245+
<span>{{ (t.month + '-01') | date:'MMMM yyyy' }}</span>
245246
</div>
246-
@if(t.budget) {
247-
<span class="text-[10px] text-indigo-400">Budget: {{ userCurrancy }}{{ t.budget |
248-
number:'1.2-2'}}</span>
249-
}
250247
</div>
251248
</div>
252249
</div>
253250

254251
<div class="z-10 flex flex-col items-end">
255252
<p class="font-bold text-green-500">
256-
{{ userCurrancy }}{{ t.amount | number:'1.2-2' }}
253+
{{ userCurrancy }}{{ (viewMode === 'salary' ? t.amount : t.budget) | number:'1.2-2' }}
257254
</p>
258255
<span class="text-[10px] opacity-40 group-hover:opacity-100 transition-opacity">Tap to
259256
edit</span>
@@ -272,20 +269,23 @@ <h3 class="text-xl font-semibold">Transactions</h3>
272269
</main>
273270
</div>
274271

275-
<!-- Floating Action Button -->
272+
@if (viewMode === 'salary' || (viewMode === 'budget' && !hasBudgetForCurrentMonth)) {
276273
<button (click)="openModal()"
277274
class="fixed z-40 flex items-center justify-center w-14 h-14 text-2xl text-white transition duration-200 rounded-full shadow-xl bottom-16 right-6 bg-indigo-500 shadow-indigo-500/40 hover:bg-indigo-600 active:scale-90 animate-bounce-subtle group">
278275
<i class="transition-transform duration-300 fa-solid fa-plus group-hover:rotate-90"></i>
279276
</button>
277+
}
280278

281-
<!-- Modal -->
282279
@if (showModal) {
283280
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center"
284281
(click)="closeModal()">
285282
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl animate-slide-up"
286283
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
287284
<div class="flex items-center justify-between mb-6">
288-
<h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transaction' }}</h3>
285+
<h3 class="text-xl font-bold">
286+
{{ editingId ? 'Edit' : 'Add' }}
287+
{{ viewMode === 'salary' ? 'Salary' : 'Budget' }}
288+
</h3>
289289
<button (click)="closeModal()"
290290
class="flex items-center justify-center w-8 h-8 transition rounded-full hover:opacity-70"
291291
style="background-color: var(--color-bg-500); color: var(--color-text);">
@@ -296,7 +296,9 @@ <h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transacti
296296
<form (submit)="saveTransaction()">
297297
<!-- Amount / Salary -->
298298
<div class="mb-4">
299-
<label class="block mb-2 text-sm opacity-60">Amount / Salary</label>
299+
<label class="block mb-2 text-sm opacity-60">
300+
{{ viewMode === 'salary' ? 'Salary Amount' : 'Budget Limit' }}
301+
</label>
300302
<div class="relative">
301303
<span class="absolute left-4 top-3.5 opacity-40"><i
302304
class="fa-solid fa-money-bill-1-wave"></i></span>
@@ -311,9 +313,23 @@ <h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transacti
311313
}
312314
</div>
313315

314-
<!-- Note (New) -->
315-
<div class="mb-4">
316-
<label class="block mb-2 text-sm opacity-60">Note</label>
316+
@if (viewMode === 'salary') {
317+
<div class="mb-4 animate-fade-in">
318+
<label class="block mb-2 text-sm opacity-60">For Month</label>
319+
<div class="relative">
320+
<span class="absolute left-4 top-3.5 opacity-40"><i class="fa-solid fa-calendar"></i></span>
321+
<input type="month" [(ngModel)]="newMonth" name="month"
322+
class="w-full py-3 pl-10 pr-4 transition-colors border rounded-xl focus:outline-none focus:border-indigo-500"
323+
[class.border-red-500]="errors().month"
324+
style="background-color: var(--color-bg-500); border-color: var(--color-bg-600); color: inherit;">
325+
</div>
326+
@if (errors().month) {
327+
<p class="text-xs text-red-500 mt-1 animate-fade-in">{{ errors().month }}</p>
328+
}
329+
</div>
330+
331+
<div class="mb-4 animate-fade-in">
332+
<label class="block mb-2 text-sm opacity-60">Note (Optional)</label>
317333
<div class="relative">
318334
<span class="absolute left-4 top-3.5 opacity-40"><i class="fa-solid fa-pen"></i></span>
319335
<input type="text" [(ngModel)]="newNote" name="note" placeholder="Extra details..."
@@ -326,9 +342,17 @@ <h3 class="text-xl font-bold">{{ editingId ? 'Edit Transaction' : 'New Transacti
326342
<p class="text-xs text-red-500 mt-1 animate-fade-in">{{ errors().note }}</p>
327343
}
328344
</div>
345+
}
346+
347+
@if (viewMode === 'budget') {
348+
<p class="mb-4 text-xs italic opacity-60 text-center">
349+
Setting budget for {{ currentMonth | date:'MMMM yyyy' }}.
350+
</p>
351+
}
352+
329353
<button type="submit"
330354
class="w-full py-4 mt-4 font-bold text-white transition bg-indigo-500 rounded-xl shadow-lg shadow-indigo-500/25 active:scale-95 hover:bg-indigo-600">
331-
{{ editingId ? 'Update Transaction' : 'Save Transaction' }}
355+
{{ editingId ? 'Update' : 'Save' }}
332356
</button>
333357
</form>
334358
</div>

0 commit comments

Comments
 (0)