fix(clients): address-proof date fields use calendar picker, Pension Payment Order gets one too

Both the address-proof upload dialog and the permanent-address step used a
native `type="date"` input for the issue/statement date, so no calendar
popup was available. Switched both to Angular Material's datepicker, kept
the client-india-address-step round-trip (payload -> saved description ->
re-parsed on edit) working with the Dates util now that the control holds
a Date object instead of a raw string.

Pension Payment Orders was also the only "Financial & Other" address-proof
type missing requiresDate, so selecting it never showed a date field at
all — added the flag and moved Monthly/Yearly Turnover under the "Other
Income" heading alongside Agriculture/Non-Agriculture Income.

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -347,9 +347,18 @@
                     <i class="fa fa-calendar"></i> Issue / statement date
                     <span class="kyc-opt">(not older than 3 months)</span>
                   </label>
-                  <div class="kyc-input-wrap kyc-input-wrap--date">
-                    <i class="fa fa-calendar-o kyc-input-wrap__icon"></i>
-                    <input type="date" class="kyc-input kyc-input--date" formControlName="issueDate" />
+                  <div class="kyc-input-wrap kyc-input-wrap--date" (click)="uploadIssueDatePicker.open()">
+                    <input
+                      class="kyc-input kyc-input--date"
+                      [matDatepicker]="uploadIssueDatePicker"
+                      formControlName="issueDate"
+                      readonly
+                    />
+                    <mat-datepicker-toggle
+                      class="kyc-input-wrap__calendar-toggle"
+                      [for]="uploadIssueDatePicker"
+                    ></mat-datepicker-toggle>
+                    <mat-datepicker #uploadIssueDatePicker></mat-datepicker>
                   </div>
                 </div>
               }

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.scss

@@ -388,42 +388,32 @@ $red-900: #993c1d;
   padding-left: 38px;
 }
 
-/* Date input — match styling of other kyc inputs */
+/* Date input — opens the Material calendar picker; styled to match other kyc inputs */
 .kyc-input--date {
   font-family: inherit;
   color: $gray-900;
   cursor: pointer;
   min-height: 40px;
-  padding-right: 14px !important;
+  padding-left: 12px !important;
+  padding-right: 40px !important;
+}
 
-  &::-webkit-calendar-picker-indicator {
-    opacity: 0.55;
-    cursor: pointer;
-    filter: grayscale(1);
-    transition: opacity 0.15s;
+.kyc-input-wrap--date .kyc-input-wrap__calendar-toggle {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: $gray-500;
+
+  ::ng-deep .mat-mdc-icon-button {
+    width: 32px;
+    height: 32px;
+    padding: 4px;
   }
 
-  &:hover::-webkit-calendar-picker-indicator {
-    opacity: 0.9;
-  }
-
-  &::-webkit-datetime-edit {
-    color: $gray-900;
-    padding-top: 1px;
-  }
-
-  &::-webkit-datetime-edit-fields-wrapper {
-    color: $gray-900;
-  }
-
-  &::-webkit-datetime-edit-text {
-    color: $gray-500;
-    padding: 0 2px;
-  }
-
-  &:invalid::-webkit-datetime-edit,
-  &:not(:focus):placeholder-shown::-webkit-datetime-edit {
-    color: $gray-500;
+  ::ng-deep .mat-mdc-icon-button svg {
+    width: 18px;
+    height: 18px;
   }
 }