refactor: update labels and translations in various components

- Changed 'تغییر گذرواژه' to 'تغییر رمز عبور' in layout.component.ts
- Updated HTML structure in list.component.html and saleInvoices components for consistency and improved styling.
- Modified sale-invoice-card.component.html to enhance the display of invoice details.
- Adjusted sale-invoice-card.component.ts to handle customer types more effectively.
- Enhanced the handling of invoice statuses in saleInvoices components.
- Improved layout and styling in shop components for better user experience.
- Refactored key-value component for better readability and maintainability.
- Updated upload file component to streamline file selection process.
- Added new styles in customize.scss and psp.scss for consistent UI.
- Adjusted environment configuration for better API endpoint management.

src/app/shared/components/key-value.component/key-value.component.html

@@ -1,25 +1,24 @@
-<div class="inline-flex flex-col gap-1 w-full">
-  <div class="inline-flex gap-2 items-center w-full">
-    <span class="text-muted-color text-base font-normal flex-auto grow-0">{{ label }}:</span>
+<div class="inline-flex w-full flex-col gap-1">
+  <div class="inline-flex w-full items-center gap-2">
+    <span class="text-muted-color flex-auto grow-0 text-base font-normal">{{ label }}:</span>
     <div
-      class="shrink-0 grow max-sm:text-left"
+      class="text-text-color shrink-0 grow text-base font-bold max-sm:text-left"
       [ngClass]="{
         'text-right': alignment === 'start',
         'text-center': alignment === 'center',
         'text-left': alignment === 'end',
-      }"
-    >
+      }">
       <ng-content>
-        @if (type === "thumbnail") {
-          <div class="w-20 h-20 rounded-2xl overflow-hidden bg-surface-100 cursor-pointer">
+        @if (type === 'thumbnail') {
+          <div class="bg-surface-100 h-20 w-20 cursor-pointer overflow-hidden rounded-2xl">
             @if (valueToShow()) {
-              <img [src]="valueToShow()" class="w-full h-full object-cover" />
+              <img [src]="valueToShow()" class="h-full w-full object-cover" />
             }
           </div>
-        } @else if (valueType() === "tag") {
+        } @else if (valueType() === 'tag') {
           <p-tag [value]="valueToShow()?.toString()" [severity]="value ? 'contrast' : 'danger'" />
         } @else {
-          <span class="text-text-color text-base font-bold grow"> {{ valueToShow() }}</span>
+          <span class="text-text-color grow text-base font-bold"> {{ valueToShow() }}</span>
         }
       </ng-content>
     </div>