update saleinvoice single and create return from sale form, update agent.md file,

src/app/uikit/datepicker/datepicker.component.ts

@@ -1,16 +1,28 @@
-import { Component, EventEmitter, Input, Output, ViewChild, computed, signal } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  computed,
+  effect,
+  signal,
+} from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 import { FormControl } from '@angular/forms';
 
 import dayjs from 'dayjs';
 import jalaliday from 'jalaliday';
 
-import { Maybe } from '@/core';
-import { formatJalali } from '@/utils';
-import { CommonModule } from '@angular/common';
 import { InputText } from 'primeng/inputtext';
 import { Popover } from 'primeng/popover';
+
+import { Maybe } from '@/core';
+import { formatJalali } from '@/utils';
+
 import { UikitFieldComponent } from '../uikit-field.component';
+
 import {
   MonthInfo,
   MonthlyWeekDate,
@@ -25,145 +37,129 @@ dayjs.extend(jalaliday);
   selector: 'app-datepicker',
   standalone: true,
   templateUrl: './datepicker.component.html',
-  imports: [Popover, UikitFieldComponent, InputText, CommonModule],
+  imports: [CommonModule, Popover, InputText, UikitFieldComponent],
 })
-export class MiniMonthlyCalendarComponent {
-  @Input() control!: FormControl<Maybe<string>>;
-  @Input() alignment?: 'vertical' | 'horizontal' = 'vertical';
-  @Input() name?: string = 'date';
-  @Input() label?: string = 'تاریخ';
-  @Input() closeOnSelect?: boolean = true;
-  @Input() min?: string;
-  @Input() max?: string;
-  @Input() closedDays: number[] = [];
+export class DatepickerComponent {
+  @Input({ required: true })
+  control!: FormControl<Maybe<string>>;
 
-  @Output() clickOnDayEvent = new EventEmitter<MonthlyWeekDate>();
-  @Output() valueChange = new EventEmitter<string>();
+  @Input()
+  alignment: 'vertical' | 'horizontal' = 'vertical';
 
-  @ViewChild('op') op!: Popover;
+  @Input()
+  name = 'date';
+
+  @Input()
+  label = 'تاریخ';
+
+  @Input()
+  closeOnSelect = true;
+
+  /**
+   * Gregorian YYYY-MM-DD
+   */
+  @Input()
+  min?: string;
+
+  /**
+   * Gregorian YYYY-MM-DD
+   */
+  @Input()
+  max?: string;
+
+  @Input()
+  closedDays: number[] = [];
+
+  @Output()
+  valueChange = new EventEmitter<string>();
+
+  @Output()
+  clickOnDayEvent = new EventEmitter<MonthlyWeekDate>();
+
+  @ViewChild('op')
+  op!: Popover;
 
   readonly daysName = daysName;
 
   /**
-   * Current displayed month
-   * Gregorian YYYY-MM-DD
+   * Currently displayed month
    */
   private readonly activeDateSignal = signal(dayjs().format('YYYY-MM-DD'));
 
-  /**
-   * Selected value
-   * Gregorian YYYY-MM-DD
-   */
-  private readonly selectedDateSignal = signal<Maybe<string>>(null);
-
-  disabled = false;
-
   monthInfo = computed<MonthInfo>(() => prepareMonthInfo(this.activeDateSignal()));
 
   weekDaysDates = computed(() => prepareWeekDayDates(this.monthInfo(), this.min, this.max));
 
-  // -----------------------
-  // Getters
-  // -----------------------
+  constructor() {
+    effect(() => {
+      const value = this.value;
+
+      if (value) {
+        this.activeDateSignal.set(value);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.control?.value) {
+      this.activeDateSignal.set(this.control.value);
+    }
+
+    this.control.valueChanges.subscribe((value) => {
+      if (value) {
+        this.activeDateSignal.set(value);
+      }
+    });
+  }
 
   get value(): Maybe<string> {
-    return this.selectedDateSignal();
+    return this.control?.value ?? null;
   }
 
   get valueToShow(): Maybe<string> {
-    return this.selectedDateSignal() && formatJalali(this.selectedDateSignal()!);
+    if (!this.value) {
+      return null;
+    }
+
+    return formatJalali(this.value);
   }
 
   get activeDate(): string {
     return this.activeDateSignal();
   }
 
-  // -----------------------
-  // Setters
-  // -----------------------
-
-  set value(date: Maybe<string>) {
-    this.selectedDateSignal.set(date);
-    this.control.setValue(date);
-
-    if (date) {
-      this.activeDateSignal.set(date);
-    }
-  }
-
   set activeDate(date: string) {
     this.activeDateSignal.set(date);
   }
 
-  // -----------------------
-  // Navigation
-  // -----------------------
-
   changeMonth(months: number): void {
-    const newDate = dayjs(this.activeDateSignal()).add(months, 'month').format('YYYY-MM-DD');
-
-    this.activeDateSignal.set(newDate);
+    this.activeDateSignal.set(
+      dayjs(this.activeDateSignal()).add(months, 'month').format('YYYY-MM-DD')
+    );
   }
 
-  // -----------------------
-  // Selection
-  // -----------------------
-
   selectDate(day: MonthlyWeekDate): void {
-    if (this.disabled) {
-      return;
-    }
-
     if (day.isDisabled) {
       return;
     }
 
-    this.value = day.gregorianDate;
+    this.control.setValue(day.gregorianDate);
 
-    this.onChange(day.gregorianDate);
+    this.control.markAsDirty();
+    this.control.markAsTouched();
 
-    this.onTouched();
+    this.valueChange.emit(day.gregorianDate);
+    this.clickOnDayEvent.emit(day);
 
     if (this.closeOnSelect) {
-      this.op.toggle(false);
+      this.op.hide();
     }
-
-    this.clickOnDayEvent.emit(day);
-    this.valueChange.emit(day.gregorianDate);
   }
 
   isSelected(day: MonthlyWeekDate): boolean {
-    return !!this.value && this.value === day.gregorianDate;
+    return this.value === day.gregorianDate;
   }
 
-  // -----------------------
-  // CVA
-  // -----------------------
-
-  private onChange: (value: Maybe<string>) => void = () => {};
-
-  private onTouched: () => void = () => {};
-
-  writeValue(value: Maybe<string>): void {
-    this.value = value;
-  }
-
-  registerOnChange(fn: (value: Maybe<string>) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  // -----------------------
-  // Helpers
-  // -----------------------
-
   trackByIndex(index: number): number {
     return index;
   }