cat-documents-ng 0.2.39 → 0.2.41

package/fesm2022/cat-documents-ng.mjs

@@ -1,52 +1,53 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ViewChild, ViewEncapsulation, Directive, NgModule, APP_INITIALIZER } from '@angular/core';
-import * as i5 from '@angular/common';
+import { Injectable, EventEmitter, Output, Input, Component, Directive, ViewChild, ViewEncapsulation, NgModule, APP_INITIALIZER } from '@angular/core';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { firstValueFrom, tap, EMPTY, catchError, throwError, of, combineLatest, Subscription } from 'rxjs';
+import { firstValueFrom, tap, EMPTY, catchError, throwError, of, combineLatest, Subscription, Subject, takeUntil, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { __decorate } from 'tslib';
 import { EntityStore, StoreConfig, QueryEntity } from '@datorama/akita';
 import * as i2 from '@angular/common/http';
-import { HttpParams, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i3 from 'primeng/api';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3$1 from 'primeng/api';
 import { MessageService } from 'primeng/api';
-import * as i8 from 'primeng/button';
+import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i9 from 'primeng/sidebar';
+import * as i10 from 'primeng/sidebar';
 import { SidebarModule } from 'primeng/sidebar';
-import * as i10 from 'primeng/messages';
-import * as i11 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i12 from 'primeng/dialog';
+import * as i5$2 from 'primeng/messages';
+import * as i7$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i13 from 'primeng/dropdown';
+import * as i14 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i14 from 'primeng/inputtext';
+import * as i15 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i2$1 from 'primeng/table';
+import * as i2$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i5$1 from 'primeng/ripple';
+import * as i5 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
+import * as i1 from '@angular/router';
 import * as i7 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i8$1 from 'primeng/progressbar';
+import * as i8 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i4 from 'ng2-pdf-viewer';
+import * as i6 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
-import * as i3$1 from 'primeng/accordion';
+import * as i3$2 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
-import * as i7$1 from 'primeng/badge';
+import * as i5$1 from 'primeng/inputtextarea';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import * as i7$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i8$2 from 'primeng/menu';
+import * as i8$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i9$1 from 'primeng/card';
+import * as i9 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { ListboxModule } from 'primeng/listbox';
 import { TimelineModule } from 'primeng/timeline';
 import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i1 from '@angular/router';
 import { PanelMenuModule } from 'primeng/panelmenu';
 
 /**
@@ -62,6 +63,7 @@ class SHARED {
      * Represents the info.
      */
     static HIDDEN = 'hidden';
+    static DOCUMENT_TYPES_DELETE = 'DocumentTypes-DELETE';
     /**
      * Represents the info.
      */
@@ -434,6 +436,45 @@ class SHARED {
     static DOCUMENT_UPLOADED = 'document-uploaded';
     static DOCUMENT_REJECTED = 'document-rejected';
     static DOCUMENT_ACCEPTED = 'document-accepted';
+    // Document Actions Constants
+    static ACCEPT_ACTION = 'accept';
+    static REJECT_ACTION = 'reject';
+    static DELETE_ACTION = 'delete';
+    static ACCEPT_CONFIRM_HEADER = 'Accept confirm';
+    static REJECT_CONFIRM_HEADER = 'Reject Confirm';
+    static ACCEPT_NOTE_LABEL = 'Write a note for Acceptance';
+    static REJECT_NOTE_LABEL = 'Write a note for rejection';
+    static ACCEPT_NOTE_PLACEHOLDER = 'Write a note for Acceptance';
+    static REJECT_NOTE_PLACEHOLDER = 'Write a note for rejection';
+    static CANCEL_BUTTON_LABEL = 'Cancel';
+    static ACCEPT_BUTTON_LABEL = 'Accept';
+    static REJECT_BUTTON_LABEL = 'Reject';
+    static DOCUMENT_ACCEPTED_MESSAGE = 'Document accepted successfully';
+    static DOCUMENT_REJECTED_MESSAGE = 'Document rejected successfully';
+    static DOCUMENT_UPDATE_ERROR_MESSAGE = 'Failed to update document. Please try again.';
+    static STATUS_APPROVED = 'Approved';
+    static STATUS_REJECTED = 'Rejected';
+    // Document Status Constants
+    static STATUS_PENDING = 'pending';
+    static STATUS_ACCEPTED = 'accepted';
+    static STATUS_REJECTED_LOWERCASE = 'rejected';
+    static STATUS_DECLINED = 'declined';
+    // Document Card CSS Classes
+    static CARD_PENDING = 'pending-card';
+    static CARD_ACCEPTED = 'accepted-card';
+    static CARD_REJECTED = 'rejected-card';
+    // Document Button CSS Classes
+    static BUTTON_SECONDARY_REJECT = 'secondary-reject';
+    static BUTTON_PRIMARY_REJECT = 'primary-reject';
+    static BUTTON_DEFAULT_REJECT = 'default-reject';
+    static BUTTON_PRIMARY_ACCEPT = 'primary-accept';
+    static BUTTON_SECONDARY_ACCEPT = 'secondary-accept';
+    static BUTTON_DEFAULT_ACCEPT = 'default-accept';
+    // Document Action Button Labels
+    static BUTTON_LABEL_REJECT = 'Reject';
+    static BUTTON_LABEL_REJECTED = 'Rejected';
+    static BUTTON_LABEL_ACCEPT = 'Accept';
+    static BUTTON_LABEL_ACCEPTED = 'Accepted';
 }
 /**
  * `DUMMYDOCUMENTLIST` is a mock list of document objects used for testing and development purposes.
@@ -567,7 +608,13 @@ const COUNTRIES = [
  * @type {{}}
  */
 const SUPPORTED_IMAGE_TYPES = [
-    'image/png'
+    'image/png',
+    'image/jpeg',
+    'image/jpg',
+    'image/gif',
+    'image/bmp',
+    'image/tiff',
+    'image/webp',
 ];
 /**
  * @constant {Array<{label: string, value: string, files: string[]}>} DOCUMENTTYPES
@@ -738,6 +785,7 @@ function createInitialState() {
         selectedMenuItem: null,
         selectedUserId: null,
         selectedStatus: null,
+        searchKey: null,
         showUserList: true,
         currentDocument: null,
         userList: [],
@@ -794,12 +842,16 @@ let DocumentStore = class DocumentStore extends EntityStore {
     setSelectedStatus(status) {
         this.update({ selectedStatus: status });
     }
+    setSearchKey(searchKey) {
+        this.update({ searchKey: searchKey });
+    }
     // Method to update all selection properties at once
-    setSelectionState(menuItem, userId, status) {
+    setSelectionState(menuItem, userId, status, searchKey = null) {
         this.update({
             selectedMenuItem: menuItem,
             selectedUserId: userId,
-            selectedStatus: status
+            selectedStatus: status,
+            searchKey: searchKey
         });
     }
     // Method to clear all selection state
@@ -808,6 +860,7 @@ let DocumentStore = class DocumentStore extends EntityStore {
             selectedMenuItem: null,
             selectedUserId: null,
             selectedStatus: null,
+            searchKey: null,
             showUserList: true
         });
     }
@@ -863,6 +916,13 @@ class URLS {
      * @type {string}
      */
     static DOCUMENT_UPLOAD = "Documents";
+    /**
+     * The URL endpoint for document uploads.
+     * Used to send documents to the server for storage or processing.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENTS = "documents";
     /**
      * The URL endpoint for document uploads.
      * Used to send documents to the server for storage or processing.
@@ -924,6 +984,7 @@ class URLS {
     static GETALL = "documents/getAllByContextId";
     static DOCUMENT_LIST = "list";
     static DOCUMENT_HISTORY = "documents/getDocumentHistoryByDocumentId/";
+    static DELETE_DOCUMENT = "documents/deleteDocumentByDocumentId/";
 }
 
 /**
@@ -1147,15 +1208,23 @@ class DocumentQuery extends QueryEntity {
         return this.select((state) => state.selectedStatus);
     }
     /**
-     * Selects all selection state properties (menu item, user ID, status).
-     * @returns {Observable<{menuItem: string | null, userId: string | null, status: string | null}>} Observable that emits the current selection state.
+     * Selects the current search key.
+     * @returns {Observable<string | null>} Observable that emits the current search key.
+     */
+    selectSearchKey() {
+        return this.select((state) => state.searchKey);
+    }
+    /**
+     * Selects all selection state properties (menu item, user ID, status, search key).
+     * @returns {Observable<{menuItem: string | null, userId: string | null, status: string | null, searchKey: string | null}>} Observable that emits the current selection state.
      * Note: menuItem is the _id of the selected menu item, not the label.
      */
     selectSelectionState() {
         return this.select((state) => ({
             menuItem: state.selectedMenuItem,
             userId: state.selectedUserId,
-            status: state.selectedStatus
+            status: state.selectedStatus,
+            searchKey: state.searchKey
         }));
     }
     /**
@@ -1168,7 +1237,8 @@ class DocumentQuery extends QueryEntity {
         return {
             menuItem: state.selectedMenuItem,
             userId: state.selectedUserId,
-            status: state.selectedStatus
+            status: state.selectedStatus,
+            searchKey: state.searchKey
         };
     }
     /**
@@ -1301,7 +1371,9 @@ class DocumentHttpService {
     getDocumentCatagories(contextId) {
         if (!contextId)
             return EMPTY;
-        return this.http.get(`${this.apiUrl}${URLS.DOCUMENTS_CATAGORIES}/${contextId}`).pipe(tap((categories) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENTS_CATAGORIES}/${contextId}`, { headers }).pipe(tap((categories) => {
             this.documentStore.setDocumentCategories(categories);
         }), catchError((error) => {
             return throwError(() => new Error(error));
@@ -1363,9 +1435,11 @@ class DocumentHttpService {
     * @returns {Observable<UserListModel[]>} Observable that emits the user list data.
     */
     getUserListByContextId(contextId) {
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
         if (!contextId)
             return EMPTY;
-        return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`).pipe(tap((userList) => {
+        return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`, { headers }).pipe(tap((userList) => {
             this.documentStore.setUserList(userList);
         }), catchError((error) => {
             return throwError(() => new Error(error));
@@ -1390,7 +1464,9 @@ class DocumentHttpService {
         if (categoryId) {
             params = params.set(SHARED.CATEGORY, categoryId);
         }
-        return this.http.get(url, { params }).pipe(tap((statusData) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.get(url, { params, headers }).pipe(tap((statusData) => {
             this.documentStore.setStatusData(statusData);
         }), catchError((error) => {
             return throwError(() => new Error(error));
@@ -1420,7 +1496,9 @@ class DocumentHttpService {
         if (searchKey) {
             params = params.set(SHARED.SEARCH_KEY, searchKey);
         }
-        return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params }).pipe(tap((response) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params, headers }).pipe(tap((response) => {
             if (response.documents) {
                 this.documentStore.setDocumentList(response.documents);
             }
@@ -1432,7 +1510,68 @@ class DocumentHttpService {
         if (!documentId) {
             return of([]);
         }
-        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_HISTORY}${documentId}`);
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_HISTORY}${documentId}`, { headers });
+    }
+    /**
+     * Updates the status of a document by document ID
+     * @param {string} documentId - The ID of the document to update
+     * @param {string} status - The new status (Approved, Rejected, etc.)
+     * @param {string} statusUpdateDescription - The description/note for the status update
+     * @returns {Observable<any>} Observable that emits the updated document data with normalized status
+     */
+    updateDocumentStatus(documentId, status, statusUpdateDescription) {
+        const payload = {
+            statusUpdateDescription: statusUpdateDescription
+        };
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.put(`${this.apiUrl}${URLS.DOCUMENTS}/updateDocumentStatusByDocumentId/${documentId}/${status}`, payload, { headers }).pipe(tap((response) => {
+            console.log('Document status updated successfully:', response);
+            // Normalize the response status to match component expectations
+            if (response && response.status) {
+                const normalizedStatus = this.normalizeStatus(response.status);
+                response.normalizedStatus = normalizedStatus;
+            }
+        }), catchError((error) => {
+            console.error('Error updating document status:', error);
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Normalizes the status from API response to match component expectations
+     * @param {string} status - The status from API response (Approved, Rejected, etc.)
+     * @returns {string} Normalized status value
+     */
+    normalizeStatus(status) {
+        switch (status.toLowerCase()) {
+            case 'approved':
+                return SHARED.STATUS_ACCEPTED;
+            case 'rejected':
+                return SHARED.STATUS_REJECTED_LOWERCASE;
+            case 'pending':
+                return SHARED.STATUS_PENDING;
+            default:
+                return status.toLowerCase();
+        }
+    }
+    /**
+     * Deletes a document by its ID and refreshes the document list
+     * @param {string} documentId - The ID of the document to delete
+     * @param {string} contextId - The context ID to refresh the document list
+     * @returns {Observable<any>} Observable that emits the delete response
+     */
+    deleteDocument(documentId, contextId) {
+        let headers = new HttpHeaders({ Authorization: `Bearer 9b9a5353-875d-4214-957e-5d11fcee56ed
+` });
+        return this.http.delete(`${this.apiUrl}${URLS.DELETE_DOCUMENT}${documentId}`, { headers }).pipe(tap(() => {
+            // After successful deletion, refresh the document list
+            this.getDocumentsBySelection(contextId, null, null, null, null).subscribe();
+        }), catchError((error) => {
+            console.error('Error deleting document:', error);
+            return throwError(() => new Error(error));
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHttpService, deps: [{ token: DocumentStore }, { token: i2.HttpClient }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHttpService, providedIn: 'root' });
@@ -1466,12 +1605,13 @@ class DocumentHelperService {
         combineLatest([
             this.documentQuery.selectSelectedMenuItem(),
             this.documentQuery.selectSelectedUserId(),
-            this.documentQuery.selectSelectedStatus()
+            this.documentQuery.selectSelectedStatus(),
+            this.documentQuery.selectSearchKey()
         ]).pipe(debounceTime(300), distinctUntilChanged((prev, curr) => {
-            const isSame = prev[0] === curr[0] && prev[1] === curr[1] && prev[2] === curr[2];
+            const isSame = prev[0] === curr[0] && prev[1] === curr[1] && prev[2] === curr[2] && prev[3] === curr[3];
             return isSame;
-        }), switchMap(([menuItem, userId, status]) => {
-            return this.documentHttpService.getDocumentsBySelection(contextId, menuItem, userId, status);
+        }), switchMap(([menuItem, userId, status, searchKey]) => {
+            return this.documentHttpService.getDocumentsBySelection(contextId, menuItem, userId, status, searchKey);
         })).subscribe({
             next: (response) => {
                 const currentState = this.documentQuery.getSelectionState();
@@ -1539,14 +1679,22 @@ class DocumentHelperService {
     setSelectedStatus(status) {
         this.documentStore.setSelectedStatus(status);
     }
+    /**
+     * Set the search key
+     * @param searchKey the search term
+     */
+    setSearchKey(searchKey) {
+        this.documentStore.setSearchKey(searchKey);
+    }
     /**
      * Set all selection state at once
      * @param menuItem the selected menu item _id (not the label)
      * @param userId the selected user ID
      * @param status the selected status
+     * @param searchKey the search term
      */
-    setSelectionState(menuItem, userId, status) {
-        this.documentStore.setSelectionState(menuItem, userId, status);
+    setSelectionState(menuItem, userId, status, searchKey = null) {
+        this.documentStore.setSelectionState(menuItem, userId, status, searchKey);
     }
     /**
      * Clear all selection state
@@ -1793,7 +1941,7 @@ class UserListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentHelperService }, { token: DocumentStore }, { token: DocumentQuery }, { token: UserListService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n        <span class=\"initials\">{{ user.initials }}</span>\r\n      </div>\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approved }} approved / {{ user.pending }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:330px;position:relative}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem}.document-counts{font-size:.875rem;color:#6b7280}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n        <span class=\"initials\">{{ user.initials }}</span>\r\n      </div>\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approved }} approved / {{ user.pending }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:330px;position:relative}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem}.document-counts{font-size:.875rem;color:#6b7280}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('slideInFromTop', [
                 state('void', style({
                     opacity: 0,
@@ -1923,7 +2071,7 @@ class DocumentStatusComponent {
         this.statusDataWithPercentages = this.statusCalculatorService.calculateStatusDataWithPercentages(this.statusData, this.selectedStatus);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, deps: [{ token: DocumentQuery }, { token: DocumentHelperService }, { token: StatusCalculatorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentStatusComponent, isStandalone: false, selector: "lib-document-status", inputs: { contextId: "contextId", statusData: "statusData" }, ngImport: i0, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.5rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentStatusComponent, isStandalone: false, selector: "lib-document-status", inputs: { contextId: "contextId", statusData: "statusData" }, ngImport: i0, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.5rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, decorators: [{
             type: Component,
@@ -1934,6 +2082,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class DocumentSearchComponent {
+    documentHelperService;
+    SHARED = SHARED;
+    contextId;
+    searchTerm = '';
+    destroy$ = new Subject();
+    constructor(documentHelperService) {
+        this.documentHelperService = documentHelperService;
+    }
+    ngOnInit() {
+        this.setupSearchSubscription();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Sets up the search input subscription with debouncing
+     */
+    setupSearchSubscription() {
+        // Create a subject to handle search term changes
+        const searchSubject = new Subject();
+        searchSubject.pipe(takeUntil(this.destroy$), debounceTime$1(500), // Wait 500ms after user stops typing
+        distinctUntilChanged$1() // Only emit if value has changed
+        ).subscribe(searchTerm => {
+            this.onSearchChange(searchTerm);
+        });
+        // Store the subject for use in template
+        this.searchSubject = searchSubject;
+    }
+    /**
+     * Handles search term changes from ngModel
+     * @param searchTerm - The search term entered by the user
+     */
+    onSearchInputChange(searchTerm) {
+        this.searchSubject.next(searchTerm);
+    }
+    /**
+     * Handles search term changes
+     * @param searchTerm - The search term entered by the user
+     */
+    onSearchChange(searchTerm) {
+        // Normalize the search term (trim whitespace and convert to null if empty)
+        const normalizedSearchTerm = searchTerm?.trim() || null;
+        // Update the search key in the store
+        this.documentHelperService.setSearchKey(normalizedSearchTerm);
+    }
+    /**
+     * Clears the search input
+     */
+    onClearSearch() {
+        this.searchTerm = '';
+        this.documentHelperService.setSearchKey(null);
+    }
+    // Subject for handling search input changes
+    searchSubject = new Subject();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, deps: [{ token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{padding:1rem;background:#f8fafc;border-bottom:1px solid #e2e8f0}.search-input-wrapper{position:relative;width:40%;display:flex;align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:.75rem 1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.search-input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-icon{color:#6b7280;margin-right:.75rem;font-size:1rem}.search-input{flex:1;border:none;outline:none;background:transparent;color:#374151}.search-input::placeholder{color:#9ca3af}.search-input:focus{outline:none}.clear-button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.clear-button:hover{background-color:#f3f4f6;color:#374151}.clear-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f633}.clear-button i{font-size:.875rem}@media (max-width: 768px){.search-container{padding:.75rem}.search-input-wrapper{padding:.5rem .75rem}.search-input{font-size:.8rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-search', standalone: false, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{padding:1rem;background:#f8fafc;border-bottom:1px solid #e2e8f0}.search-input-wrapper{position:relative;width:40%;display:flex;align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:.75rem 1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.search-input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-icon{color:#6b7280;margin-right:.75rem;font-size:1rem}.search-input{flex:1;border:none;outline:none;background:transparent;color:#374151}.search-input::placeholder{color:#9ca3af}.search-input:focus{outline:none}.clear-button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.clear-button:hover{background-color:#f3f4f6;color:#374151}.clear-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f633}.clear-button i{font-size:.875rem}@media (max-width: 768px){.search-container{padding:.75rem}.search-input-wrapper{padding:.5rem .75rem}.search-input{font-size:.8rem}}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHelperService }], propDecorators: { contextId: [{
+                type: Input
+            }] } });
+
 /**
  * The `FolderContainerComponent` is responsible for rendering a container
  * that displays a list of documents and associated folder panel data.
@@ -1990,7 +2204,7 @@ class FolderContainerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, ngImport: i0, template: "\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }, { kind: "component", type: DocumentSearchComponent, selector: "document-search", inputs: ["contextId"] }], animations: [
             trigger('slideInOut', [
                 state('visible', style({
                     height: '*',
@@ -2044,7 +2258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                 animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
+                    ], template: "\r\n<document-search [contextId]=\"contextId\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: DocumentQuery }], propDecorators: { documentList: [{
                 type: Input
             }], folderList: [{
@@ -2225,7 +2439,7 @@ class DocumentUploadService {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, deps: [{ token: DocumentService }, { token: DocumentStore }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, deps: [{ token: DocumentService }, { token: DocumentStore }, { token: i3$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, decorators: [{
@@ -2233,7 +2447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3.MessageService }] });
+        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3$1.MessageService }] });
 
 class DocumentTableBuilderService {
     constructor() { }
@@ -2290,7 +2504,8 @@ class DocumentTableBuilderService {
             status: doc.status || SHARED.PENDING,
             uploadedOn: doc.uploadedOn || doc.uploadDate || SHARED.EMPTY,
             ownerName: doc.ownerName || doc.applicantName || SHARED.EMPTY,
-            contentType: doc.contentType || SHARED.EMPTY
+            contentType: doc.contentType || SHARED.EMPTY,
+            isUploaded: doc.isUploaded || false
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentTableBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2303,11 +2518,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Service for managing user session details.
+ * @class SessionService
+ * @typedef {SessionService}
+ */
+class SessionService {
+    router;
+    /**
+     * Creates an instance of SessionService.
+     * @param {Router} router - Angular Router for navigation.
+     */
+    constructor(router) {
+        this.router = router;
+    }
+    /**
+     * Retrieves the current user's role from local storage.
+     * @returns {string | null} The user's role, or null if not found.
+     */
+    getUserRole() {
+        return localStorage.getItem('role');
+    }
+    /**
+     * Stores the user session data in local storage.
+     * @param {any} data - The session data to store.
+     */
+    setUserSession(data) {
+        localStorage.setItem(SHARED.SESSIONKEY, JSON.stringify(data));
+    }
+    /**
+     * Retrieves the stored user session data.
+     * @returns {any | null} The parsed session data, or null if not found.
+     */
+    getUserSession() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        return sessionData ? JSON.parse(sessionData) : null;
+    }
+    /**
+     * Retrieves the user's permissions from the stored session data.
+     * @returns {any | null} The user's permissions, or null if not found.
+     */
+    getUserPermissions() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        return sessionData ? JSON.parse(sessionData).permissions : null;
+    }
+    /**
+     * Retrieves the session ID from the stored session data.
+     * @returns {any | null} The session ID, or null if not found.
+     */
+    getSessionID() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        console.log(sessionData);
+        if (sessionData) {
+            const sessionId = JSON.parse(sessionData);
+            console.log(sessionId);
+            return sessionId;
+        }
+        return null;
+    }
+    /**
+     * Clears all stored session data from local storage.
+     */
+    clearSession() {
+        localStorage.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
+
+/**
+ * Directive to conditionally show or hide elements based on user permissions.
+ * @class HasPermissionDirective
+ * @typedef {HasPermissionDirective}
+ */
+class HasPermissionDirective {
+    el;
+    renderer;
+    sessionService;
+    /**
+     * The required permission(s) to display the element.
+     * Accepts a single string or an array of strings.
+     * @type {string | string[]}
+     */
+    permission;
+    /**
+     * Creates an instance of HasPermissionDirective.
+     * @param {ElementRef} el - Reference to the host element.
+     * @param {Renderer2} renderer - Angular Renderer for DOM manipulation.
+     * @param {SessionService} sessionService - Service to retrieve user permissions.
+     */
+    constructor(el, renderer, sessionService) {
+        this.el = el;
+        this.renderer = renderer;
+        this.sessionService = sessionService;
+    }
+    /**
+     * Lifecycle hook that is called when input properties change.
+     * @param {SimpleChanges} changes - The changes in input properties.
+     */
+    ngOnChanges(changes) {
+        if (changes['permission']) {
+            this.checkPermission();
+        }
+    }
+    /**
+     * Checks if the user has the required permission(s).
+     * Hides the element if the permission is not found.
+     */
+    checkPermission() {
+        // If no permission is required (empty string, null, or undefined), show the element
+        if (!this.permission || this.permission === '' || (Array.isArray(this.permission) && this.permission.length === 0)) {
+            this.renderer.removeStyle(this.el.nativeElement, 'display');
+            return;
+        }
+        const userPermissionsObjects = this.sessionService.getUserPermissions();
+        const userPermissionNames = userPermissionsObjects?.map((perm) => perm.name) || [];
+        const requiredPermissions = Array.isArray(this.permission)
+            ? this.permission
+            : [this.permission];
+        const hasPermission = requiredPermissions.some(permission => userPermissionNames.includes(permission));
+        if (!hasPermission) {
+            this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
+        }
+        else {
+            this.renderer.removeStyle(this.el.nativeElement, 'display');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: HasPermissionDirective, isStandalone: false, selector: "[permission]", inputs: { permission: "permission" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HasPermissionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[permission]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SessionService }], propDecorators: { permission: [{
+                type: Input
+            }] } });
+
 class TablePrimaryComponent {
     tableData = { columns: [], data: [] };
     showHeader = true;
     tableStyle = { 'min-width': '100%' };
     rowClick = new EventEmitter();
+    deleteAction = new EventEmitter();
     processedData = [];
     // Expose SHARED constants for template use
     SHARED = SHARED;
@@ -2377,16 +2738,17 @@ class TablePrimaryComponent {
     }
     onActionClick(event, rowData) {
         event.stopPropagation();
+        this.deleteAction.emit(rowData);
     }
     onRowClick(rowData) {
         this.rowClick.emit(rowData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TablePrimaryComponent, isStandalone: false, selector: "lib-table-primary", inputs: { tableData: "tableData", showHeader: "showHeader", tableStyle: "tableStyle" }, outputs: { rowClick: "rowClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\r\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\r\n            <tr>\r\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    {{ col.header }}\r\n                </th>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\r\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    \r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\r\n                            <i [class]=\"rowData._statusIcon\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\r\n                        <button pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \r\n                                class=\"p-button-text p-button-rounded\" \r\n                                (click)=\"onActionClick($event, rowData)\">\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Default Text Cell -->\r\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\r\n                        {{ rowData[col.field] }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5$1.Ripple, selector: "[pRipple]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TablePrimaryComponent, isStandalone: false, selector: "lib-table-primary", inputs: { tableData: "tableData", showHeader: "showHeader", tableStyle: "tableStyle" }, outputs: { rowClick: "rowClick", deleteAction: "deleteAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\n            <tr>\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\" [permission]=\"col.header === 'Actions' ? 'Documents-DELETE' : ''\">\n                    {{ col.header }}\n                </th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData>\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\n                    <!-- Document Cell -->\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\n                        <div class=\"document-info\">\n                            <div class=\"document-icon\">\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\n                            </div>\n                            <div class=\"document-details\">\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Status Cell -->\n                    \n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\n                            <i [class]=\"rowData._statusIcon\"></i>\n                            {{ rowData[col.field] }}\n                        </span>\n                    </div>\n\n                    <!-- Actions Cell -->\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\n                        @if(rowData.isUploaded){\n\n                            <button [permission]=\"'Documents-DELETE'\" pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \n                            class=\"p-button-text p-button-rounded\" \n                            (click)=\"onActionClick($event, rowData)\">\n                        </button>\n                    } \n                    </div>\n\n                    <!-- Default Text Cell -->\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\n                        {{ rowData[col.field] }}\n                    </div>\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePrimaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-primary', standalone: false, template: "<div class=\"card\">\r\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\r\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\r\n            <tr>\r\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    {{ col.header }}\r\n                </th>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\r\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    \r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\r\n                            <i [class]=\"rowData._statusIcon\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\r\n                        <button pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \r\n                                class=\"p-button-text p-button-rounded\" \r\n                                (click)=\"onActionClick($event, rowData)\">\r\n                        </button>\r\n                    </div>\r\n\r\n                    <!-- Default Text Cell -->\r\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\r\n                        {{ rowData[col.field] }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}\n"] }]
+            args: [{ selector: 'lib-table-primary', standalone: false, template: "<div class=\"card\">\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\n            <tr>\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\" [permission]=\"col.header === 'Actions' ? 'Documents-DELETE' : ''\">\n                    {{ col.header }}\n                </th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData>\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\n                    <!-- Document Cell -->\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\n                        <div class=\"document-info\">\n                            <div class=\"document-icon\">\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\n                            </div>\n                            <div class=\"document-details\">\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Status Cell -->\n                    \n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\n                            <i [class]=\"rowData._statusIcon\"></i>\n                            {{ rowData[col.field] }}\n                        </span>\n                    </div>\n\n                    <!-- Actions Cell -->\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\n                        @if(rowData.isUploaded){\n\n                            <button [permission]=\"'Documents-DELETE'\" pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \n                            class=\"p-button-text p-button-rounded\" \n                            (click)=\"onActionClick($event, rowData)\">\n                        </button>\n                    } \n                    </div>\n\n                    <!-- Default Text Cell -->\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\n                        {{ rowData[col.field] }}\n                    </div>\n                </td>\n            </tr>\n        </ng-template>\n    </p-table>\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}\n"] }]
         }], propDecorators: { tableData: [{
                 type: Input
             }], showHeader: [{
@@ -2395,6 +2757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], rowClick: [{
                 type: Output
+            }], deleteAction: [{
+                type: Output
             }] } });
 
 /**
@@ -2579,13 +2943,13 @@ class DocumentUploadComponent {
     triggerFileUpload() {
         this.fileUploader.choose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService }, { token: i3.PrimeNGConfig }, { token: FileFormatService }, { token: i3.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-12\">\r\n    <p-fileUpload #fileUploader [multiple]=\"true\" auto=\"true\" accept=\"image/png,application/pdf\" maxFileSize=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n          <div class=\"flex gap-2\">\r\n            <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n        let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n        <div class=\"col-12 md:col-12 p-0\">\r\n          <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n              class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n              <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                <div class=\"documentImage\">\r\n                  <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                    class=\"object-contain\" />\r\n                </div>\r\n                <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                  <div class=\"flex justify-content-between\">\r\n                    <div style=\" font-weight: bold;font-size: 14px\">\r\n                      {{ uploadedFile.file.name }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                  </div>\r\n                  <div class=\"flex justify-content-between mt-1\">\r\n                    <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"col-12 md:col-12 p-0\">\r\n                <p-progressBar [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\r\n                </p-progressBar>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n        <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n          (click)=\"triggerFileUpload()\">\r\n          <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n          <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"file\"> </ng-template>\r\n    </p-fileUpload>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i8$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService }, { token: i3$1.PrimeNGConfig }, { token: FileFormatService }, { token: i3$1.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-12\">\r\n    <p-fileUpload #fileUploader [multiple]=\"true\" auto=\"true\" accept=\"image/png,application/pdf\" maxFileSize=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n          <div class=\"flex gap-2\">\r\n            <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n        let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n        <div class=\"col-12 md:col-12 p-0\">\r\n          <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n              class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n              <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                <div class=\"documentImage\">\r\n                  <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                    class=\"object-contain\" />\r\n                </div>\r\n                <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                  <div class=\"flex justify-content-between\">\r\n                    <div style=\" font-weight: bold;font-size: 14px\">\r\n                      {{ uploadedFile.file.name }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                  </div>\r\n                  <div class=\"flex justify-content-between mt-1\">\r\n                    <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"col-12 md:col-12 p-0\">\r\n                <p-progressBar [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\r\n                </p-progressBar>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n        <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n          (click)=\"triggerFileUpload()\">\r\n          <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n          <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"file\"> </ng-template>\r\n    </p-fileUpload>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i8.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-document-upload', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-12\">\r\n    <p-fileUpload #fileUploader [multiple]=\"true\" auto=\"true\" accept=\"image/png,application/pdf\" maxFileSize=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n          <div class=\"flex gap-2\">\r\n            <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n        let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n        <div class=\"col-12 md:col-12 p-0\">\r\n          <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n              class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n              <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                <div class=\"documentImage\">\r\n                  <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                    class=\"object-contain\" />\r\n                </div>\r\n                <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                  <div class=\"flex justify-content-between\">\r\n                    <div style=\" font-weight: bold;font-size: 14px\">\r\n                      {{ uploadedFile.file.name }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                  </div>\r\n                  <div class=\"flex justify-content-between mt-1\">\r\n                    <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"col-12 md:col-12 p-0\">\r\n                <p-progressBar [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\r\n                </p-progressBar>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n        <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n          (click)=\"triggerFileUpload()\">\r\n          <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n          <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"file\"> </ng-template>\r\n    </p-fileUpload>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3$1.PrimeNGConfig }, { type: FileFormatService }, { type: i3$1.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
                 type: Input
             }], fileUploader: [{
                 type: ViewChild,
@@ -2782,7 +3146,7 @@ class DocumentHistoryComponent {
      */
     showHistory = false;
     /**
-     * Active accordion index for expansion control
+     * Active accordion index for controlling expand/collapse
      */
     activeAccordionIndex = 0;
     /**
@@ -2792,23 +3156,61 @@ class DocumentHistoryComponent {
     constructor(documentHistoryStyleService) {
         this.documentHistoryStyleService = documentHistoryStyleService;
     }
-    ngOnInit() {
-        // Auto-expand the first accordion (Initial Request) if it exists
-        this.activeAccordionIndex = 0;
+    /**
+     * Handle accordion open event
+     */
+    onAccordionOpen() {
         this.isAccordionExpanded = true;
+        this.activeAccordionIndex = 0;
+    }
+    /**
+     * Handle accordion close event
+     */
+    onAccordionClose() {
+        this.isAccordionExpanded = false;
+        this.activeAccordionIndex = -1;
     }
     /**
-     * Toggle accordion expansion state
+     * Toggle accordion state
      */
     toggleAccordion() {
-        this.isAccordionExpanded = !this.isAccordionExpanded;
-        this.activeAccordionIndex = this.isAccordionExpanded ? 0 : -1;
+        if (this.isAccordionExpanded) {
+            this.onAccordionClose();
+        }
+        else {
+            this.onAccordionOpen();
+        }
     }
     /**
      * Get the CSS class for accordion styling based on the section's label
      */
     getAccordionClass(section) {
-        return this.documentHistoryStyleService.getAccordionClass(section);
+        if (!section.list || section.list.length === 0) {
+            return 'document-requested'; // Default class
+        }
+        const firstItem = section.list[0];
+        const label = firstItem.label;
+        switch (label) {
+            case DOCUMENT_HISTORY.LABELS.DOCUMENT_UPLOADED:
+                return 'document-uploaded';
+            case DOCUMENT_HISTORY.LABELS.DOCUMENT_REJECTED:
+                return 'document-rejected';
+            case DOCUMENT_HISTORY.LABELS.DOCUMENT_ACCEPTED:
+                return 'document-accepted';
+            case DOCUMENT_HISTORY.LABELS.DOCUMENT_REQUESTED:
+            default:
+                return 'document-requested';
+        }
+    }
+    /**
+     * Check if a section has valid content to display
+     */
+    checkValidContent(section) {
+        return section.list && section.list.length > 0 &&
+            section.list.some(item => item.label ||
+                item.requestDescription ||
+                item.documentUrl ||
+                item.userName);
     }
     /**
      * Process history data to add computed properties
@@ -2819,6 +3221,7 @@ class DocumentHistoryComponent {
                 ...section,
                 list: section.list.map(item => ({
                     ...item,
+                    // Ensure dateTime has a fallback value
                     dateTime: item.dateTime || 'No date available',
                     actionIcon: this.documentHistoryStyleService.getActionIcon(item.label),
                     actionColor: this.documentHistoryStyleService.getActionColor(item.label),
@@ -2827,8 +3230,10 @@ class DocumentHistoryComponent {
                     actionIconBgColor: this.documentHistoryStyleService.getActionIconBgColor(item.label)
                 }))
             };
-            processedSection.accordionClass = this.documentHistoryStyleService.getAccordionClass(processedSection);
-            processedSection.hasValidContent = this.documentHistoryStyleService.checkValidContent(processedSection);
+            // Add accordion class based on the first item's label
+            processedSection.accordionClass = this.getAccordionClass(processedSection);
+            // Add hasValidContent property
+            processedSection.hasValidContent = this.checkValidContent(processedSection);
             return processedSection;
         });
     }
@@ -2853,35 +3258,219 @@ class DocumentHistoryComponent {
         document.body.removeChild(link);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, deps: [{ token: DocumentHistoryStyleService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request'\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" (onOpen)=\"toggleAccordion()\" (onClose)=\"toggleAccordion()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request'\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-history', standalone: false, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request'\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" (onOpen)=\"toggleAccordion()\" (onClose)=\"toggleAccordion()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"] }]
+            args: [{ selector: 'document-history', standalone: false, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request'\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHistoryStyleService }], propDecorators: { historyData: [{
                 type: Input
             }], showHistory: [{
                 type: Input
             }] } });
 
-/**
- * Component for viewing and managing document details.
- * @class DocumentViewerComponent
- * @typedef {DocumentViewerComponent}
- */
-class DocumentViewerComponent {
-    documentHttpService;
-    documentService;
+class DocumentActionsService {
     /**
-     * Get the selected document by user.
-     * @type {*}
+     * Calculates the card class based on status
+     * @param currentStatus - The current status of the document
+     * @param statusId - The status ID from API
+     * @returns {string} The CSS class for the card
      */
-    selectedDocument; // <-- Made optional to prevent undefined issues
+    calculateCardClass(currentStatus, statusId) {
+        // Use statusId if available, otherwise fall back to currentStatus
+        if (statusId) {
+            return `status-${statusId}-card`;
+        }
+        switch (currentStatus) {
+            case SHARED.STATUS_ACCEPTED:
+                return SHARED.CARD_ACCEPTED;
+            case SHARED.STATUS_REJECTED_LOWERCASE:
+                return SHARED.CARD_REJECTED;
+            default:
+                return SHARED.CARD_PENDING;
+        }
+    }
     /**
-     * Get the selected document by user.
-     * @type {*}
+     * Calculates the reject button class based on status
+     * @param currentStatus - The current status of the document
+     * @param statusId - The status ID from API
+     * @returns {string} The CSS class for the reject button
+     */
+    calculateRejectButtonClass(currentStatus, statusId) {
+        // Use statusId if available, otherwise fall back to currentStatus
+        if (statusId) {
+            return `status-${statusId}-reject`;
+        }
+        switch (currentStatus) {
+            case SHARED.STATUS_ACCEPTED:
+                return SHARED.BUTTON_SECONDARY_REJECT;
+            case SHARED.STATUS_REJECTED_LOWERCASE:
+                return SHARED.BUTTON_PRIMARY_REJECT;
+            default:
+                return SHARED.BUTTON_DEFAULT_REJECT;
+        }
+    }
+    /**
+     * Calculates the accept button class based on status
+     * @param currentStatus - The current status of the document
+     * @param statusId - The status ID from API
+     * @returns {string} The CSS class for the accept button
+     */
+    calculateAcceptButtonClass(currentStatus, statusId) {
+        // Use statusId if available, otherwise fall back to currentStatus
+        if (statusId) {
+            return `status-${statusId}-accept`;
+        }
+        switch (currentStatus) {
+            case SHARED.STATUS_ACCEPTED:
+                return SHARED.BUTTON_PRIMARY_ACCEPT;
+            case SHARED.STATUS_REJECTED_LOWERCASE:
+                return SHARED.BUTTON_SECONDARY_ACCEPT;
+            default:
+                return SHARED.BUTTON_DEFAULT_ACCEPT;
+        }
+    }
+    /**
+     * Creates an accept action
+     * @param note - The acceptance note
+     * @returns {DocumentAction} The accept action
+     */
+    createAcceptAction(note) {
+        return {
+            type: SHARED.ACCEPT_ACTION,
+            note: note
+        };
+    }
+    /**
+     * Creates a reject action
+     * @param note - The rejection note
+     * @returns {DocumentAction} The reject action
+     */
+    createRejectAction(note) {
+        return {
+            type: SHARED.REJECT_ACTION,
+            note: note
+        };
+    }
+    /**
+     * Creates a delete action
+     * @returns {DocumentAction} The delete action
+     */
+    createDeleteAction() {
+        return {
+            type: SHARED.DELETE_ACTION
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DocumentActionsComponent {
+    documentActionsService;
+    SHARED = SHARED;
+    documentId;
+    currentStatus;
+    isLoading = false;
+    isUploaded = false;
+    statusId;
+    actionPerformed = new EventEmitter();
+    showAcceptDialog = false;
+    showRejectDialog = false;
+    acceptNote = SHARED.EMPTY;
+    rejectNote = SHARED.EMPTY;
+    // Computed properties for template
+    cardClass = SHARED.CARD_PENDING;
+    rejectButtonClass = SHARED.BUTTON_DEFAULT_REJECT;
+    acceptButtonClass = SHARED.BUTTON_DEFAULT_ACCEPT;
+    constructor(documentActionsService) {
+        this.documentActionsService = documentActionsService;
+    }
+    ngOnChanges(changes) {
+        this.updateComputedProperties();
+    }
+    /**
+     * Updates computed properties based on currentStatus and statusId
+     */
+    updateComputedProperties() {
+        this.cardClass = this.documentActionsService.calculateCardClass(this.currentStatus, this.statusId);
+        this.rejectButtonClass = this.documentActionsService.calculateRejectButtonClass(this.currentStatus, this.statusId);
+        this.acceptButtonClass = this.documentActionsService.calculateAcceptButtonClass(this.currentStatus, this.statusId);
+    }
+    onAcceptClick() {
+        this.showAcceptDialog = true;
+    }
+    onRejectClick() {
+        this.showRejectDialog = true;
+    }
+    onDeleteClick() {
+        this.actionPerformed.emit(this.documentActionsService.createDeleteAction());
+    }
+    onAcceptConfirm() {
+        this.actionPerformed.emit(this.documentActionsService.createAcceptAction(this.acceptNote));
+        this.acceptNote = SHARED.EMPTY;
+        this.showAcceptDialog = false;
+    }
+    onRejectConfirm() {
+        this.actionPerformed.emit(this.documentActionsService.createRejectAction(this.rejectNote));
+        this.rejectNote = SHARED.EMPTY;
+        this.showRejectDialog = false;
+    }
+    onCancel() {
+        this.showAcceptDialog = false;
+        this.showRejectDialog = false;
+        this.acceptNote = SHARED.EMPTY;
+        this.rejectNote = SHARED.EMPTY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, deps: [{ token: DocumentActionsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentActionsComponent, isStandalone: false, selector: "document-actions", inputs: { documentId: "documentId", currentStatus: "currentStatus", isLoading: "isLoading", isUploaded: "isUploaded", statusId: "statusId" }, outputs: { actionPerformed: "actionPerformed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-actions-container\" *ngIf=\"isUploaded\">\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\n    <div class=\"actions-buttons\">\n      <!-- Reject Button -->\n      <button \n        class=\"action-btn reject-btn\" \n        [ngClass]=\"rejectButtonClass\"\n        (click)=\"onRejectClick()\"\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isLoading\">\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED : SHARED.BUTTON_LABEL_REJECT }}</span>\n      </button>\n\n      <!-- Accept Button -->\n      <button \n        class=\"action-btn accept-btn\" \n        [ngClass]=\"acceptButtonClass\"\n        (click)=\"onAcceptClick()\"\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isLoading\">\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isLoading\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT }}</span>\n      </button>\n\n      <!-- Delete Button -->\n      <button \n        class=\"action-btn delete-btn\" \n        (click)=\"onDeleteClick()\"\n        [disabled]=\"isLoading\">\n        <i class=\"pi pi-trash\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Accept Confirmation Dialog -->\n<p-dialog \n  [(visible)]=\"showAcceptDialog\" \n  [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" \n  [modal]=\"true\" \n  [draggable]=\"false\" \n  [closable]=\"true\"\n  [style]=\"{ width: '25rem', height: '25rem' }\"\n  styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\n    <textarea \n      id=\"acceptNote\"\n      pInputTextarea \n      [(ngModel)]=\"acceptNote\" \n      [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\n      rows=\"6\"\n      class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button \n        pButton \n        [label]=\"SHARED.CANCEL_BUTTON_LABEL\" \n        class=\"p-button-secondary\" \n        (click)=\"onCancel()\">\n      </button>\n      <button \n        pButton \n        [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" \n        class=\"p-button-success\" \n        (click)=\"onAcceptConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Reject Confirmation Dialog -->\n<p-dialog \n  [(visible)]=\"showRejectDialog\" \n  [header]=\"SHARED.REJECT_CONFIRM_HEADER\" \n  [modal]=\"true\" \n  [draggable]=\"false\" \n  [closable]=\"true\"\n  [style]=\"{ width: '25rem', height: '25rem' }\"\n  styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\n    <textarea \n      id=\"rejectNote\"\n      pInputTextarea \n      [(ngModel)]=\"rejectNote\" \n      [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\n      rows=\"6\"\n      class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button \n        pButton \n        [label]=\"SHARED.CANCEL_BUTTON_LABEL\" \n        class=\"p-button-secondary\" \n        (click)=\"onCancel()\">\n      </button>\n      <button \n        pButton \n        [label]=\"SHARED.REJECT_BUTTON_LABEL\" \n        class=\"p-button-danger\" \n        (click)=\"onRejectConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog> ", styles: [".document-actions-container{margin:1rem 0}.actions-card{border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'document-actions', standalone: false, template: "<div class=\"document-actions-container\" *ngIf=\"isUploaded\">\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\n    <div class=\"actions-buttons\">\n      <!-- Reject Button -->\n      <button \n        class=\"action-btn reject-btn\" \n        [ngClass]=\"rejectButtonClass\"\n        (click)=\"onRejectClick()\"\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isLoading\">\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED : SHARED.BUTTON_LABEL_REJECT }}</span>\n      </button>\n\n      <!-- Accept Button -->\n      <button \n        class=\"action-btn accept-btn\" \n        [ngClass]=\"acceptButtonClass\"\n        (click)=\"onAcceptClick()\"\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isLoading\">\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isLoading\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT }}</span>\n      </button>\n\n      <!-- Delete Button -->\n      <button \n        class=\"action-btn delete-btn\" \n        (click)=\"onDeleteClick()\"\n        [disabled]=\"isLoading\">\n        <i class=\"pi pi-trash\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Accept Confirmation Dialog -->\n<p-dialog \n  [(visible)]=\"showAcceptDialog\" \n  [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" \n  [modal]=\"true\" \n  [draggable]=\"false\" \n  [closable]=\"true\"\n  [style]=\"{ width: '25rem', height: '25rem' }\"\n  styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\n    <textarea \n      id=\"acceptNote\"\n      pInputTextarea \n      [(ngModel)]=\"acceptNote\" \n      [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\n      rows=\"6\"\n      class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button \n        pButton \n        [label]=\"SHARED.CANCEL_BUTTON_LABEL\" \n        class=\"p-button-secondary\" \n        (click)=\"onCancel()\">\n      </button>\n      <button \n        pButton \n        [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" \n        class=\"p-button-success\" \n        (click)=\"onAcceptConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<!-- Reject Confirmation Dialog -->\n<p-dialog \n  [(visible)]=\"showRejectDialog\" \n  [header]=\"SHARED.REJECT_CONFIRM_HEADER\" \n  [modal]=\"true\" \n  [draggable]=\"false\" \n  [closable]=\"true\"\n  [style]=\"{ width: '25rem', height: '25rem' }\"\n  styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\n    <textarea \n      id=\"rejectNote\"\n      pInputTextarea \n      [(ngModel)]=\"rejectNote\" \n      [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\n      rows=\"6\"\n      class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button \n        pButton \n        [label]=\"SHARED.CANCEL_BUTTON_LABEL\" \n        class=\"p-button-secondary\" \n        (click)=\"onCancel()\">\n      </button>\n      <button \n        pButton \n        [label]=\"SHARED.REJECT_BUTTON_LABEL\" \n        class=\"p-button-danger\" \n        (click)=\"onRejectConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog> ", styles: [".document-actions-container{margin:1rem 0}.actions-card{border-radius:8px;padding:1rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentActionsService }], propDecorators: { documentId: [{
+                type: Input
+            }], currentStatus: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isUploaded: [{
+                type: Input
+            }], statusId: [{
+                type: Input
+            }], actionPerformed: [{
+                type: Output
+            }] } });
+
+/**
+ * Component for viewing and managing document details.
+ * @class DocumentViewerComponent
+ * @typedef {DocumentViewerComponent}
+ */
+class DocumentViewerComponent {
+    documentHttpService;
+    documentService;
+    messageService;
+    /**
+     * Get the selected document by user.
+     * @type {*}
+     */
+    selectedDocument; // <-- Made optional to prevent undefined issues
+    /**
+     * Get the selected document by user.
+     * @type {*}
      */
     documentList; // <-- Made optional to prevent undefined issues
+    /**
+     * Event emitted when document status is updated to refresh the document list
+     * @type {EventEmitter<void>}
+     */
+    documentStatusUpdated = new EventEmitter();
     /**
      * Indicates whether a checkbox is selected.
      * @type {boolean}
@@ -2912,6 +3501,26 @@ class DocumentViewerComponent {
      * @type {boolean}
      */
     showDocumentHistory = false;
+    /**
+     * Messages for user feedback
+     * @type {any[]}
+     */
+    messages = [];
+    /**
+     * Loading state for document actions
+     * @type {boolean}
+     */
+    isActionLoading = false;
+    /**
+     * Computed document status for the actions component
+     * @type {'pending' | 'accepted' | 'rejected'}
+     */
+    documentStatus = SHARED.STATUS_PENDING;
+    /**
+     * Computed flag indicating if document is uploaded
+     * @type {boolean}
+     */
+    documentIsUploaded = false;
     /**
      * Holds the subscription to manage observable cleanup.
      * @private
@@ -2923,19 +3532,21 @@ class DocumentViewerComponent {
      * @param {DocumentHttpService} documentHttpService - Handle the http service.
      * @param {DocumentService} documentService - Handle the states.
      */
-    constructor(documentHttpService, documentService) {
+    constructor(documentHttpService, documentService, messageService) {
         this.documentHttpService = documentHttpService;
         this.documentService = documentService;
+        this.messageService = messageService;
     }
     /**
      * Fetches the alerts for the selected document.
      * @returns {void}
      */
-    ngOnChanges() {
-        if (this.selectedDocument) {
+    ngOnChanges(changes) {
+        if (changes['selectedDocument'] && this.selectedDocument) {
             this.documentService.set(this.selectedDocument);
             this.alertData = DocumentAlertList.find((res) => res.status === this.selectedDocument?.status);
             this.loadDocumentHistory(this.selectedDocument._id);
+            this.updateComputedProperties();
         }
     }
     handleSelectedDocument(document) {
@@ -2972,16 +3583,141 @@ class DocumentViewerComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          <div\r\n           *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"documentHistory\" \r\n            [showHistory]=\"showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }], encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * Updates computed properties based on selectedDocument
+     */
+    updateComputedProperties() {
+        this.documentStatus = this.calculateDocumentStatus();
+        this.documentIsUploaded = this.calculateIsDocumentUploaded();
+    }
+    /**
+     * Calculates the current status of the document for the actions component
+     * @returns {'pending' | 'accepted' | 'rejected'} The current document status
+     */
+    calculateDocumentStatus() {
+        if (!this.selectedDocument)
+            return SHARED.STATUS_PENDING;
+        // First check statusId from API response if available
+        if (this.selectedDocument.statusId) {
+            switch (this.selectedDocument.statusId.toLowerCase()) {
+                case SHARED.STATUS_APPROVED.toLowerCase():
+                    return SHARED.STATUS_ACCEPTED;
+                case SHARED.STATUS_REJECTED.toLowerCase():
+                    return SHARED.STATUS_REJECTED_LOWERCASE;
+                case SHARED.STATUS_PENDING:
+                    return SHARED.STATUS_PENDING;
+            }
+        }
+        // Fall back to status field mapping
+        switch (this.selectedDocument.status?.toLowerCase()) {
+            case SHARED.STATUS_APPROVED.toLowerCase():
+            case SHARED.STATUS_ACCEPTED:
+                return SHARED.STATUS_ACCEPTED;
+            case SHARED.STATUS_REJECTED.toLowerCase():
+            case SHARED.STATUS_DECLINED:
+                return SHARED.STATUS_REJECTED_LOWERCASE;
+            default:
+                return SHARED.STATUS_PENDING;
+        }
+    }
+    /**
+     * Calculates if the document is uploaded and ready for actions
+     * @returns {boolean} True if document is uploaded
+     */
+    calculateIsDocumentUploaded() {
+        if (!this.selectedDocument)
+            return false;
+        // Check if document has a URL and is not in a pending state
+        const isPending = this.selectedDocument.statusId?.toLowerCase() === SHARED.STATUS_PENDING ||
+            this.selectedDocument.status?.toLowerCase() === SHARED.STATUS_PENDING;
+        return !!(this.selectedDocument.documentUrl && !isPending);
+    }
+    /**
+     * Handles document actions from the actions component
+     * @param {DocumentAction} action - The action performed
+     */
+    handleDocumentAction(action) {
+        console.log('Document action performed:', action);
+        if (!this.selectedDocument?._id) {
+            console.error('No document ID available');
+            return;
+        }
+        switch (action.type) {
+            case SHARED.ACCEPT_ACTION:
+                this.updateDocumentStatus(SHARED.STATUS_APPROVED, action.note || SHARED.DOCUMENT_ACCEPTED_MESSAGE);
+                break;
+            case SHARED.REJECT_ACTION:
+                this.updateDocumentStatus(SHARED.STATUS_REJECTED, action.note || SHARED.DOCUMENT_REJECTED_MESSAGE);
+                break;
+            case SHARED.DELETE_ACTION:
+                console.log('Document delete requested');
+                // TODO: Implement delete logic when API is available
+                break;
+        }
+    }
+    /**
+     * Updates the document status via API call
+     * @param {string} status - The new status (Approved, Rejected)
+     * @param {string} description - The status update description
+     */
+    updateDocumentStatus(status, description) {
+        if (!this.selectedDocument?._id) {
+            console.error('No document ID available');
+            return;
+        }
+        this.isActionLoading = true;
+        this.documentHttpService.updateDocumentStatus(this.selectedDocument._id, status, description).subscribe({
+            next: (response) => {
+                console.log('Document status updated successfully:', response);
+                // Update the local document status from response
+                if (this.selectedDocument && response.status) {
+                    // Use the normalized status from the response if available
+                    const normalizedStatus = response.normalizedStatus || response.status.toLowerCase();
+                    this.selectedDocument.status = normalizedStatus;
+                    // Update computed properties after status change
+                    this.updateComputedProperties();
+                }
+                // Reload document history to show the new status
+                if (this.selectedDocument?._id) {
+                    this.loadDocumentHistory(this.selectedDocument._id);
+                }
+                // Emit event to refresh document list
+                this.documentStatusUpdated.emit();
+                // Show success message
+                this.messageService.add({
+                    severity: SHARED.SUCCESS_SEVERITY,
+                    summary: SHARED.SUCCESS,
+                    detail: status === SHARED.STATUS_APPROVED ?
+                        SHARED.DOCUMENT_ACCEPTED_MESSAGE :
+                        SHARED.DOCUMENT_REJECTED_MESSAGE
+                });
+            },
+            error: (error) => {
+                console.error('Error updating document status:', error);
+                // Show error message to user
+                this.messageService.add({
+                    severity: SHARED.SEVERITY,
+                    summary: SHARED.DANGER,
+                    detail: SHARED.DOCUMENT_UPDATE_ERROR_MESSAGE
+                });
+            },
+            complete: () => {
+                this.isActionLoading = false;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { documentStatusUpdated: "documentStatusUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <!-- Messages for user feedback -->\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    \r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          <div\r\n           *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <!-- Document Actions Component -->\r\n           @if(!selectedDocument?.isUploaded){\r\n          <document-actions\r\n            [documentId]=\"selectedDocument?._id\"\r\n            [currentStatus]=\"documentStatus\"\r\n            [isLoading]=\"isActionLoading\"\r\n            [isUploaded]=\"documentIsUploaded\"\r\n            [statusId]=\"selectedDocument?.statusId\"\r\n            (actionPerformed)=\"handleDocumentAction($event)\">\r\n          </document-actions>\r\n        }\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"documentHistory\" \r\n            [showHistory]=\"showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i6.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }, { kind: "component", type: DocumentActionsComponent, selector: "document-actions", inputs: ["documentId", "currentStatus", "isLoading", "isUploaded", "statusId"], outputs: ["actionPerformed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          <div\r\n           *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"documentHistory\" \r\n            [showHistory]=\"showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }], propDecorators: { selectedDocument: [{
+            args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <!-- Messages for user feedback -->\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    \r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          <div\r\n           *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <!-- Document Actions Component -->\r\n           @if(!selectedDocument?.isUploaded){\r\n          <document-actions\r\n            [documentId]=\"selectedDocument?._id\"\r\n            [currentStatus]=\"documentStatus\"\r\n            [isLoading]=\"isActionLoading\"\r\n            [isUploaded]=\"documentIsUploaded\"\r\n            [statusId]=\"selectedDocument?.statusId\"\r\n            (actionPerformed)=\"handleDocumentAction($event)\">\r\n          </document-actions>\r\n        }\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"documentHistory\" \r\n            [showHistory]=\"showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3$1.MessageService }], propDecorators: { selectedDocument: [{
                 type: Input
             }], documentList: [{
                 type: Input
+            }], documentStatusUpdated: [{
+                type: Output
             }] } });
 
 /**
@@ -2995,6 +3731,7 @@ class DocumentListComponent {
     documentQuery;
     documentStore;
     documentTableBuilder;
+    documentHelperService;
     /**
      * Represents the context ID for the document list.
      * This value is passed from the parent component.
@@ -3103,12 +3840,13 @@ class DocumentListComponent {
      * @param {DocumentQuery} documentQuery - The service responsible for geting stored documents.
      * @param {DocumentStore} documentStore - The service responsible for storing documents.
      */
-    constructor(documentUploadService, documentHttpService, documentQuery, documentStore, documentTableBuilder) {
+    constructor(documentUploadService, documentHttpService, documentQuery, documentStore, documentTableBuilder, documentHelperService) {
         this.documentUploadService = documentUploadService;
         this.documentHttpService = documentHttpService;
         this.documentQuery = documentQuery;
         this.documentStore = documentStore;
         this.documentTableBuilder = documentTableBuilder;
+        this.documentHelperService = documentHelperService;
     }
     /**
      * Initializes the component by fetching the document type list.
@@ -3251,19 +3989,44 @@ class DocumentListComponent {
         this.isdialogVisible = SHARED.TRUE;
         this.selectedDocument = rowData;
     }
+    /**
+     * Handles the delete action from the table component
+     * @param {any} rowData - The row data containing the document to delete
+     */
+    handleDeleteAction(rowData) {
+        if (rowData._id && this.contextId) {
+            this.documentHttpService.deleteDocument(rowData._id, this.contextId).subscribe({
+                next: (response) => {
+                    console.log('Document deleted successfully:', response);
+                    // The document list will be automatically refreshed by the service
+                },
+                error: (error) => {
+                    console.error('Error deleting document:', error);
+                }
+            });
+        }
+    }
+    /**
+     * Refreshes the document list after a status update
+     */
+    refreshDocumentList() {
+        if (this.contextId) {
+            this.documentHelperService.refreshDocumentsWithCurrentSelection(this.contextId);
+        }
+    }
     /**
      * Cleanup subscriptions on component destroy
      */
     ngOnDestroy() {
         this.documentListSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentUploadService }, { token: DocumentHttpService }, { token: DocumentQuery }, { token: DocumentStore }, { token: DocumentTableBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", isUploadButtonVisible: "isUploadButtonVisible", documentList: "documentList", status: "status", category: "category", searchKey: "searchKey" }, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} Documents</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i9.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i10.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i13.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i14.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentUploadService }, { token: DocumentHttpService }, { token: DocumentQuery }, { token: DocumentStore }, { token: DocumentTableBuilderService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", isUploadButtonVisible: "isUploadButtonVisible", documentList: "documentList", status: "status", category: "category", searchKey: "searchKey" }, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} Documents</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i15.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick", "deleteAction"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} Documents</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }, { type: DocumentQuery }, { type: DocumentStore }, { type: DocumentTableBuilderService }], propDecorators: { contextId: [{
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} Documents</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }, { type: DocumentQuery }, { type: DocumentStore }, { type: DocumentTableBuilderService }, { type: DocumentHelperService }], propDecorators: { contextId: [{
                 type: Input
             }], documentListResponse: [{
                 type: Input
@@ -3520,7 +4283,7 @@ class DocumentsMenuComponent {
         return this.selectedMenuItemId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentMenuService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"catagories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{ item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .selected-menu-item span{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"catagories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{ item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .selected-menu-item span{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
             type: Component,
@@ -3683,7 +4446,7 @@ class DocumentContainerComponent {
         this.subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentStore }, { token: DocumentService }, { token: DocumentQuery }, { token: DocumentHttpService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, ngImport: i0, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-3 lg:col-3\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-9 lg:col-9 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div>\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "isUploadButtonVisible", "documentList", "status", "category", "searchKey"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, ngImport: i0, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-3 lg:col-3\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-9 lg:col-9 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div>\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "isUploadButtonVisible", "documentList", "status", "category", "searchKey"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
@@ -3732,7 +4495,7 @@ class FolderBlockComponent {
         return folderBlockId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderBlockComponent, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderBlockComponent, isStandalone: false, selector: "lib-folder-block", inputs: { folderList: "folderList" }, ngImport: i0, template: "<div class=\"card p-0 folder-info\">\r\n  <div class=\"text-900 text-xl font-semibold ml-2 mb-1\">Folders</div>\r\n  <div class=\"grid m-0\">\r\n    <div *ngFor=\"let folder of folderList\" class=\"col-12 md:col-6 xl:col-4 container-wrapper\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.documentCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.folderName }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".container-wrapper:nth-child(3n+1){padding-left:0}.container-wrapper:nth-child(3n){padding-right:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderBlockComponent, isStandalone: false, selector: "lib-folder-block", inputs: { folderList: "folderList" }, ngImport: i0, template: "<div class=\"card p-0 folder-info\">\r\n  <div class=\"text-900 text-xl font-semibold ml-2 mb-1\">Folders</div>\r\n  <div class=\"grid m-0\">\r\n    <div *ngFor=\"let folder of folderList\" class=\"col-12 md:col-6 xl:col-4 container-wrapper\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.documentCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.folderName }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".container-wrapper:nth-child(3n+1){padding-left:0}.container-wrapper:nth-child(3n){padding-right:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderBlockComponent, decorators: [{
             type: Component,
@@ -3770,7 +4533,7 @@ class DocumentListItemComponent {
         this.documentClick.emit(document);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListItemComponent, isStandalone: false, selector: "lib-document-list-item", inputs: { document: "document" }, outputs: { documentClick: "documentClick" }, ngImport: i0, template: "<div class=\"grid m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4 file-name-wrapper document-text-wrapper\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1\"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'alert'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Alert\r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n      <div class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\r\n    </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-alert{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListItemComponent, isStandalone: false, selector: "lib-document-list-item", inputs: { document: "document" }, outputs: { documentClick: "documentClick" }, ngImport: i0, template: "<div class=\"grid m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4 file-name-wrapper document-text-wrapper\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1\"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'alert'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Alert\r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n      <div class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\r\n    </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-alert{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListItemComponent, decorators: [{
             type: Component,
@@ -3849,146 +4612,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: DocumentHelperService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
 
-/**
- * Service for managing user session details.
- * @class SessionService
- * @typedef {SessionService}
- */
-class SessionService {
-    router;
-    /**
-     * Creates an instance of SessionService.
-     * @param {Router} router - Angular Router for navigation.
-     */
-    constructor(router) {
-        this.router = router;
-    }
-    /**
-     * Retrieves the current user's role from local storage.
-     * @returns {string | null} The user's role, or null if not found.
-     */
-    getUserRole() {
-        return localStorage.getItem('role');
-    }
-    /**
-     * Stores the user session data in local storage.
-     * @param {any} data - The session data to store.
-     */
-    setUserSession(data) {
-        localStorage.setItem(SHARED.SESSIONKEY, JSON.stringify(data));
-    }
-    /**
-     * Retrieves the stored user session data.
-     * @returns {any | null} The parsed session data, or null if not found.
-     */
-    getUserSession() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        return sessionData ? JSON.parse(sessionData) : null;
-    }
-    /**
-     * Retrieves the user's permissions from the stored session data.
-     * @returns {any | null} The user's permissions, or null if not found.
-     */
-    getUserPermissions() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        return sessionData ? JSON.parse(sessionData).permissions : null;
-    }
-    /**
-     * Retrieves the session ID from the stored session data.
-     * @returns {any | null} The session ID, or null if not found.
-     */
-    getSessionID() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        console.log(sessionData);
-        if (sessionData) {
-            const sessionId = JSON.parse(sessionData);
-            console.log(sessionId);
-            return sessionId;
-        }
-        return null;
-    }
-    /**
-     * Clears all stored session data from local storage.
-     */
-    clearSession() {
-        localStorage.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.Router }] });
-
-/**
- * Directive to conditionally show or hide elements based on user permissions.
- * @class HasPermissionDirective
- * @typedef {HasPermissionDirective}
- */
-class HasPermissionDirective {
-    el;
-    renderer;
-    sessionService;
-    /**
-     * The required permission(s) to display the element.
-     * Accepts a single string or an array of strings.
-     * @type {string | string[]}
-     */
-    permission;
-    /**
-     * Creates an instance of HasPermissionDirective.
-     * @param {ElementRef} el - Reference to the host element.
-     * @param {Renderer2} renderer - Angular Renderer for DOM manipulation.
-     * @param {SessionService} sessionService - Service to retrieve user permissions.
-     */
-    constructor(el, renderer, sessionService) {
-        this.el = el;
-        this.renderer = renderer;
-        this.sessionService = sessionService;
-    }
-    /**
-     * Lifecycle hook that is called when input properties change.
-     * @param {SimpleChanges} changes - The changes in input properties.
-     */
-    ngOnChanges(changes) {
-        if (changes['permission']) {
-            this.checkPermission();
-        }
-    }
-    /**
-     * Checks if the user has the required permission(s).
-     * Hides the element if the permission is not found.
-     */
-    checkPermission() {
-        const userPermissionsObjects = this.sessionService.getUserPermissions();
-        const userPermissionNames = userPermissionsObjects?.map((perm) => perm.name) || [];
-        const requiredPermissions = Array.isArray(this.permission)
-            ? this.permission
-            : [this.permission];
-        const hasPermission = requiredPermissions.some(permission => userPermissionNames.includes(permission));
-        if (!hasPermission) {
-            this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
-        }
-        else {
-            this.renderer.removeStyle(this.el.nativeElement, 'display');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: HasPermissionDirective, isStandalone: false, selector: "[permission]", inputs: { permission: "permission" }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HasPermissionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[permission]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SessionService }], propDecorators: { permission: [{
-                type: Input
-            }] } });
-
 /**
  * Description placeholder
  * @class LinkedDocumentComponent
@@ -4040,10 +4663,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class SharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, declarations: [TablePrimaryComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, declarations: [TablePrimaryComponent, HasPermissionDirective], imports: [CommonModule,
             TableModule,
             ButtonModule,
-            RippleModule], exports: [TablePrimaryComponent] });
+            RippleModule], exports: [TablePrimaryComponent, HasPermissionDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, imports: [CommonModule,
             TableModule,
             ButtonModule,
@@ -4052,14 +4675,14 @@ class SharedModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TablePrimaryComponent],
+                    declarations: [TablePrimaryComponent, HasPermissionDirective],
                     imports: [
                         CommonModule,
                         TableModule,
                         ButtonModule,
                         RippleModule
                     ],
-                    exports: [TablePrimaryComponent]
+                    exports: [TablePrimaryComponent, HasPermissionDirective]
                 }]
         }] });
 
@@ -4114,17 +4737,15 @@ class DocumentModule {
              * A directive to show the document.
              */
             DocumentDirective,
-            /**
-             * A directive to give permission.
-             */
-            HasPermissionDirective,
             /**
              * A component which have linked documents.
              */
             LinkedDocumentComponent,
             DocumentsMenuComponent,
             UserListComponent,
-            DocumentStatusComponent], imports: [
+            DocumentStatusComponent,
+            DocumentActionsComponent,
+            DocumentSearchComponent], imports: [
             /**
              * Angular's CommonModule is imported to access common directives like `ngIf` and `ngFor`.
              */
@@ -4197,11 +4818,8 @@ class DocumentModule {
             PanelMenuModule,
             CardModule,
             TableModule,
-            SharedModule], exports: [
-            /**
-             * A directive to give permission.
-             */
-            HasPermissionDirective,
+            SharedModule,
+            InputTextareaModule], exports: [
             /**
              * Exports the `DocumentContainerComponent` to be used in other modules.
              */
@@ -4210,6 +4828,10 @@ class DocumentModule {
              * Exports the `DocumentViewerComponent` to be used in other modules.
              */
             DocumentViewerComponent,
+            /**
+             * Exports the `DocumentActionsComponent` to be used in other modules.
+             */
+            DocumentActionsComponent,
             /**
              * A component to display a list of documents.
              * DocumentListComponent
@@ -4218,7 +4840,11 @@ class DocumentModule {
             /**
              * A directive to show the document.
              */
-            DocumentDirective] });
+            DocumentDirective,
+            /**
+             * A component for searching documents.
+             */
+            DocumentSearchComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, providers: [
             /**
              * Provide the messageservice to be used in other components.
@@ -4323,7 +4949,8 @@ class DocumentModule {
             PanelMenuModule,
             CardModule,
             TableModule,
-            SharedModule] });
+            SharedModule,
+            InputTextareaModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, decorators: [{
             type: NgModule,
@@ -4370,10 +4997,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          * A directive to show the document.
                          */
                         DocumentDirective,
-                        /**
-                         * A directive to give permission.
-                         */
-                        HasPermissionDirective,
                         /**
                          * A component which have linked documents.
                          */
@@ -4381,6 +5004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DocumentsMenuComponent,
                         UserListComponent,
                         DocumentStatusComponent,
+                        DocumentActionsComponent,
+                        DocumentSearchComponent,
                     ],
                     imports: [
                         /**
@@ -4455,13 +5080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         PanelMenuModule,
                         CardModule,
                         TableModule,
-                        SharedModule
+                        SharedModule,
+                        InputTextareaModule
                     ],
                     exports: [
-                        /**
-                         * A directive to give permission.
-                         */
-                        HasPermissionDirective,
                         /**
                          * Exports the `DocumentContainerComponent` to be used in other modules.
                          */
@@ -4470,6 +5092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          * Exports the `DocumentViewerComponent` to be used in other modules.
                          */
                         DocumentViewerComponent,
+                        /**
+                         * Exports the `DocumentActionsComponent` to be used in other modules.
+                         */
+                        DocumentActionsComponent,
                         /**
                          * A component to display a list of documents.
                          * DocumentListComponent
@@ -4479,6 +5105,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          * A directive to show the document.
                          */
                         DocumentDirective,
+                        /**
+                         * A component for searching documents.
+                         */
+                        DocumentSearchComponent,
                     ],
                     providers: [
                         /**
@@ -4523,5 +5153,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DocumentContainerComponent, DocumentDirective, DocumentHistoryComponent, DocumentListComponent, DocumentModule, DocumentTableBuilderService, DocumentViewerComponent, HasPermissionDirective };
+export { DocumentActionsComponent, DocumentContainerComponent, DocumentDirective, DocumentHistoryComponent, DocumentListComponent, DocumentModule, DocumentSearchComponent, DocumentTableBuilderService, DocumentViewerComponent, HasPermissionDirective };
 //# sourceMappingURL=cat-documents-ng.mjs.map