merging code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/bank-calendar/add-holiday-dialog/add-holiday-dialog.component.html

@@ -41,7 +41,14 @@
       <div class="hol-row hol-row--two">
         <mat-form-field appearance="outline" class="hol-field" (click)="fromPicker.open()">
           <mat-label>From Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromPicker" required formControlName="fromDate" />
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="fromPicker"
+            required
+            formControlName="fromDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
           <mat-datepicker #fromPicker></mat-datepicker>
           @if (holidayForm.controls.fromDate.hasError('required')) {
@@ -51,7 +58,14 @@
 
         <mat-form-field appearance="outline" class="hol-field" (click)="toPicker.open()">
           <mat-label>To Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toPicker" required formControlName="toDate" />
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="toPicker"
+            required
+            formControlName="toDate"
+          />
           <mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
           <mat-datepicker #toPicker></mat-datepicker>
           @if (holidayForm.controls.toDate.hasError('required')) {
@@ -90,7 +104,14 @@
         <div class="hol-row">
           <mat-form-field appearance="outline" class="hol-field" (click)="reschPicker.open()">
             <mat-label>Repayments Rescheduled To</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reschPicker" required formControlName="repaymentsRescheduledTo" />
+            <input
+              matInput
+              [min]="minDate"
+              [max]="maxDate"
+              [matDatepicker]="reschPicker"
+              required
+              formControlName="repaymentsRescheduledTo"
+            />
             <mat-datepicker-toggle matSuffix [for]="reschPicker"></mat-datepicker-toggle>
             <mat-datepicker #reschPicker></mat-datepicker>
           </mat-form-field>

src/app/bank-calendar/add-holiday-dialog/add-holiday-dialog.component.ts

@@ -42,12 +42,27 @@ export class AddHolidayDialogComponent implements OnInit {
 
   ngOnInit() {
     this.holidayForm = this.fb.group({
-      name: ['', Validators.required],
+      name: [
+        '',
+        Validators.required
+      ],
       description: [''],
-      fromDate: ['', Validators.required],
-      toDate: ['', Validators.required],
-      reschedulingType: ['', Validators.required],
-      officeId: ['', Validators.required]
+      fromDate: [
+        '',
+        Validators.required
+      ],
+      toDate: [
+        '',
+        Validators.required
+      ],
+      reschedulingType: [
+        '',
+        Validators.required
+      ],
+      officeId: [
+        '',
+        Validators.required
+      ]
     });
 
     this.loadData();

src/app/bank-calendar/bank-calendar.component.html

@@ -111,7 +111,16 @@
               [class.cal-grid__day--sat2nd4th]="(day.is2ndSaturday || day.is4thSaturday) && day.isCurrentMonth"
               [class.cal-grid__day--holiday]="day.isHoliday && day.isCurrentMonth"
               [class.cal-grid__day--working]="day.isWorking && day.isCurrentMonth"
-              [matTooltip]="day.holidayName || (day.is2ndSaturday ? '2nd Saturday Off' : day.is4thSaturday ? '4th Saturday Off' : day.isSunday && day.isCurrentMonth ? 'Sunday' : '')"
+              [matTooltip]="
+                day.holidayName ||
+                (day.is2ndSaturday
+                  ? '2nd Saturday Off'
+                  : day.is4thSaturday
+                    ? '4th Saturday Off'
+                    : day.isSunday && day.isCurrentMonth
+                      ? 'Sunday'
+                      : '')
+              "
             >
               {{ day.isCurrentMonth ? day.date : '' }}
             </div>

src/app/bank-calendar/bank-calendar.component.scss

@@ -6,6 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@use 'sass:color';
+
 $navy: #0d1b2a;
 $blue: #1e88e5;
 $green: #10b981;
@@ -239,7 +241,7 @@ $purple: #7c3aed;
     flex-shrink: 0;
 
     &:hover {
-      background: darken($blue, 8%);
+      background: color.adjust($blue, $lightness: -8%);
       box-shadow: 0 2px 8px rgb(30 136 229 / 35%);
     }
   }
@@ -434,7 +436,7 @@ $purple: #7c3aed;
 }
 
 // ─── Responsive ───
-@media screen and (max-width: 1200px) {
+@media screen and (width <= 1200px) {
   .cal-months {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -444,7 +446,7 @@ $purple: #7c3aed;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
   .cal-months {
     grid-template-columns: 1fr;
   }

src/app/bank-calendar/bank-calendar.component.ts

@@ -56,7 +56,15 @@ export class BankCalendarComponent implements OnInit {
 
   currentYear: number;
   months: MonthData[] = [];
-  weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  weekDays = [
+    'Sun',
+    'Mon',
+    'Tue',
+    'Wed',
+    'Thu',
+    'Fri',
+    'Sat'
+  ];
   workingDaysConfig: string[] = [];
   holidays: any[] = [];
   overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
@@ -135,7 +143,14 @@ export class BankCalendarComponent implements OnInit {
 
   private loadWorkingDays() {
     // Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off)
-    this.workingDaysConfig = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+    this.workingDaysConfig = [
+      'MO',
+      'TU',
+      'WE',
+      'TH',
+      'FR',
+      'SA'
+    ];
     this.mergeGazettedHolidays();
     this.buildCalendar();
 
@@ -157,7 +172,11 @@ export class BankCalendarComponent implements OnInit {
     for (const gh of gazetted) {
       const exists = this.holidays.some((h: any) => {
         if (h.fromDate) {
-          const [y, m, d] = h.fromDate;
+          const [
+            y,
+            m,
+            d
+          ] = h.fromDate;
           return y === this.currentYear && m === gh.month && d === gh.day;
         }
         return false;
@@ -165,8 +184,16 @@ export class BankCalendarComponent implements OnInit {
       if (!exists) {
         this.holidays.push({
           name: gh.name,
-          fromDate: [this.currentYear, gh.month, gh.day],
-          toDate: [this.currentYear, gh.month, gh.day],
+          fromDate: [
+            this.currentYear,
+            gh.month,
+            gh.day
+          ],
+          toDate: [
+            this.currentYear,
+            gh.month,
+            gh.day
+          ],
           description: gh.name,
           status: { value: 'Active' }
         });
@@ -197,8 +224,18 @@ export class BankCalendarComponent implements OnInit {
     const today = new Date();
 
     const monthNames = [
-      'January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November', 'December'
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
     ];
 
     const days: CalendarDay[] = [];
@@ -287,7 +324,7 @@ export class BankCalendarComponent implements OnInit {
         isSunday: false,
         is2ndSaturday: false,
         is4thSaturday: false,
-        dayOfWeek: (days.length) % 7
+        dayOfWeek: days.length % 7
       });
     }
 
@@ -307,7 +344,11 @@ export class BankCalendarComponent implements OnInit {
   private getHolidayForDate(year: number, month: number, day: number): any {
     return this.holidays.find((h: any) => {
       if (h.fromDate) {
-        const [y, m, d] = h.fromDate;
+        const [
+          y,
+          m,
+          d
+        ] = h.fromDate;
         return y === year && m === month + 1 && d === day;
       }
       return false;
@@ -337,10 +378,28 @@ export class BankCalendarComponent implements OnInit {
 
   printHolidayList() {
     const monthNames = [
-      'January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November', 'December'
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ];
+    const dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday'
     ];
-    const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
     // --- Section 1: Gazetted / API Holidays ---
     const gazettedList: { sno: number; date: string; day: string; occasion: string }[] = [];
@@ -352,7 +411,11 @@ export class BankCalendarComponent implements OnInit {
 
     sortedHolidays.forEach((h: any, i: number) => {
       if (h.fromDate) {
-        const [y, m, d] = h.fromDate;
+        const [
+          y,
+          m,
+          d
+        ] = h.fromDate;
         const date = new Date(y, m - 1, d);
         gazettedList.push({
           sno: i + 1,
@@ -406,7 +469,7 @@ export class BankCalendarComponent implements OnInit {
     }
 
     const buildRows = (list: typeof gazettedList) =>
-      list.map(h => `<tr><td>${h.sno}</td><td>${h.date}</td><td>${h.day}</td><td>${h.occasion}</td></tr>`).join('');
+      list.map((h) => `<tr><td>${h.sno}</td><td>${h.date}</td><td>${h.day}</td><td>${h.occasion}</td></tr>`).join('');
 
     const html = `
       <!DOCTYPE html>