Employee leaving date fixed.

Image now showing in vouchers fixed.
2026-09-03 18:53:16 +00:00
parent 76975d88f3
commit a06d18d93c
14 changed files with 1568 additions and 177 deletions
@@ -184,29 +184,70 @@
        </mat-autocomplete>
      </mat-form-field>
    </div>
-    <div class="row-container">
-      @for (item of form.files().value(); track item) {
-        <div class="img-container" class="flex-auto basis-1-5">
-          <img
-            [src]="item.thumbnail"
-            alt="img"
-            (click)="zoomImage(item)"
-            (keyup.enter)="zoomImage(item)"
-            tabindex="0"
-          />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
-      }
-      <div class="img-container" class="flex flex-auto basis-1-5">
-        <label ng-href for="fileUp">
-          <img
-            alt="add"
-            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-          />
+    <div class="attachments-section">
+      <div class="attachments-header">
+        <mat-icon class="attachments-header-icon">attach_file</mat-icon>
+        <span class="attachments-title">Attachments</span>
+        @if (form.files().value().length > 0) {
+          <span class="attachments-badge">{{ form.files().value().length }}</span>
+        }
+      </div>
+
+      <div class="attachments-grid">
+        @for (item of form.files().value(); track item) {
+          <div class="attachment-card">
+            <div
+              class="thumbnail-wrapper"
+              (click)="zoomImage(item)"
+              (keyup.enter)="zoomImage(item)"
+              tabindex="0"
+              role="button"
+              aria-label="View enlarged attachment"
+              title="Click to preview"
+            >
+              <img [src]="item.thumbnail" alt="Attachment thumbnail" class="thumbnail-img" />
+              <div class="zoom-overlay">
+                <mat-icon class="zoom-icon">zoom_in</mat-icon>
+              </div>
+            </div>
+            <button
+              mat-icon-button
+              type="button"
+              class="delete-btn"
+              (click)="deleteImage(item); $event.stopPropagation()"
+              aria-label="Delete attachment"
+              title="Delete attachment"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
+
+        <label
+          for="fileUp"
+          class="upload-tile"
+          tabindex="0"
+          (keydown.enter)="fileInput.click()"
+          role="button"
+          aria-label="Upload image attachments"
+        >
+          <div class="upload-content">
+            <div class="upload-icon-circle">
+              <mat-icon>add_photo_alternate</mat-icon>
+            </div>
+            <span class="upload-title">Add Image</span>
+            <span class="upload-subtitle">Click to upload</span>
+          </div>
        </label>
-        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+        <input
+          #fileInput
+          type="file"
+          id="fileUp"
+          multiple
+          accept="image/*"
+          class="file-input-hidden"
+          (change)="detectFiles($event)"
+        />
      </div>
    </div>
  }