add is_from_income in saving form

Author: devnamdev2003

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

@@ -150,9 +150,18 @@ <h3 class="text-xl font-semibold">Recent Savings</h3>
                     <i class="fa-solid fa-arrow-down"></i>
                 </div>
                 <div>
-                    <p class="font-bold text-sm md:text-base truncate max-w-[140px] md:max-w-[250px]">
-                        {{ s.note || 'Savings Addition' }}
-                    </p>
+                    <div class="flex items-center gap-2">
+                        <p class="font-bold text-sm md:text-base truncate max-w-[140px] md:max-w-[250px]">
+                            {{ s.note || 'Savings Addition' }}
+                        </p>
+                        <!-- Income Indication Badge -->
+                        @if (s.is_from_income) {
+                        <span
+                            class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-indigo-500/10 text-indigo-500 border border-indigo-500/20 whitespace-nowrap">
+                            <i class="fa-solid fa-briefcase mr-1 text-[9px]"></i> Income
+                        </span>
+                        }
+                    </div>
                     <p class="text-[10px] md:text-xs opacity-60 font-medium mt-0.5">
                         {{ s.date | date:'MMMM yyyy' }}
                     </p>
@@ -249,6 +258,26 @@ <h3 class="text-xl font-bold">
                         class="fa-solid fa-circle-exclamation mr-1"></i>{{ savingNoteError }}</p>
                 }
             </div>
+
+            <!-- New Toggle Field for Income Source -->
+            <div>
+                <label
+                    class="flex items-center justify-between p-4 transition-colors border rounded-xl cursor-pointer hover:opacity-80"
+                    style="background-color: var(--color-bg-500); border-color: var(--color-bg-600);">
+                    <div class="flex flex-col">
+                        <span class="text-sm font-medium"><i class="fa-solid fa-briefcase mr-2 opacity-60"></i>From
+                            Regular Income</span>
+                        <span class="text-xs opacity-50 mt-1">Is this amount part of your income?</span>
+                    </div>
+                    <div class="relative inline-flex items-center ml-4">
+                        <input type="checkbox" [(ngModel)]="savingForm.is_from_income" class="sr-only peer">
+                        <div
+                            class="w-11 h-6 bg-gray-400/50 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500">
+                        </div>
+                    </div>
+                </label>
+            </div>
+
         </div>
 
         <div class="flex gap-3">

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

@@ -146,7 +146,8 @@ export class SavingComponent implements OnInit {
       saving_id: this.editingSavingId || 'sav_' + Date.now(),
       amount: Number(this.savingForm.amount),
       date: this.savingForm.date!,
-      note: this.savingForm.note || ''
+      note: this.savingForm.note || '',
+      is_from_income: this.savingForm.is_from_income || false
     };
 
     if (this.editingSavingId) {

src/app/features/salary/salary.component.ts

@@ -130,7 +130,7 @@ export class SalaryComponent implements OnInit {
   ) {
     this.userCurrancy = this.userService.getValue<string>('currency') || '';
     this.viewMode = this.userService.getValue<'salary' | 'budget' | 'saving'>('salary_view_mode') || 'salary';
-    this.totalSavings = this.savingsService.getTotalSavings() > 0 ? this.savingsService.getTotalSavings() : 0; 
+
   }
 
   /**
@@ -177,6 +177,7 @@ export class SalaryComponent implements OnInit {
     this.totalExpense = this.totalExpenseFunction();
     this.totalIncome = this.filteredTransactions.reduce((acc, t) => acc + (t.amount || 0), 0);
     this.totalBudget = this.filteredTransactions.reduce((acc, t) => acc + (t.budget || 0), 0);
+    this.totalSavings = this.savingsService.getTotalSavings() > 0 ? this.savingsService.getTotalSavings() : 0;
     this.salaryGrowth = this.salaryGrowthFunction(allTransactions);
     this.dateMetrics = this.dateMetricsFunction();
     this.dailyAllowed = this.dailyAllowedFunction();
@@ -228,6 +229,12 @@ export class SalaryComponent implements OnInit {
     return (balance / this.totalIncome) * 100;
   }
 
+  totalSavingsFunction(): number {
+    const savingsAmount = this.savingsService.getTotalSavings();
+    return savingsAmount > 0 ? savingsAmount : 0;;
+  }
+
+
   /**
    * Aggregates total expenses based on whether the user is viewing all time or the current month's budget.
    * @returns Total expense amount

src/app/service/localStorage/savings.service.ts

@@ -9,6 +9,7 @@ export interface Saving {
     amount: number;
     date: string;
     note: string;
+    is_from_income?: boolean;
 }
 
 /**

src/app/service/localStorage/storage.service.ts

@@ -128,6 +128,7 @@ export class StorageService {
     amount: 0,
     date: "",
     note: "",
+    is_from_income: false
   };
 
   /**