cat-documents-ng 0.2.34 → 0.2.35

package/fesm2022/cat-documents-ng.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Output, Input, ViewEncapsulation, ViewChild, Directive, NgModule, APP_INITIALIZER } from '@angular/core';
-import * as i4 from '@angular/common';
+import { Injectable, EventEmitter, Output, Input, Component, ViewChild, ViewEncapsulation, Directive, NgModule, APP_INITIALIZER } from '@angular/core';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { firstValueFrom, tap, EMPTY, catchError, throwError, BehaviorSubject, combineLatest, Subscription } from 'rxjs';
+import { firstValueFrom, tap, EMPTY, catchError, throwError, combineLatest, Subscription } 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 { trigger, state, style, transition, animate } from '@angular/animations';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import * as i8 from 'primeng/button';
@@ -26,19 +26,19 @@ import * as i14 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i2$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i5 from 'primeng/ripple';
+import * as i5$1 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i7 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i8$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i4$1 from 'ng2-pdf-viewer';
+import * as i4 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
-import * as i5$1 from 'primeng/badge';
+import * as i7$1 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i6 from 'primeng/menu';
+import * as i8$2 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i7$1 from 'primeng/card';
+import * as i9$1 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { AccordionModule } from 'primeng/accordion';
 import { ListboxModule } from 'primeng/listbox';
@@ -53,6 +53,34 @@ import { PanelMenuModule } from 'primeng/panelmenu';
  * These constants are related to document statuses and other shared data.
  */
 class SHARED {
+    /**
+     * Represents the info.
+     */
+    static VISIBLE = 'visible';
+    /**
+     * Represents the info.
+     */
+    static HIDDEN = 'hidden';
+    /**
+     * Represents the info.
+     */
+    static APPLICATION_DOCS = 'Application Docs';
+    /**
+     * Represents the info.
+     */
+    static INFO = 'info';
+    /**
+     * Represents the success.
+     */
+    static SUCCESS = 'success';
+    /**
+     * Represents the warning.
+     */
+    static WARNING = 'warning';
+    /**
+     * Represents the warning.
+     */
+    static DANGER = 'danger';
     /**
      * Represents the stores userData.
      */
@@ -113,6 +141,24 @@ class SHARED {
      * @type {string}
      */
     static FILE = 'file';
+    /**
+     * Query parameter for menu item filter.
+     * @static
+     * @type {string}
+     */
+    static MENU_ITEM_PARAM = 'menuItem';
+    /**
+     * Query parameter for user ID filter.
+     * @static
+     * @type {string}
+     */
+    static USER_ID_PARAM = 'userId';
+    /**
+     * Query parameter for status filter.
+     * @static
+     * @type {string}
+     */
+    static STATUS_PARAM = 'status';
     /**
      * Represents the array of file size units ('B', 'KB', 'MB') used for file size formatting.
      * @static
@@ -155,6 +201,12 @@ class SHARED {
      * @type {string}
      */
     static CONTEXT_ID = 'contextId';
+    /**
+     * Represent contextId.
+     * @static
+     * @type {string}
+     */
+    static CATEGORY = 'category';
     /**
      * Represent fileSize.
      * @static
@@ -283,6 +335,21 @@ class SHARED {
             ]
         }
     ];
+    static APPLICATION = 'Application';
+    static APPLICANTS = 'Applicants';
+    static EMPTY_SPACE = ' ';
+    static COLORS = ['orange', 'blue', 'green', 'grey', 'purple'];
+    static COLOR_MAP = {
+        'orange': '#f97316',
+        'blue': '#3b82f6',
+        'green': '#10b981',
+        'grey': '#6b7280',
+        'purple': '#8b5cf6'
+    };
+    static DEFAULT_COLOR = '#3b82f6';
+    static STATUS_WITH_DASH = 'status-';
+    static ICON_WITH_DASH = 'icon-';
+    static SEARCH_KEY = 'searchKey';
 }
 /**
  * `DUMMYDOCUMENTLIST` is a mock list of document objects used for testing and development purposes.
@@ -457,9 +524,9 @@ const DUMMY_DOCUMENT_SECTIONS = [
         approvedDocument: 1,
         list: [
             {
-                documentName: "passport_emma_wilson_2025.pdf",
+                documentName: "passport_emilia_wilson_2025.pdf",
                 documentType: "Passport",
-                documentUrl: "https://example.com/documents/passport_emma_wilson_2025.pdf",
+                documentUrl: "https://example.com/documents/passport_emilia_wilson_2025.pdf",
                 status: "Pending",
                 applicantName: "Charlotte Anderson",
                 uploadedTime: "28 May 2025"
@@ -508,139 +575,62 @@ const DUMMY_DOCUMENT_SECTIONS = [
     },
     {
         header: "Income",
-        description: "Employment and income verification documents",
+        description: "Personal Income documents required for verification",
         pendingDocument: 1,
         approvedDocument: 1,
         list: [
             {
-                documentName: "latest_payslip_charlotte_2025.pdf",
-                documentType: "Latest Payslip",
-                documentUrl: "https://example.com/documents/latest_payslip_charlotte_2025.pdf",
+                documentName: "passport_emilia_wilson_2025.pdf",
+                documentType: "Passport",
+                documentUrl: "https://example.com/documents/passport_emilia_wilson_2025.pdf",
                 status: "Pending",
                 applicantName: "Charlotte Anderson",
-                uploadedTime: "29 May 2025"
-            },
-            {
-                documentName: "p60_document_sophia_2025.pdf",
-                documentType: "P60 Document",
-                documentUrl: "https://example.com/documents/p60_document_sophia_2025.pdf",
-                status: "Alert",
-                applicantName: "Sophia Reynolds",
-                uploadedTime: "26 May 2025"
+                uploadedTime: "28 May 2025"
             },
             {
-                documentName: "employer_reference_benjamin_2025.pdf",
-                documentType: "Employer Reference",
-                documentUrl: "https://example.com/documents/employer_reference_benjamin_2025.pdf",
+                documentName: "driving_license_benjamin_mitchell_2025.jpg",
+                documentType: "Driving License",
+                documentUrl: "https://example.com/documents/driving_license_benjamin_mitchell_2025.jpg",
                 status: "Approved",
                 applicantName: "Benjamin Mitchell",
                 uploadedTime: "27 May 2025"
-            }
-        ]
-    },
-    {
-        header: "Affordability",
-        description: "Financial assessment and planning documents",
-        pendingDocument: 1,
-        approvedDocument: 0,
-        list: [
-            {
-                documentName: "bank_statements_charlotte_2025.pdf",
-                documentType: "Bank Statements",
-                documentUrl: "https://example.com/documents/bank_statements_charlotte_2025.pdf",
-                status: "Pending",
-                applicantName: "Charlotte Anderson",
-                uploadedTime: "28 May 2025"
             },
             {
-                documentName: "budget_planner_sophia_2025.xlsx",
-                documentType: "Budget Planner",
-                documentUrl: "https://example.com/documents/budget_planner_sophia_2025.xlsx",
+                documentName: "british_gas_bill_may_2025.pdf",
+                documentType: "Utility Bill",
+                documentUrl: "https://example.com/documents/british_gas_bill_may_2025.pdf",
                 status: "Alert",
                 applicantName: "Sophia Reynolds",
-                uploadedTime: "25 May 2025"
-            }
-        ]
-    },
-    {
-        header: "Credit Conduct",
-        description: "Credit history and mortgage documentation",
-        pendingDocument: 1,
-        approvedDocument: 0,
-        list: [
+                uploadedTime: "26 May 2025"
+            },
             {
-                documentName: "bank_statements_charlotte_2025.pdf",
-                documentType: "Bank Statements",
-                documentUrl: "https://example.com/documents/bank_statements_charlotte_2025.pdf",
-                status: "Pending",
-                applicantName: "Charlotte Anderson",
-                uploadedTime: "28 May 2025"
+                documentName: "council_tax_oliver_thompson_2025_2026.pdf",
+                documentType: "Council Tax Bill",
+                documentUrl: "https://example.com/documents/council_tax_oliver_thompson_2025_2026.pdf",
+                status: "Uploaded",
+                applicantName: "Oliver Thompson",
+                uploadedTime: "30 May 2025"
             },
             {
-                documentName: "budget_planner_sophia_2025.xlsx",
-                documentType: "Budget Planner",
-                documentUrl: "https://example.com/documents/budget_planner_sophia_2025.xlsx",
-                status: "Alert",
-                applicantName: "Sophia Reynolds",
-                uploadedTime: "25 May 2025"
-            }
-        ]
-    },
-    {
-        header: "KYC",
-        description: "Know Your Customer verification documents",
-        pendingDocument: 1,
-        approvedDocument: 0,
-        list: [
+                documentName: "certified_id_oliver_thompson_2025.pdf",
+                documentType: "Certified ID",
+                documentUrl: "https://example.com/documents/certified_id_oliver_thompson_2025.pdf",
+                status: "Reviewing",
+                applicantName: "Oliver Thompson",
+                uploadedTime: "02 Jun 2025"
+            },
             {
-                documentName: "kyc_checklist_charlotte_2025.pdf",
-                documentType: "KYC Checklist",
-                documentUrl: "https://example.com/documents/kyc_checklist_charlotte_2025.pdf",
-                status: "Pending",
-                applicantName: "Charlotte Anderson",
-                uploadedTime: "28 May 2025"
+                documentName: "proof_of_address_oliver_thompson_2025.pdf",
+                documentType: "Proof of Address",
+                documentUrl: "https://example.com/documents/proof_of_address_oliver_thompson_2025.pdf",
+                status: "Rejected",
+                applicantName: "Oliver Thompson",
+                uploadedTime: "02 Jun 2025"
             }
         ]
     }
 ];
 
-/**
- * A utility class containing common error messages.
- * @class ERRORS
- */
-class ERRORS {
-    /**
-     * Error message for invalid recipient.
-     * @static
-     * @type {string}
-     */
-    static INVALID_RECIPIENT = "Invalid recipient: The recipient cannot be empty.";
-    /**
-     * Error message for invalid document.
-     * @static
-     * @type {string}
-     */
-    static ERROR_FETCHING_DOCUMENTS = "Error fetching documents:";
-    /**
-     * Error message for invalid document.
-     * @static
-     * @type {string}
-     */
-    static ERROR_FETCHING_FOLDERS = "Error fetching folders:";
-    /**
-     * Error message for invalid document.
-     * @static
-     * @type {string}
-     */
-    static ERROR_ALLDOCUMENT_MISSING = "allDocumentTypes is missing in the response:";
-    /**
-     * Error message for invalid document.
-     * @static
-     * @type {string}
-     */
-    static ERROR_DOCUMENT_TYPES = "Error fetching document types:";
-}
-
 /**
  * Creates the initial state for the `DocumentState` store.
  * This function provides default values for all properties in the `DocumentState` interface,
@@ -660,12 +650,15 @@ function createInitialState() {
         folders: [],
         messages: [],
         documentList: [],
-        // Initialize new selection properties
+        documentCategories: [],
         selectedMenuItem: null,
         selectedUserId: null,
         selectedStatus: null,
-        // Initialize user list visibility to true
-        showUserList: true
+        showUserList: true,
+        currentDocument: null,
+        userList: [],
+        statusData: [],
+        documentListResponse: null
     };
 }
 
@@ -704,6 +697,9 @@ let DocumentStore = class DocumentStore extends EntityStore {
     setDocumentList(documents) {
         this.update({ documents: documents });
     }
+    setDocumentCategories(categories) {
+        this.update({ documentCategories: categories });
+    }
     // New methods for selection state management
     setSelectedMenuItem(menuItem) {
         this.update({ selectedMenuItem: menuItem });
@@ -735,13 +731,29 @@ let DocumentStore = class DocumentStore extends EntityStore {
     setShowUserList(show) {
         this.update({ showUserList: show });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStore, providedIn: 'root' });
+    // Method to set the current document
+    setCurrentDocument(document) {
+        this.update({ currentDocument: document });
+    }
+    // Method to set the user list
+    setUserList(userList) {
+        this.update({ userList: userList });
+    }
+    // Method to set the status data
+    setStatusData(statusData) {
+        this.update({ statusData: statusData });
+    }
+    // Method to set the document list response
+    setDocumentListResponse(response) {
+        this.update({ documentListResponse: response });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStore, providedIn: 'root' });
 };
 DocumentStore = __decorate([
     StoreConfig({ name: 'documents' })
 ], DocumentStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStore, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -767,6 +779,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_CATAGORIES = "documents/getAllCategoriesByApplicationId";
     /**
      * The query parameter to pass a context ID in API requests.
      * Used to specify the context for certain API calls, such as filtering or scoping the request.
@@ -798,6 +817,19 @@ class URLS {
      * @type {string}
      */
     static PARENT_DOCUMENT_TYPE_ID = "parentDocumentType?parentDocumentTypeId=";
+    /**
+     * The query parameter to pass a document ID in API requests.
+     * @static
+     * @type {string}
+     */
+    static USERLIST = "documents/getContextIdListByApplicationId/";
+    /**
+     * The URL endpoint for getting document status count by context ID.
+     * Used to fetch status data with applicationId, contextId, and category parameters.
+     * @static
+     * @type {string}
+     */
+    static STATUS_DOCUMENT_COUNT = "documents/getStatusDocumentCountByContextId/";
     /**
      * The query parameter to pass a context ID in API requests.
      * Used to specify the context for certain API calls, such as filtering or scoping the request.
@@ -805,6 +837,8 @@ class URLS {
      * @type {string}
      */
     static CONTEXT_ID = "&contextId=";
+    static GETALL = "documents/getAllByContextId";
+    static DOCUMENT_LIST = "list";
 }
 
 /**
@@ -868,10 +902,10 @@ class AppConfigService {
     get visibilityOptions() {
         return this.appConfig?.visibilityOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AppConfigService, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AppConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AppConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -886,7 +920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @param {DocumentStore} documentStore - The store that manages the state of documents.
  * @param {HttpClient} http - The Angular HTTP client for making API requests.
  */
-let DocumentService$1 = class DocumentService {
+class DocumentService {
     documentStore;
     http;
     appConfigService;
@@ -949,10 +983,10 @@ let DocumentService$1 = class DocumentService {
     delete(id) {
         return this.http.delete(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${id}`).pipe(tap(() => this.documentStore.remove(id)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, deps: [{ token: DocumentStore }, { token: i2.HttpClient }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, providedIn: 'root' });
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService$1, decorators: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, 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: DocumentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: i2.HttpClient }, { type: AppConfigService }] });
@@ -998,10 +1032,17 @@ class DocumentQuery extends QueryEntity {
     selectDocumets() {
         return this.select((state) => state.documentList);
     }
+    /**
+     * Selects the document categories.
+     * @returns {Observable<DocumentCategory[]>} Observable that emits the document categories.
+     */
+    selectDocumentCategories() {
+        return this.select((state) => state.documentCategories);
+    }
     // New query methods for selection state
     /**
      * Selects the currently selected menu item.
-     * @returns {Observable<string | null>} Observable that emits the currently selected menu item.
+     * @returns {Observable<string | null>} Observable that emits the currently selected menu item _id (not the label).
      */
     selectSelectedMenuItem() {
         return this.select((state) => state.selectedMenuItem);
@@ -1023,6 +1064,7 @@ class DocumentQuery extends QueryEntity {
     /**
      * 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.
+     * Note: menuItem is the _id of the selected menu item, not the label.
      */
     selectSelectionState() {
         return this.select((state) => ({
@@ -1034,6 +1076,7 @@ class DocumentQuery extends QueryEntity {
     /**
      * Gets the current selection state values (synchronous).
      * @returns {Object} The current selection state values.
+     * Note: menuItem is the _id of the selected menu item, not the label.
      */
     getSelectionState() {
         const state = this.getValue();
@@ -1057,10 +1100,66 @@ class DocumentQuery extends QueryEntity {
     getShowUserList() {
         return this.getValue().showUserList;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, providedIn: 'root' });
+    /**
+     * Selects the current document.
+     * @returns {Observable<DocumentModel | null>} Observable that emits the current document.
+     */
+    selectCurrentDocument() {
+        return this.select((state) => state.currentDocument);
+    }
+    /**
+     * Gets the current document value (synchronous).
+     * @returns {DocumentModel | null} The current document.
+     */
+    getCurrentDocument() {
+        return this.getValue().currentDocument;
+    }
+    /**
+     * Selects the user list.
+     * @returns {Observable<UserListModel[]>} Observable that emits the user list.
+     */
+    selectUserList() {
+        return this.select((state) => state.userList);
+    }
+    /**
+     * Gets the current user list value (synchronous).
+     * @returns {UserListModel[]} The current user list.
+     */
+    getUserList() {
+        return this.getValue().userList;
+    }
+    /**
+     * Selects the status data.
+     * @returns {Observable<StatusDataModel[]>} Observable that emits the status data.
+     */
+    selectStatusData() {
+        return this.select((state) => state.statusData);
+    }
+    /**
+     * Gets the current status data value (synchronous).
+     * @returns {StatusDataModel[]} The current status data.
+     */
+    getStatusData() {
+        return this.getValue().statusData;
+    }
+    /**
+     * Selects the document list response.
+     * @returns {Observable<DocumentListResponse[] | null>} Observable that emits the document list response.
+     */
+    selectDocumentListResponse() {
+        return this.select((state) => state.documentListResponse);
+    }
+    /**
+     * Gets the current document list response value (synchronous).
+     * @returns {DocumentListResponse[] | null} The current document list response.
+     */
+    getDocumentListResponse() {
+        return this.getValue().documentListResponse;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentQuery, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentQuery, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DocumentStore }] });
@@ -1108,6 +1207,21 @@ class DocumentHttpService {
             return throwError(() => new Error(error));
         }));
     }
+    /**
+     * Fetches a document catagories by its path name.
+     * Includes error handling for failed API requests.
+     * @param {string} contextId - The context ID to fetch the document.
+     * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
+     */
+    getDocumentCatagories(contextId) {
+        if (!contextId)
+            return EMPTY;
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENTS_CATAGORIES}/${contextId}`).pipe(tap((categories) => {
+            this.documentStore.setDocumentCategories(categories);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
     /**
      * Fetches a document by its path name and transforms the response for dropdown options.
      * Includes error handling for failed API requests.
@@ -1159,26 +1273,67 @@ class DocumentHttpService {
         }));
     }
     /**
-     * Fetches documents based on selection criteria (menu item, user ID, and status).
+    * Fetches a userlist by its path name.
+    * @param {string} contextId - The document ID to fetch the document.
+    * @returns {Observable<UserListModel[]>} Observable that emits the user list data.
+    */
+    getUserListByContextId(contextId) {
+        if (!contextId)
+            return EMPTY;
+        return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`).pipe(tap((userList) => {
+            this.documentStore.setUserList(userList);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches document status count data by application ID with optional context ID and category parameters.
+     * @param {string} applicationId - The application ID to fetch status data.
+     * @param {string | null} contextId - The context ID (applicant ID) to filter by. If null, uses applicationId.
+     * @param {string | null} categoryId - The category ID to filter by.
+     * @returns {Observable<StatusDataModel[]>} Observable that emits the status data.
+     */
+    getStatusDocumentCount(applicationId, contextId = null, categoryId = null) {
+        if (!applicationId)
+            return EMPTY;
+        let url = `${this.apiUrl}${URLS.STATUS_DOCUMENT_COUNT}${applicationId}`;
+        let params = new HttpParams();
+        const contextParam = contextId || applicationId;
+        params = params.set(SHARED.CONTEXT_ID, contextParam);
+        if (categoryId) {
+            params = params.set(SHARED.CATEGORY, categoryId);
+        }
+        return this.http.get(url, { params }).pipe(tap((statusData) => {
+            this.documentStore.setStatusData(statusData);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches documents based on selection criteria (menu item, user ID, status, and search key).
      * This method sends an HTTP GET request with query parameters for the selected filters.
+     * @param {string} contextId - The context ID (applicationId or applicantId).
      * @param {string | null} menuItem - The selected menu item filter.
      * @param {string | null} userId - The selected user ID filter.
      * @param {string | null} status - The selected status filter.
+     * @param {string | null} searchKey - The search key filter.
      * @returns {Observable<any>} An observable that emits the filtered document data.
      */
-    getDocumentsBySelection(menuItem, userId, status) {
+    getDocumentsBySelection(contextId, menuItem, userId, status, searchKey = null) {
         let params = new HttpParams();
         if (menuItem) {
-            params = params.set('menuItem', menuItem);
+            params = params.set(SHARED.CATEGORY, menuItem);
         }
         if (userId) {
-            params = params.set('userId', userId);
+            params = params.set(SHARED.CONTEXT_ID, userId);
         }
         if (status) {
-            params = params.set('status', status);
+            params = params.set(SHARED.STATUS_PARAM, status);
         }
-        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/filter`, { params }).pipe(tap((response) => {
-            // Update the store with the filtered results
+        if (searchKey) {
+            params = params.set(SHARED.SEARCH_KEY, searchKey);
+        }
+        return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params }).pipe(tap((response) => {
             if (response.documents) {
                 this.documentStore.setDocumentList(response.documents);
             }
@@ -1186,10 +1341,10 @@ class DocumentHttpService {
             return throwError(() => new Error(error));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.0.5", ngImport: i0, type: DocumentHttpService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentHttpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHttpService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1199,60 +1354,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 /**
  * Service to manage the document data and selection state
  */
-class DocumentService {
+class DocumentHelperService {
     documentStore;
     documentQuery;
     documentHttpService;
-    documentSubject$ = new BehaviorSubject(null);
     constructor(documentStore, documentQuery, documentHttpService) {
         this.documentStore = documentStore;
         this.documentQuery = documentQuery;
         this.documentHttpService = documentHttpService;
-        // Automatically call API when selection state changes
-        this.initializeSelectionWatcher();
+        // Note: initializeSelectionWatcher now requires contextId
+        // This should be called from the component that has access to contextId
     }
     /**
      * Initialize watcher for selection state changes
+     * @param contextId - The context ID to use for API calls
      */
-    initializeSelectionWatcher() {
-        // Combine all selection observables and watch for changes
+    initializeSelectionWatcher(contextId) {
         combineLatest([
             this.documentQuery.selectSelectedMenuItem(),
             this.documentQuery.selectSelectedUserId(),
             this.documentQuery.selectSelectedStatus()
-        ]).pipe(debounceTime(300), // Debounce to avoid too many API calls
-        distinctUntilChanged((prev, curr) => prev[0] === curr[0] && prev[1] === curr[1] && prev[2] === curr[2]), switchMap(([menuItem, userId, status]) => {
-            // Only call API if at least one selection is made
-            if (menuItem || userId || status) {
-                return this.documentHttpService.getDocumentsBySelection(menuItem, userId, status);
-            }
-            return [];
+        ]).pipe(debounceTime(300), distinctUntilChanged((prev, curr) => {
+            const isSame = prev[0] === curr[0] && prev[1] === curr[1] && prev[2] === curr[2];
+            console.log('Selection state changed:', { prev, curr, isSame });
+            return isSame;
+        }), switchMap(([menuItem, userId, status]) => {
+            // Always call the API, even when filters are cleared
+            return this.documentHttpService.getDocumentsBySelection(contextId, menuItem, userId, status);
         })).subscribe({
             next: (response) => {
-                console.log('API called with selection:', response);
+                const currentState = this.documentQuery.getSelectionState();
+                console.log('API called with filters:', {
+                    menuItem: currentState.menuItem,
+                    userId: currentState.userId,
+                    status: currentState.status
+                });
+                console.log('API response:', response);
+                this.documentStore.setDocumentListResponse(response);
             },
             error: (error) => {
                 console.error('Error calling API with selection:', error);
             }
         });
     }
+    /**
+     * Initialize watcher for selection state changes with initial load
+     * @param contextId - The context ID to use for API calls
+     */
+    initializeSelectionWatcherWithInitialLoad(contextId) {
+        // First, load initial data without filters
+        this.documentHttpService.getDocumentsBySelection(contextId, null, null, null).subscribe({
+            next: (response) => {
+                console.log('Initial API call:', response);
+                this.documentStore.setDocumentListResponse(response);
+            },
+            error: (error) => {
+                console.error('Error calling initial API:', error);
+            }
+        });
+        // Then set up the watcher for filter changes
+        this.initializeSelectionWatcher(contextId);
+    }
     /**
      * Set the document data
      * @param document the document data
      */
     set(document) {
-        this.documentSubject$.next(document);
+        this.documentStore.setCurrentDocument(document);
     }
     /**
      * Get the document data
      * @returns the document data
      */
     get() {
-        return this.documentSubject$.asObservable();
+        return this.documentQuery.selectCurrentDocument();
+    }
+    /**
+     * Get the current document value synchronously
+     * @returns the current document value
+     */
+    getValue() {
+        return this.documentQuery.getCurrentDocument();
     }
     /**
      * Set the selected menu item
-     * @param menuItem the selected menu item
+     * @param menuItem the selected menu item _id (not the label)
      */
     setSelectedMenuItem(menuItem) {
         this.documentStore.setSelectedMenuItem(menuItem);
@@ -1273,7 +1459,7 @@ class DocumentService {
     }
     /**
      * Set all selection state at once
-     * @param menuItem the selected menu item
+     * @param menuItem the selected menu item _id (not the label)
      * @param userId the selected user ID
      * @param status the selected status
      */
@@ -1300,189 +1486,381 @@ class DocumentService {
     getSelectionState() {
         return this.documentQuery.selectSelectionState();
     }
+    /**
+     * Get observable for filtered documents
+     * @returns Observable that emits filtered document responses
+     */
+    getFilteredDocuments() {
+        return this.documentQuery.selectDocumentListResponse();
+    }
     /**
      * Manually trigger API call with current selection state
+     * @param contextId - The context ID to use for the API call
      */
-    refreshDocumentsWithCurrentSelection() {
+    refreshDocumentsWithCurrentSelection(contextId) {
         const currentState = this.documentQuery.getSelectionState();
-        this.documentHttpService.getDocumentsBySelection(currentState.menuItem, currentState.userId, currentState.status).subscribe({
+        console.log('Manual API refresh with state:', currentState);
+        this.documentHttpService.getDocumentsBySelection(contextId, currentState.menuItem, currentState.userId, currentState.status).subscribe({
+            next: (response) => {
+                console.log('Manual API refresh response:', response);
+                this.documentStore.setDocumentListResponse(response);
+            },
+            error: (error) => {
+                throw new Error(error);
+            }
+        });
+    }
+    /**
+     * Force refresh documents with no filters
+     * @param contextId - The context ID to use for the API call
+     */
+    refreshDocumentsWithoutFilters(contextId) {
+        console.log('Force refreshing documents without filters');
+        this.documentHttpService.getDocumentsBySelection(contextId, null, null, null).subscribe({
             next: (response) => {
-                console.log('Manual API refresh:', response);
+                console.log('Force refresh response:', response);
+                this.documentStore.setDocumentListResponse(response);
             },
             error: (error) => {
-                console.error('Error in manual API refresh:', error);
+                console.error('Error in force refresh:', error);
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHelperService, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHelperService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentHttpService }] });
 
-class UserListComponent {
-    documentService;
+class UserListService {
     documentStore;
     documentQuery;
-    userData = [];
-    selectedUser;
-    userSelected = new EventEmitter();
-    constructor(documentService, documentStore, documentQuery) {
-        this.documentService = documentService;
+    constructor(documentStore, documentQuery) {
         this.documentStore = documentStore;
         this.documentQuery = documentQuery;
     }
-    ngOnInit() {
-        // Initialize user data with persistent colors and initials
-        this.userData = USERLIST.map((user, index) => ({
+    getInitials(name) {
+        return name.split(SHARED.EMPTY_SPACE).map(name => name.charAt(0)).join(SHARED.EMPTY).toUpperCase();
+    }
+    getColorByIndex(index) {
+        const colors = SHARED.COLORS;
+        return colors[index % colors.length];
+    }
+    getColorValue(colorName) {
+        const colorMap = SHARED.COLOR_MAP;
+        return colorMap[colorName] || SHARED.DEFAULT_COLOR;
+    }
+    processUserData(userList) {
+        return userList.map((user, index) => ({
             ...user,
-            initials: this.getInitials(user.username),
+            initials: this.getInitials(user.name),
             color: this.getColorByIndex(index)
         }));
-        // Subscribe to selected user ID from state
-        this.documentQuery.selectSelectedUserId().subscribe(userId => {
-            if (userId) {
-                const user = this.userData.find(u => u._id === userId);
-                this.selectedUser = user ? user.username : undefined;
+    }
+    /**
+     * Finds the selected menu item from categories
+     * @param selectedMenuItemId - The ID of the selected menu item
+     * @param categories - The document categories
+     * @returns The selected menu item or null
+     */
+    findSelectedMenuItem(selectedMenuItemId, categories) {
+        for (const category of categories) {
+            if (category.items) {
+                const item = category.items.find(item => item._id === selectedMenuItemId);
+                if (item) {
+                    return item;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Filters user list based on selected menu item category
+     * @param userList - The complete user list
+     * @param categories - The document categories
+     * @returns Filtered user list
+     */
+    filterUsersByCategory(userList, categories) {
+        const selectedMenuItemId = this.documentQuery.getSelectionState().menuItem;
+        if (!selectedMenuItemId) {
+            return userList;
+        }
+        const selectedMenuItem = this.findSelectedMenuItem(selectedMenuItemId, categories);
+        if (!selectedMenuItem) {
+            return userList;
+        }
+        const selectedCategory = categories.find(category => category.items?.some(item => item._id === selectedMenuItemId));
+        if (!selectedCategory) {
+            return userList;
+        }
+        if (selectedCategory.label === SHARED.APPLICATION) {
+            return userList.filter(user => user.name === SHARED.APPLICATION_DOCS);
+        }
+        return userList;
+    }
+    selectUser(userId, userData) {
+        const user = userData.find(u => u._id === userId);
+        if (user) {
+            this.documentStore.setSelectedUserId(userId);
+            return { selectedUser: user.name, name: user.name };
+        }
+        return { selectedUser: undefined, name: undefined };
+    }
+    unselectUser() {
+        this.documentStore.setSelectedUserId(null);
+    }
+    isUserSelected(userId, userData, selectedUser) {
+        return selectedUser === userData.find(u => u._id === userId)?.name;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, deps: [{ token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }] });
+
+class UserListComponent {
+    documentService;
+    documentStore;
+    documentQuery;
+    userListService;
+    userList = SHARED.EMPTY_ARRAY;
+    categories = SHARED.EMPTY_ARRAY;
+    userSelected = new EventEmitter();
+    userData = SHARED.EMPTY_ARRAY;
+    filteredUserData = SHARED.EMPTY_ARRAY;
+    selectedUser;
+    shouldShowContainer = true;
+    constructor(documentService, documentStore, documentQuery, userListService) {
+        this.documentService = documentService;
+        this.documentStore = documentStore;
+        this.documentQuery = documentQuery;
+        this.userListService = userListService;
+    }
+    ngOnChanges(changes) {
+        if (changes['userList'] && !changes['userList'].firstChange) {
+            this.initializeUserData();
+        }
+    }
+    initializeUserData() {
+        if (this.userList && this.userList.length > 0) {
+            this.userData = this.userListService.processUserData(this.userList);
+            this.updateFilteredUserData();
+        }
+    }
+    updateFilteredUserData() {
+        if (this.userData.length > 0 && this.categories.length > 0) {
+            this.filteredUserData = this.userListService.filterUsersByCategory(this.userData, this.categories);
+            this.shouldShowContainer = true;
+            if (this.selectedUser) {
+                const selectedUserInFiltered = this.filteredUserData.find(user => user.name === this.selectedUser);
+                if (!selectedUserInFiltered) {
+                    this.selectedUser = undefined;
+                    this.documentStore.setSelectedUserId(null);
+                    this.userSelected.emit(SHARED.EMPTY);
+                }
+            }
+        }
+        else {
+            this.filteredUserData = this.userData;
+            this.shouldShowContainer = true;
+        }
+    }
+    ngOnInit() {
+        this.initializeUserData();
+        this.documentQuery.selectSelectedUserId().subscribe(userId => {
+            if (userId) {
+                const user = this.userData.find(u => u._id === userId);
+                this.selectedUser = user ? user.name : undefined;
             }
             else {
                 this.selectedUser = undefined;
             }
         });
-        // Subscribe to user list visibility and reset selection when hidden
+        this.documentQuery.selectSelectedMenuItem().subscribe(menuItemId => {
+            this.updateFilteredUserData();
+            if (this.selectedUser) {
+                const selectedUserInFiltered = this.filteredUserData.find(user => user.name === this.selectedUser);
+                if (!selectedUserInFiltered) {
+                    this.selectedUser = undefined;
+                    this.documentStore.setSelectedUserId(null);
+                    this.userSelected.emit(SHARED.EMPTY);
+                }
+            }
+        });
         this.documentQuery.selectShowUserList().subscribe(show => {
             if (!show && this.selectedUser) {
-                // Reset user selection when user list is hidden
                 this.selectedUser = undefined;
-                this.userSelected.emit('');
+                this.userSelected.emit(SHARED.EMPTY);
             }
         });
     }
-    getInitials(username) {
-        return username.split(' ').map(name => name.charAt(0)).join('').toUpperCase();
-    }
-    getColorByIndex(index) {
-        const colors = ['orange', 'blue', 'green', 'grey', 'purple'];
-        return colors[index % colors.length];
-    }
-    getColorValue(colorName) {
-        const colorMap = {
-            'orange': '#f97316',
-            'blue': '#3b82f6',
-            'green': '#10b981',
-            'grey': '#6b7280',
-            'purple': '#8b5cf6'
-        };
-        return colorMap[colorName] || '#3b82f6';
-    }
     onUserSelect(username, id) {
-        // If the same user is clicked again, unselect it
         if (this.selectedUser === username) {
             this.selectedUser = undefined;
-            this.documentStore.setSelectedUserId(null);
-            this.userSelected.emit('');
+            this.userListService.unselectUser();
+            this.userSelected.emit(SHARED.EMPTY);
         }
         else {
-            // Select the new user
             this.selectedUser = username;
             this.documentStore.setSelectedUserId(id);
             this.userSelected.emit(username);
         }
     }
-    // Method to programmatically select a user
-    selectUser(userId) {
-        const user = this.userData.find(u => u._id === userId);
-        if (user) {
-            this.selectedUser = user.username;
-            this.documentStore.setSelectedUserId(userId);
-            this.userSelected.emit(user.username);
-        }
-    }
-    // Method to programmatically unselect user
-    unselectUser() {
-        this.selectedUser = undefined;
-        this.documentStore.setSelectedUserId(null);
-        this.userSelected.emit('');
-    }
-    // Method to check if a user is selected
-    isUserSelected(userId) {
-        return this.selectedUser === this.userData.find(u => u._id === userId)?.username;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentService }, { token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: UserListComponent, isStandalone: false, selector: "lib-user-list", outputs: { userSelected: "userSelected" }, ngImport: i0, template: "<div class=\"user-list-container\">\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of userData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.username\"\r\n      [style.border-color]=\"selectedUser === user.username ? getColorValue(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.username, 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.username }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approveDocumentCount }} approved / {{ user.pendingDocumentCount }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.username\">\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem;animation:slideInFromTop .3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-cards{display:flex;flex-wrap:wrap;gap:1rem}.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;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    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    <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: [
+            trigger('slideInFromTop', [
+                state('void', style({
+                    opacity: 0,
+                    transform: 'translateY(-10px)'
+                })),
+                state('*', style({
+                    opacity: 1,
+                    transform: 'translateY(0)'
+                })),
+                transition('void => *', [
+                    animate('300ms ease-out')
+                ])
+            ]),
+            trigger('fadeIn', [
+                state('void', style({
+                    opacity: 0,
+                    transform: 'scale(0.8)'
+                })),
+                state('*', style({
+                    opacity: 1,
+                    transform: 'scale(1)'
+                })),
+                transition('void => *', [
+                    animate('200ms ease-in-out')
+                ])
+            ])
+        ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-list', standalone: false, template: "<div class=\"user-list-container\">\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of userData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.username\"\r\n      [style.border-color]=\"selectedUser === user.username ? getColorValue(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.username, 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.username }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approveDocumentCount }} approved / {{ user.pendingDocumentCount }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.username\">\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem;animation:slideInFromTop .3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-cards{display:flex;flex-wrap:wrap;gap:1rem}.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;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: DocumentQuery }], propDecorators: { userSelected: [{
+            args: [{ selector: 'lib-user-list', standalone: false, animations: [
+                        trigger('slideInFromTop', [
+                            state('void', style({
+                                opacity: 0,
+                                transform: 'translateY(-10px)'
+                            })),
+                            state('*', style({
+                                opacity: 1,
+                                transform: 'translateY(0)'
+                            })),
+                            transition('void => *', [
+                                animate('300ms ease-out')
+                            ])
+                        ]),
+                        trigger('fadeIn', [
+                            state('void', style({
+                                opacity: 0,
+                                transform: 'scale(0.8)'
+                            })),
+                            state('*', style({
+                                opacity: 1,
+                                transform: 'scale(1)'
+                            })),
+                            transition('void => *', [
+                                animate('200ms ease-in-out')
+                            ])
+                        ])
+                    ], 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    <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"] }]
+        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentStore }, { type: DocumentQuery }, { type: UserListService }], propDecorators: { userList: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }], userSelected: [{
                 type: Output
             }] } });
 
+class StatusCalculatorService {
+    calculateTotalCount(statusData) {
+        return statusData?.reduce((total, status) => total + (status.count ?? 0), 0) || 0;
+    }
+    calculateStatusDataWithPercentages(statusData, selectedStatusId) {
+        if (!statusData)
+            return [];
+        const totalCount = this.calculateTotalCount(statusData);
+        return statusData.map((status) => ({
+            ...status,
+            percentage: totalCount > 0 ? (status.count ?? 0) / totalCount * 100 : 0,
+            isSelected: selectedStatusId === status._id,
+            statusClass: status.status ? SHARED.STATUS_WITH_DASH + status.status.toLowerCase() : SHARED.EMPTY,
+            iconClass: SHARED.ICON_WITH_DASH + (status?.status?.toLowerCase() || SHARED.EMPTY)
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class DocumentStatusComponent {
-    documentStore;
     documentQuery;
     documentService;
-    statusData = SAMPLE_STATUS_DATA;
-    selectedStatus = null;
+    statusCalculatorService;
+    contextId = SHARED.EMPTY;
+    statusData;
+    selectedStatusId = null;
+    statusDataWithPercentages = [];
     subscription = new Subscription();
-    constructor(documentStore, documentQuery, documentService) {
-        this.documentStore = documentStore;
+    constructor(documentQuery, documentService, statusCalculatorService) {
         this.documentQuery = documentQuery;
         this.documentService = documentService;
+        this.statusCalculatorService = statusCalculatorService;
     }
     ngOnInit() {
-        // Subscribe to the selected status from the store
-        this.subscription.add(this.documentQuery.selectSelectedStatus().subscribe(status => {
-            this.selectedStatus = status;
-            console.log('Status selection changed:', status);
+        // Retrieve data from services
+        this.subscription.add(this.documentQuery.selectSelectedStatus().subscribe(statusId => {
+            this.selectedStatusId = statusId;
+            this.updateCalculatedStatusData();
         }));
-        // Subscribe to all selection state changes
-        this.subscription.add(this.documentService.getSelectionState().subscribe(selectionState => {
-            console.log('Current selection state:', selectionState);
+        this.subscription.add(this.documentQuery.selectStatusData().subscribe(statusData => {
+            if (statusData && statusData.length > 0) {
+                this.statusData = statusData;
+                this.updateCalculatedStatusData();
+            }
         }));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    getTotalCount() {
-        return this.statusData.reduce((total, status) => total + (status.count ?? 0), 0);
-    }
-    getPercentage(count) {
-        const total = this.getTotalCount();
-        return total > 0 ? (count / total) * 100 : 0;
-    }
-    selectStatus(status) {
-        const newStatus = this.selectedStatus === status ? null : status;
-        this.documentService.setSelectedStatus(newStatus);
+    // Handle event from template
+    selectStatus(statusId) {
+        const newStatusId = this.selectedStatusId === statusId ? null : statusId;
+        this.documentService.setSelectedStatus(newStatusId);
     }
-    isSelected(status) {
-        const isSelected = this.selectedStatus === status;
-        return isSelected;
+    updateCalculatedStatusData() {
+        this.statusDataWithPercentages = this.statusCalculatorService.calculateStatusDataWithPercentages(this.statusData, this.selectedStatusId);
     }
-    // Example method to demonstrate setting other selection properties
-    setExampleSelections() {
-        // This is just for demonstration - in real usage, these would come from user interactions
-        this.documentService.setSelectionState('Identity', 'user123', 'Approved');
-    }
-    clearAllSelections() {
-        this.documentService.clearSelectionState();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStatusComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentStatusComponent, isStandalone: false, selector: "lib-document-status", ngImport: i0, template: "<div class=\"status-summary-container\">\n  <div class=\"status-cards\">\n    \n    <div \n      *ngFor=\"let status of statusData\" \n      class=\"status-card\"\n      [ngClass]=\"status.status ? 'status-' + status.status.toLowerCase() : ''\"\n      [class.selected]=\"isSelected(status.status || '')\"\n      (click)=\"selectStatus(status.status || '')\"\n    >\n      <div class=\"status-icon\" [ngClass]=\"'icon-' + status?.status?.toLowerCase()\">\n        <i [class]=\"status.icon\"></i>\n      </div>\n      <div class=\"status-info\">\n          <div class=\"status-count\">{{ status.count }}</div>\n          <div class=\"status-name\">{{ status.status }}</div>\n          \n      </div>\n    </div>\n  </div>\n  \n  <div class=\"progress-bar-container\">\n    <div class=\"progress-bar\">\n      <div \n        *ngFor=\"let status of statusData\" \n        class=\"progress-segment\"\n        [style.width.%]=\"getPercentage(status.count ?? 0)\"\n        [style.background-color]=\"status.color\"\n      ></div>\n    </div>\n  </div>\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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    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._id || '')\"\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-status', standalone: false, template: "<div class=\"status-summary-container\">\n  <div class=\"status-cards\">\n    \n    <div \n      *ngFor=\"let status of statusData\" \n      class=\"status-card\"\n      [ngClass]=\"status.status ? 'status-' + status.status.toLowerCase() : ''\"\n      [class.selected]=\"isSelected(status.status || '')\"\n      (click)=\"selectStatus(status.status || '')\"\n    >\n      <div class=\"status-icon\" [ngClass]=\"'icon-' + status?.status?.toLowerCase()\">\n        <i [class]=\"status.icon\"></i>\n      </div>\n      <div class=\"status-info\">\n          <div class=\"status-count\">{{ status.count }}</div>\n          <div class=\"status-name\">{{ status.status }}</div>\n          \n      </div>\n    </div>\n  </div>\n  \n  <div class=\"progress-bar-container\">\n    <div class=\"progress-bar\">\n      <div \n        *ngFor=\"let status of statusData\" \n        class=\"progress-segment\"\n        [style.width.%]=\"getPercentage(status.count ?? 0)\"\n        [style.background-color]=\"status.color\"\n      ></div>\n    </div>\n  </div>\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"] }]
-        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentService }] });
+            args: [{ selector: 'lib-document-status', standalone: false, 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._id || '')\"\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"] }]
+        }], ctorParameters: () => [{ type: DocumentQuery }, { type: DocumentHelperService }, { type: StatusCalculatorService }], propDecorators: { contextId: [{
+                type: Input
+            }], statusData: [{
+                type: Input
+            }] } });
 
 /**
  * The `FolderContainerComponent` is responsible for rendering a container
  * that displays a list of documents and associated folder panel data.
- *
  * This component utilizes the `FOLDERPANEL` constant for folder panel data
  * and accepts a document list input of type `DocumentModel`.
  */
@@ -1503,85 +1881,146 @@ class FolderContainerComponent {
      * @type {string}
      */
     contextId = SHARED.EMPTY;
+    /**
+     * The list of users passed as input to the component.
+     * @type {UserListModel[]}
+     */
+    userList = [];
+    /**
+     * The status data passed as input to the component.
+     * @type {StatusDataModel[]}
+     */
+    statusData = [];
+    /**
+     * The document categories passed as input to the component.
+     * @type {DocumentCategory[]}
+     */
+    categories = [];
     /**
      * Flag to control user list visibility
      */
     showUserList = true;
+    /**
+     * Animation state for user list visibility
+     */
+    userListAnimationState = SHARED.VISIBLE;
     constructor(documentQuery) {
         this.documentQuery = documentQuery;
     }
     ngOnInit() {
-        // Subscribe to user list visibility state
         this.documentQuery.selectShowUserList().subscribe(show => {
             this.showUserList = show;
+            this.userListAnimationState = show ? SHARED.VISIBLE : SHARED.HIDDEN;
         });
     }
-    /**
-     * Get the animation state for the user list
-     */
-    getUserListAnimationState() {
-        return this.showUserList ? 'visible' : 'hidden';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId" }, ngImport: i0, template: "\r\n<!-- <lib-folder-block [folderList]=\"folderList\"></lib-folder-block> -->\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"getUserListAnimationState()\">\r\n  <lib-user-list></lib-user-list>\r\n</div>\r\n<lib-document-status></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", outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status" }], animations: [
+    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: [
             trigger('slideInOut', [
                 state('visible', style({
-                    maxHeight: '600px',
+                    height: '*',
                     opacity: 1,
                     transform: 'translateY(0)',
                     overflow: 'hidden',
-                    marginBottom: '1rem'
+                    marginBottom: '1rem',
+                    visibility: 'visible'
                 })),
                 state('hidden', style({
-                    maxHeight: '0px',
+                    height: '0px',
                     opacity: 0,
-                    transform: 'translateY(-30px)',
+                    transform: 'translateY(-20px)',
                     overflow: 'hidden',
-                    marginBottom: '0px'
+                    marginBottom: '0px',
+                    visibility: 'hidden'
                 })),
                 transition('visible => hidden', [
-                    animate('400ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                    animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
                 ]),
                 transition('hidden => visible', [
-                    animate('400ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                    animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
                 ])
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-folder-container', standalone: false, animations: [
                         trigger('slideInOut', [
                             state('visible', style({
-                                maxHeight: '600px',
+                                height: '*',
                                 opacity: 1,
                                 transform: 'translateY(0)',
                                 overflow: 'hidden',
-                                marginBottom: '1rem'
+                                marginBottom: '1rem',
+                                visibility: 'visible'
                             })),
                             state('hidden', style({
-                                maxHeight: '0px',
+                                height: '0px',
                                 opacity: 0,
-                                transform: 'translateY(-30px)',
+                                transform: 'translateY(-20px)',
                                 overflow: 'hidden',
-                                marginBottom: '0px'
+                                marginBottom: '0px',
+                                visibility: 'hidden'
                             })),
                             transition('visible => hidden', [
-                                animate('400ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                                animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
                             ]),
                             transition('hidden => visible', [
-                                animate('400ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "\r\n<!-- <lib-folder-block [folderList]=\"folderList\"></lib-folder-block> -->\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"getUserListAnimationState()\">\r\n  <lib-user-list></lib-user-list>\r\n</div>\r\n<lib-document-status></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<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: [{
                 type: Input
             }], contextId: [{
                 type: Input
+            }], userList: [{
+                type: Input
+            }], statusData: [{
+                type: Input
+            }], categories: [{
+                type: Input
             }] } });
 
+/**
+ * A utility class containing common error messages.
+ * @class ERRORS
+ */
+class ERRORS {
+    /**
+     * Error message for invalid recipient.
+     * @static
+     * @type {string}
+     */
+    static INVALID_RECIPIENT = "Invalid recipient: The recipient cannot be empty.";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_FETCHING_DOCUMENTS = "Error fetching documents:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_FETCHING_FOLDERS = "Error fetching folders:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_ALLDOCUMENT_MISSING = "allDocumentTypes is missing in the response:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_DOCUMENT_TYPES = "Error fetching document types:";
+    static ERROR_DOCUMENT_CATAGORY = 'Error fetching document categories:';
+}
+
 /**
  * Storing all permission properties.
  * @export
@@ -1710,35 +2149,46 @@ class DocumentUploadService {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadService, deps: [{ token: DocumentService$1 }, { token: DocumentStore }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadService, providedIn: 'root' });
+    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 ɵ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.0.5", ngImport: i0, type: DocumentUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DocumentService$1 }, { type: DocumentStore }, { type: i3.MessageService }] });
+        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3.MessageService }] });
 
 class DocumentTableBuilderService {
     constructor() { }
     /**
-     * Builds table data for document sections
-     * @param sections Array of document sections
+     * Gets document type from file name extension
+     * @param fileName File name with extension
+     * @returns Document type string
+     */
+    getDocumentTypeFromFileName(fileName) {
+        if (!fileName)
+            return '';
+        const extension = fileName.split('.').pop()?.toUpperCase();
+        return extension || '';
+    }
+    /**
+     * Builds table data for document categories
+     * @param categories Array of document categories
      * @returns Array of TableData objects
      */
-    buildDocumentSectionsTables(sections) {
-        return sections.map(section => this.buildTableForSection(section));
+    buildDocumentCategoriesTables(categories) {
+        return categories.map(category => this.buildTableForCategory(category));
     }
     /**
-     * Builds table data for a single document section
-     * @param section Document section
+     * Builds table data for a single document category
+     * @param category Document category
      * @returns TableData object
      */
-    buildTableForSection(section) {
+    buildTableForCategory(category) {
         const columns = [
             {
-                field: 'documentName',
+                field: 'docName',
                 header: 'Document',
                 type: 'document',
                 width: '35%'
@@ -1750,13 +2200,13 @@ class DocumentTableBuilderService {
                 width: '15%'
             },
             {
-                field: 'applicantName',
-                header: 'Applicant',
+                field: 'ownerName',
+                header: 'Owner',
                 type: 'text',
                 width: '20%'
             },
             {
-                field: 'uploadedTime',
+                field: 'uploadedOn',
                 header: 'Uploaded',
                 type: 'text',
                 width: '15%'
@@ -1770,18 +2220,18 @@ class DocumentTableBuilderService {
         ];
         return {
             columns: columns,
-            data: section.list
+            data: category.list
         };
     }
     /**
-     * Builds a single table from document list
-     * @param documents Array of document items
+     * Builds a single table from document list items
+     * @param documents Array of document list items
      * @returns TableData object
      */
     buildDocumentTable(documents) {
         const columns = [
             {
-                field: 'documentName',
+                field: 'docName',
                 header: 'Document',
                 type: 'document',
                 width: '35%'
@@ -1793,13 +2243,13 @@ class DocumentTableBuilderService {
                 width: '15%'
             },
             {
-                field: 'applicantName',
-                header: 'Applicant',
+                field: 'ownerName',
+                header: 'Owner',
                 type: 'text',
                 width: '20%'
             },
             {
-                field: 'uploadedTime',
+                field: 'uploadedOn',
                 header: 'Uploaded',
                 type: 'text',
                 width: '15%'
@@ -1817,35 +2267,53 @@ class DocumentTableBuilderService {
         };
     }
     /**
-     * Gets completion count for a section
-     * @param section Document section
+     * Gets completion count for a category
+     * @param category Document category
      * @returns Completion string (e.g., "2/4")
      */
-    getCompletionCount(section) {
-        const total = section.list.length;
-        const completed = section.list.filter(doc => doc.status.toLowerCase() === 'approved' ||
+    getCompletionCount(category) {
+        const total = category.list.length;
+        const completed = category.list.filter(doc => doc.status.toLowerCase() === 'approved' ||
             doc.status.toLowerCase() === 'uploaded').length;
         return `${completed}/${total}`;
     }
     /**
-     * Transforms document model to document item
+     * Gets pending document count for a category
+     * @param category Document category
+     * @returns Number of pending documents
+     */
+    getPendingDocumentCount(category) {
+        return category.totalDocs - category.acceptedDocs;
+    }
+    /**
+     * Gets approved document count for a category
+     * @param category Document category
+     * @returns Number of approved documents
+     */
+    getApprovedDocumentCount(category) {
+        return category.acceptedDocs;
+    }
+    /**
+     * Transforms document model to document list item
      * @param documents Array of DocumentModel
-     * @returns Array of DocumentItem
+     * @returns Array of DocumentListItem
      */
-    transformDocumentModelToItem(documents) {
+    transformDocumentModelToListItem(documents) {
         return documents.map(doc => ({
-            documentName: doc.fileName || doc.documentName || '',
-            documentType: doc.documentType || doc.type || '',
+            _id: doc._id || '',
+            fileName: doc.fileName || '',
+            docName: doc.docName || doc.documentName || '',
+            fileSize: doc.fileSize || '',
             documentUrl: doc.documentUrl || doc.url || '',
             status: doc.status || 'Pending',
-            applicantName: doc.applicantName || doc.applicant || '',
-            uploadedTime: doc.uploadedTime || doc.uploadDate || ''
+            uploadedOn: doc.uploadedOn || doc.uploadDate || '',
+            ownerName: doc.ownerName || doc.applicantName || ''
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentTableBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentTableBuilderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentTableBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentTableBuilderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentTableBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentTableBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1856,6 +2324,7 @@ class TablePrimaryComponent {
     tableData = { columns: [], data: [] };
     showHeader = true;
     tableStyle = { 'min-width': '100%' };
+    rowClick = new EventEmitter();
     // Helper methods for document table
     getStatusClass(status) {
         switch (status.toLowerCase()) {
@@ -1893,12 +2362,6 @@ class TablePrimaryComponent {
                 return 'pi pi-clock';
         }
     }
-    getFileSize(fileName) {
-        // Mock file size calculation - in real app, this would come from the document data
-        const sizes = ['2.4 MB', '1.8 MB', '3.2 MB', '1.1 MB', '4.5 MB', '2.1 MB'];
-        const randomIndex = Math.floor(Math.random() * sizes.length);
-        return sizes[randomIndex];
-    }
     getFileExtension(fileName) {
         return fileName.split('.').pop()?.toUpperCase() || 'PDF';
     }
@@ -1907,18 +2370,23 @@ class TablePrimaryComponent {
         // Handle action menu click - can be extended with menu functionality
         console.log('Action clicked for document:', rowData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TablePrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TablePrimaryComponent, isStandalone: false, selector: "lib-table-primary", inputs: { tableData: "tableData", showHeader: "showHeader", tableStyle: "tableStyle" }, ngImport: i0, template: "<div class=\"card\">\r\n    <p-table [value]=\"tableData.data\" [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>\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === 'document'\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i class=\"pi pi-file-pdf\" *ngIf=\"getFileExtension(rowData[col.field]) === 'PDF'\"></i>\r\n                                <i class=\"pi pi-image\" *ngIf=\"getFileExtension(rowData[col.field]) === 'JPG' || getFileExtension(rowData[col.field]) === 'PNG'\"></i>\r\n                                <i class=\"pi pi-file-excel\" *ngIf=\"getFileExtension(rowData[col.field]) === 'XLSX'\"></i>\r\n                                <i class=\"pi pi-file\" *ngIf=\"getFileExtension(rowData[col.field]) !== 'PDF' && getFileExtension(rowData[col.field]) !== 'JPG' && getFileExtension(rowData[col.field]) !== 'PNG' && getFileExtension(rowData[col.field]) !== 'XLSX'\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.documentType }}</div>\r\n                                <div class=\"file-info\">{{ rowData[col.field] }} - {{ getFileSize(rowData[col.field]) }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    <div *ngIf=\"col.type === 'status'\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"getStatusClass(rowData[col.field])\">\r\n                            <i [class]=\"getStatusIcon(rowData[col.field])\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === 'actions'\" class=\"actions-cell\">\r\n                        <button pButton pRipple type=\"button\" icon=\"ri-delete-bin-6-line\" \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 === '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}::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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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.Ripple, selector: "[pRipple]" }] });
+    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" }, ngImport: i0, template: "<div class=\"card\">\n    <p-table [value]=\"tableData.data\" [tableStyle]=\"tableStyle\">\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\n            <tr>\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\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 === 'document'\" class=\"document-cell\">\n                        <div class=\"document-info\">\n                            <div class=\"document-icon\">\n                                <i class=\"pi pi-file-pdf\" *ngIf=\"getFileExtension(rowData.fileName) === 'PDF'\"></i>\n                                <i class=\"pi pi-image\" *ngIf=\"getFileExtension(rowData.fileName) === 'JPG' || getFileExtension(rowData.fileName) === 'PNG'\"></i>\n                                <i class=\"pi pi-file-excel\" *ngIf=\"getFileExtension(rowData.fileName) === 'XLSX'\"></i>\n                                <i class=\"pi pi-file\" *ngIf=\"getFileExtension(rowData.fileName) !== 'PDF' && getFileExtension(rowData.fileName) !== 'JPG' && getFileExtension(rowData.fileName) !== 'PNG' && getFileExtension(rowData.fileName) !== 'XLSX'\"></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 === 'status'\" class=\"status-cell\">\n                        <span class=\"status-pill\" [ngClass]=\"getStatusClass(rowData[col.field])\">\n                            <i [class]=\"getStatusIcon(rowData[col.field])\"></i>\n                            {{ rowData[col.field] }}\n                        </span>\n                    </div>\n\n                    <!-- Actions Cell -->\n                    <div *ngIf=\"col.type === 'actions'\" class=\"actions-cell\">\n                        <button pButton pRipple type=\"button\" icon=\"ri-delete-bin-6-line\" \n                                class=\"p-button-text p-button-rounded\" \n                                (click)=\"onActionClick($event, rowData)\">\n                        </button>\n                    </div>\n\n                    <!-- Default Text Cell -->\n                    <div *ngIf=\"!col.type || col.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: 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]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TablePrimaryComponent, decorators: [{
+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]=\"tableData.data\" [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>\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === 'document'\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i class=\"pi pi-file-pdf\" *ngIf=\"getFileExtension(rowData[col.field]) === 'PDF'\"></i>\r\n                                <i class=\"pi pi-image\" *ngIf=\"getFileExtension(rowData[col.field]) === 'JPG' || getFileExtension(rowData[col.field]) === 'PNG'\"></i>\r\n                                <i class=\"pi pi-file-excel\" *ngIf=\"getFileExtension(rowData[col.field]) === 'XLSX'\"></i>\r\n                                <i class=\"pi pi-file\" *ngIf=\"getFileExtension(rowData[col.field]) !== 'PDF' && getFileExtension(rowData[col.field]) !== 'JPG' && getFileExtension(rowData[col.field]) !== 'PNG' && getFileExtension(rowData[col.field]) !== 'XLSX'\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.documentType }}</div>\r\n                                <div class=\"file-info\">{{ rowData[col.field] }} - {{ getFileSize(rowData[col.field]) }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    <div *ngIf=\"col.type === 'status'\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"getStatusClass(rowData[col.field])\">\r\n                            <i [class]=\"getStatusIcon(rowData[col.field])\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === 'actions'\" class=\"actions-cell\">\r\n                        <button pButton pRipple type=\"button\" icon=\"ri-delete-bin-6-line\" \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 === '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}::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]=\"tableData.data\" [tableStyle]=\"tableStyle\">\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\n            <tr>\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\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 === 'document'\" class=\"document-cell\">\n                        <div class=\"document-info\">\n                            <div class=\"document-icon\">\n                                <i class=\"pi pi-file-pdf\" *ngIf=\"getFileExtension(rowData.fileName) === 'PDF'\"></i>\n                                <i class=\"pi pi-image\" *ngIf=\"getFileExtension(rowData.fileName) === 'JPG' || getFileExtension(rowData.fileName) === 'PNG'\"></i>\n                                <i class=\"pi pi-file-excel\" *ngIf=\"getFileExtension(rowData.fileName) === 'XLSX'\"></i>\n                                <i class=\"pi pi-file\" *ngIf=\"getFileExtension(rowData.fileName) !== 'PDF' && getFileExtension(rowData.fileName) !== 'JPG' && getFileExtension(rowData.fileName) !== 'PNG' && getFileExtension(rowData.fileName) !== 'XLSX'\"></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 === 'status'\" class=\"status-cell\">\n                        <span class=\"status-pill\" [ngClass]=\"getStatusClass(rowData[col.field])\">\n                            <i [class]=\"getStatusIcon(rowData[col.field])\"></i>\n                            {{ rowData[col.field] }}\n                        </span>\n                    </div>\n\n                    <!-- Actions Cell -->\n                    <div *ngIf=\"col.type === 'actions'\" class=\"actions-cell\">\n                        <button pButton pRipple type=\"button\" icon=\"ri-delete-bin-6-line\" \n                                class=\"p-button-text p-button-rounded\" \n                                (click)=\"onActionClick($event, rowData)\">\n                        </button>\n                    </div>\n\n                    <!-- Default Text Cell -->\n                    <div *ngIf=\"!col.type || col.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: [{
                 type: Input
             }], tableStyle: [{
                 type: Input
+            }], rowClick: [{
+                type: Output
             }] } });
 
 /**
@@ -1954,10 +2422,10 @@ class FileFormatService {
             return `${parseFloat(mbSize.toFixed(decimalPlaces))} ${sizes[SHARED.TWO]}`;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FileFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FileFormatService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FileFormatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2103,13 +2571,13 @@ class DocumentUploadComponent {
     triggerFileUpload() {
         this.fileUploader.choose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService$1 }, { 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.0.5", 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadComponent, decorators: [{
+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$1 }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
                 type: Input
             }], fileUploader: [{
                 type: ViewChild,
@@ -2151,10 +2619,10 @@ class LinkedDocumentComponent {
         this.selectedDocument = document;
         this.selectedDocumentChange.emit(this.selectedDocument);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinkedDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LinkedDocumentComponent, isStandalone: false, selector: "app-linked-document", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { selectedDocumentChange: "selectedDocumentChange" }, ngImport: i0, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\r\n      <div class=\"p-0\">\r\n        <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Linked Documents</h4>\r\n      </div>\r\n    </div>\r\n    <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\">\r\n      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.fileName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LinkedDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LinkedDocumentComponent, isStandalone: false, selector: "app-linked-document", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { selectedDocumentChange: "selectedDocumentChange" }, ngImport: i0, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\r\n      <div class=\"p-0\">\r\n        <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Linked Documents</h4>\r\n      </div>\r\n    </div>\r\n    <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\">\r\n      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.fileName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinkedDocumentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LinkedDocumentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-linked-document', standalone: false, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\r\n      <div class=\"p-0\">\r\n        <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Linked Documents</h4>\r\n      </div>\r\n    </div>\r\n    <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\">\r\n      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.fileName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] }]
         }], propDecorators: { selectedDocument: [{
@@ -2243,13 +2711,13 @@ class DocumentViewerComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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-7\">\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        <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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.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: LinkedDocumentComponent, selector: "app-linked-document", inputs: ["selectedDocument", "documentList"], outputs: ["selectedDocumentChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    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-7\">\r\n          <div\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          <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            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\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        <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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: LinkedDocumentComponent, selector: "app-linked-document", inputs: ["selectedDocument", "documentList"], outputs: ["selectedDocumentChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentViewerComponent, decorators: [{
+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-7\">\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        <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: DocumentService }], propDecorators: { selectedDocument: [{
+            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-7\">\r\n          <div\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          <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            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\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        <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: [{
                 type: Input
             }], documentList: [{
                 type: Input
@@ -2266,7 +2734,6 @@ class DocumentListComponent {
     documentQuery;
     documentStore;
     documentTableBuilder;
-    onRefresh = new EventEmitter();
     /**
      * Represents the context ID for the document list.
      * This value is passed from the parent component.
@@ -2274,6 +2741,16 @@ class DocumentListComponent {
      * @memberof DocumentListComponent
      */
     contextId = SHARED.EMPTY;
+    /**
+     * The document list response data passed from the parent component.
+     * @type {DocumentListResponse[] | null}
+     * @memberof DocumentListComponent
+     */
+    documentListResponse = null;
+    /**
+     * Subscription to document list response from store
+     */
+    documentListSubscription = new Subscription();
     /**
      * Default visibility of the upload button.
      * @type {boolean}
@@ -2292,12 +2769,6 @@ class DocumentListComponent {
      * @memberof DocumentListComponent
      */
     isSidebarVisible = SHARED.FALSE;
-    /**
-     * Default visibility of the Accordion.
-     * @type {boolean}
-     * @memberof DocumentListComponent
-     */
-    isCollapsed = SHARED.FALSE;
     /**
      * Default visibility of the messages.
      * @type {Message[]}
@@ -2346,13 +2817,19 @@ class DocumentListComponent {
      */
     fileName;
     /**
-     * Document sections data for rendering tables
+     * Table data for each category
      */
-    documentSections = DUMMY_DOCUMENT_SECTIONS;
+    categoryTables = [];
     /**
-     * Table data for each section
+     * Document categories from the response
      */
-    sectionTables = [];
+    documentCategories = [];
+    /**
+     * Filter properties
+     */
+    status = null;
+    category = null;
+    searchKey = null;
     /**
      * Creates an instance of DocumentListComponent.
      * @class
@@ -2373,7 +2850,7 @@ class DocumentListComponent {
      */
     ngOnInit() {
         this.getDocumentTypeList();
-        this.buildSectionTables();
+        this.setupDocumentListSubscription();
     }
     /**
      * Handles the click event for file upload.
@@ -2386,17 +2863,6 @@ class DocumentListComponent {
         this.documentStore.setMessage(SHARED.EMPTY_ARRAY);
         this.isSidebarVisible = SHARED.TRUE;
     }
-    /**
-     * Handles the selection of an individual document.
-     * Opens a dialog to display or manage the selected document.
-     * @param {DocumentModel} document - The document that was clicked by the user.
-     * @memberof DocumentListComponent
-     */
-    handleClickForDocument(document) {
-        this.isdialogVisible = SHARED.TRUE;
-        this.selectedDocument = document;
-        this.fileName = document.fileName;
-    }
     /**
      * Handles the save click event to update the document's file name.
      * This method creates a payload with the updated file name and calls the
@@ -2411,15 +2877,6 @@ class DocumentListComponent {
             console.log(`${SHARED.UPDATE_DOCUMENT_NAME} ${this.selectedDocument._id}`);
         });
     }
-    /**
-     * Closes the dialog and resets the selected document.
-     * @memberof DocumentListComponent
-     */
-    handleCloseModal() {
-        this.selectedDocument = { _id: SHARED.EMPTY };
-        this.isdialogVisible = SHARED.FALSE;
-        this.onRefresh.emit();
-    }
     /**
      * Handles the upload action for a document.
      * Validates if a document type is selected and logs the result.
@@ -2432,7 +2889,6 @@ class DocumentListComponent {
             this.documentQuery.selectMessages().subscribe((message) => {
                 if (message.length > 0) {
                     this.messages = message;
-                    this.onRefresh.emit();
                     this.selectedOption = null;
                     setTimeout(() => {
                         this.messages = SHARED.EMPTY_ARRAY;
@@ -2481,115 +2937,339 @@ class DocumentListComponent {
         this.isSidebarVisible = isVisible;
     }
     /**
-     * Builds table data for all document sections
+     * Builds table data for all document categories
      */
-    buildSectionTables() {
-        this.sectionTables = this.documentTableBuilder.buildDocumentSectionsTables(this.documentSections);
+    buildCategoryTables() {
+        this.categoryTables = this.documentTableBuilder.buildDocumentCategoriesTables(this.documentCategories);
     }
     /**
-     * Gets completion count for a section
+     * Gets completion count for a category
      */
-    getCompletionCount(section) {
-        return this.documentTableBuilder.getCompletionCount(section);
+    getCompletionCount(category) {
+        return this.documentTableBuilder.getCompletionCount(category);
+    }
+    /**
+     * Gets pending document count for a category
+     */
+    getPendingDocumentCount(category) {
+        return this.documentTableBuilder.getPendingDocumentCount(category);
+    }
+    /**
+     * Gets approved document count for a category
+     */
+    getApprovedDocumentCount(category) {
+        return this.documentTableBuilder.getApprovedDocumentCount(category);
+    }
+    /**
+     * Builds document categories from the API response
+     */
+    buildDocumentCategories() {
+        console.log('Building document categories with response:', this.documentListResponse);
+        if (!this.documentListResponse) {
+            this.documentCategories = [];
+            this.categoryTables = [];
+            console.log('No document response, clearing tables');
+            return;
+        }
+        this.documentCategories = [...this.documentListResponse];
+        this.categoryTables = this.documentListResponse.map(category => this.documentTableBuilder.buildDocumentTable(category.list));
+        console.log('Built category tables:', this.categoryTables.length);
+    }
+    /**
+     * Sets up subscription to document list response from store
+     */
+    setupDocumentListSubscription() {
+        this.documentListSubscription.add(this.documentQuery.selectDocumentListResponse().subscribe({
+            next: (response) => {
+                console.log('DocumentListComponent received response:', response);
+                this.documentListResponse = response;
+                this.buildDocumentCategories();
+            },
+            error: (error) => {
+                console.error('Error receiving document list response:', error);
+            }
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.0.5", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", isUploadButtonVisible: "isUploadButtonVisible", isCollapsed: "isCollapsed", documentList: "documentList" }, outputs: { onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModal()\"\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\r\n      <ng-content></ng-content>\r\n    \r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<!-- Document Sections Tables -->\r\n<div class=\"document-sections-container\">\r\n  <div class=\"section\" *ngFor=\"let section of documentSections; let i = index\">\r\n    <div class=\"section-header\">\r\n      <div class=\"section-title\">\r\n        <h3>{{ section.header }} Documents</h3>\r\n        <p class=\"section-description\">{{ section.description }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ getCompletionCount(section) }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"sectionTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Original Document List (commented out for now) -->\r\n<!--\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 mb-0 document-list-wrapper\">\r\n    <p-accordion [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center gap-2 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n            <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\" type=\"button\"\r\n              label=\"Upload File\" style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n-->\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-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-sections-container{padding:.5rem}.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i4.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"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList"] }], encapsulation: i0.ViewEncapsulation.None });
+    handleTableRowClick(rowData) {
+        this.isdialogVisible = SHARED.TRUE;
+        this.selectedDocument = rowData;
+    }
+    /**
+     * 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\">\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\n      <ng-template pTemplate=\"header\">\n        <div class=\"w-full flex align-items-center justify-content-between\">\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\n            [(ngModel)]=\"fileName\" />\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\n          </button>\n        </div>\n      </ng-template>\n      <ng-content></ng-content>\n    </document-viewer>\n  </p-dialog>\n</div>\n\n\n<div class=\"document-categories-container\">\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\n    <div class=\"category-header\">\n      <div class=\"category-title\">\n        <h3>{{ category.label }} Documents</h3>\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\n      </div>\n      <div class=\"completion-status\">\n        <span class=\"status-badge\">{{ getCompletionCount(category) }} Complete</span>\n      </div>\n    </div>\n\n    <div class=\"table-container\">\n      <lib-table-primary \n        [tableData]=\"categoryTables[i]\" \n        [tableStyle]=\"{ 'min-width': '100%' }\"\n        (rowClick)=\"handleTableRowClick($event)\">\n      </lib-table-primary>\n    </div>\n  </div>\n</div>\n<div class=\"grid m-0\">\n  <div class=\"col-12 p-0\">\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\n      <ng-template pTemplate=\"header\">\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\n      </ng-template>\n      <ng-template pTemplate=\"content\">\n        <div class=\"side-bar-con\">\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\n          <div class=\"p-fluid\">\n            <div class=\"field\">\n              <label for=\"city\">Select Folder</label>\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\n        <div class=\"bg-gray-100 p-4\">\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\n            [disabled]=\"!selectedOption\">\n          </p-button>\n        </div>\n      </ng-template>\n    </p-sidebar>\n  </div>\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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListComponent, decorators: [{
+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\" (onHide)=\"handleCloseModal()\"\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\r\n      <ng-content></ng-content>\r\n    \r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<!-- Document Sections Tables -->\r\n<div class=\"document-sections-container\">\r\n  <div class=\"section\" *ngFor=\"let section of documentSections; let i = index\">\r\n    <div class=\"section-header\">\r\n      <div class=\"section-title\">\r\n        <h3>{{ section.header }} Documents</h3>\r\n        <p class=\"section-description\">{{ section.description }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ getCompletionCount(section) }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"sectionTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Original Document List (commented out for now) -->\r\n<!--\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 mb-0 document-list-wrapper\">\r\n    <p-accordion [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center gap-2 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n            <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\" type=\"button\"\r\n              label=\"Upload File\" style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n-->\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-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-sections-container{padding:.5rem}.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.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: { onRefresh: [{
-                type: Output
-            }], contextId: [{
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\n      <ng-template pTemplate=\"header\">\n        <div class=\"w-full flex align-items-center justify-content-between\">\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\n            [(ngModel)]=\"fileName\" />\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\n          </button>\n        </div>\n      </ng-template>\n      <ng-content></ng-content>\n    </document-viewer>\n  </p-dialog>\n</div>\n\n\n<div class=\"document-categories-container\">\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\n    <div class=\"category-header\">\n      <div class=\"category-title\">\n        <h3>{{ category.label }} Documents</h3>\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\n      </div>\n      <div class=\"completion-status\">\n        <span class=\"status-badge\">{{ getCompletionCount(category) }} Complete</span>\n      </div>\n    </div>\n\n    <div class=\"table-container\">\n      <lib-table-primary \n        [tableData]=\"categoryTables[i]\" \n        [tableStyle]=\"{ 'min-width': '100%' }\"\n        (rowClick)=\"handleTableRowClick($event)\">\n      </lib-table-primary>\n    </div>\n  </div>\n</div>\n<div class=\"grid m-0\">\n  <div class=\"col-12 p-0\">\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\n      <ng-template pTemplate=\"header\">\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\n      </ng-template>\n      <ng-template pTemplate=\"content\">\n        <div class=\"side-bar-con\">\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\n          <div class=\"p-fluid\">\n            <div class=\"field\">\n              <label for=\"city\">Select Folder</label>\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\n        <div class=\"bg-gray-100 p-4\">\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\n            [disabled]=\"!selectedOption\">\n          </p-button>\n        </div>\n      </ng-template>\n    </p-sidebar>\n  </div>\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: [{
                 type: Input
-            }], isUploadButtonVisible: [{
+            }], documentListResponse: [{
                 type: Input
-            }], isCollapsed: [{
+            }], isUploadButtonVisible: [{
                 type: Input
             }], documentList: [{
                 type: Input
+            }], status: [{
+                type: Input
+            }], category: [{
+                type: Input
+            }], searchKey: [{
+                type: Input
             }] } });
 
+class DocumentMenuService {
+    documentStore;
+    constructor(documentStore) {
+        this.documentStore = documentStore;
+    }
+    /**
+     * Gets the category name for a given menu item _id
+     * @param menuItemId - The _id of the menu item
+     * @param categories - The list of document categories
+     * @returns The category name or null if not found
+     */
+    getMenuItemCategory(menuItemId, categories) {
+        for (const category of categories) {
+            if (category.items?.some((menuItem) => menuItem._id === menuItemId)) {
+                return category.label;
+            }
+        }
+        return null;
+    }
+    /**
+     * Gets the menu item by its _id
+     * @param menuItemId - The _id of the menu item
+     * @param categories - The list of document categories
+     * @returns The menu item or null if not found
+     */
+    getMenuItemById(menuItemId, categories) {
+        for (const category of categories) {
+            if (category.items) {
+                const item = category.items.find((menuItem) => menuItem._id === menuItemId);
+                if (item) {
+                    return item;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Handles user list visibility based on menu item category
+     * @param menuItemId - The _id of the menu item
+     * @param categories - The list of document categories
+     */
+    handleUserListVisibility(menuItemId, categories) {
+        const category = this.getMenuItemCategory(menuItemId, categories);
+        const menuItem = this.getMenuItemById(menuItemId, categories);
+        if (category === SHARED.APPLICATION) {
+            this.documentStore.setShowUserList(true);
+        }
+        else if (category === SHARED.APPLICANTS) {
+            this.documentStore.setShowUserList(true);
+        }
+        else {
+            this.documentStore.setShowUserList(false);
+            this.documentStore.setSelectedUserId(null);
+            this.documentStore.setSelectedStatus(null);
+        }
+    }
+    /**
+     * Handles document status based on selected menu item
+     * @param menuItemId - The _id of the selected menu item
+     * @param categories - The list of document categories
+     */
+    handleDocumentStatus(menuItemId, categories) {
+        const menuItem = this.getMenuItemById(menuItemId, categories);
+        if (menuItem) {
+            // You can add logic here to handle document status based on the selected menu item
+            // For example, filtering documents by status, updating status counts, etc.
+            console.log('Selected menu item:', menuItem.label, 'with status:', menuItem.status);
+        }
+    }
+    /**
+     * Calculates total documents for a menu item
+     * @param item - The menu item
+     * @returns Total number of documents
+     */
+    getTotalDocuments(item) {
+        return item.status.Pending + item.status.Reviewing + item.status.Accepted + item.status.Rejected;
+    }
+    /**
+     * Calculates completed documents for a menu item
+     * @param item - The menu item
+     * @returns Number of completed documents
+     */
+    getCompletedDocuments(item) {
+        return item.status.Accepted;
+    }
+    /**
+     * Gets badge value for a menu item
+     * @param item - The menu item
+     * @returns Badge value string (e.g., "1/2")
+     */
+    getBadgeValue(item) {
+        const completed = this.getCompletedDocuments(item);
+        const total = this.getTotalDocuments(item);
+        return `${completed}/${total}`;
+    }
+    /**
+     * Gets badge severity based on status
+     * @param item - The menu item
+     * @returns Badge severity for PrimeNG
+     */
+    getBadgeSeverity(item) {
+        const completed = this.getCompletedDocuments(item);
+        const total = this.getTotalDocuments(item);
+        if (total === 0)
+            return 'info';
+        if (completed === total)
+            return 'success';
+        if (completed > 0)
+            return 'warning';
+        return 'danger';
+    }
+    /**
+     * Checks if badge should be shown for a menu item
+     * @param item - The menu item
+     * @returns True if badge should be shown
+     */
+    shouldShowBadge(item) {
+        return this.getTotalDocuments(item) > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentMenuService, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentMenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentMenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentStore }] });
+
 class DocumentsMenuComponent {
     documentStore;
     documentQuery;
-    // Get the menu list from container
-    items;
+    documentMenuService;
+    documentHelperService;
+    catagories = SHARED.EMPTY_ARRAY;
+    applicationNumber = SHARED.EMPTY;
+    contextId = SHARED.EMPTY;
     selectedMenuItem = null;
-    constructor(documentStore, documentQuery) {
+    selectedMenuItemId = null;
+    constructor(documentStore, documentQuery, documentMenuService, documentHelperService) {
         this.documentStore = documentStore;
         this.documentQuery = documentQuery;
+        this.documentMenuService = documentMenuService;
+        this.documentHelperService = documentHelperService;
     }
     ngOnInit() {
-        // Subscribe to selected menu item from state
-        this.documentQuery.selectSelectedMenuItem().subscribe(menuItem => {
-            this.selectedMenuItem = menuItem;
+        this.documentQuery.selectSelectedMenuItem().subscribe(menuItemId => {
+            this.selectedMenuItemId = menuItemId;
+            this.selectedMenuItem = this.findMenuItemLabelById(menuItemId);
         });
     }
+    ngOnChanges(changes) {
+        if (changes['catagories'] && this.catagories) {
+            this.updateMenuItemsData();
+        }
+    }
+    /**
+     * Finds the label of a menu item by its _id
+     * @param id The _id to search for
+     * @returns The label of the menu item or null if not found
+     */
+    findMenuItemLabelById(id) {
+        if (!id)
+            return null;
+        for (const category of this.catagories) {
+            if (category.items) {
+                const item = category.items.find(item => item._id === id);
+                if (item) {
+                    return item.label;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Update menu use catagories
+     */
+    updateMenuItemsData() {
+        this.catagories.forEach(category => {
+            if (category.items) {
+                category.items.forEach(item => {
+                    item.menuData = {
+                        totalDocuments: this.documentMenuService.getTotalDocuments(item),
+                        completedDocuments: this.documentMenuService.getCompletedDocuments(item),
+                        badgeValue: this.documentMenuService.getBadgeValue(item),
+                        badgeSeverity: this.documentMenuService.getBadgeSeverity(item),
+                        shouldShowBadge: this.documentMenuService.shouldShowBadge(item)
+                    };
+                });
+            }
+        });
+    }
+    /**
+     * Handle the menu item click
+     * @param {*} event - Event
+     * @param {DocumentCategoryItem} item - catagory item
+     */
     onMenuItemClick(event, item) {
-        if (this.selectedMenuItem === item.label) {
+        if (this.selectedMenuItemId === item._id) {
+            console.log('Deselecting menu item:', item._id);
+            console.log('Using contextId for API call:', this.contextId);
             this.selectedMenuItem = null;
+            this.selectedMenuItemId = null;
             this.documentStore.setSelectedMenuItem(null);
+            // Force refresh to get unfiltered results
+            this.documentHelperService.refreshDocumentsWithoutFilters(this.contextId);
         }
         else {
+            console.log('Selecting menu item:', item._id);
             this.selectedMenuItem = item.label;
-            this.documentStore.setSelectedMenuItem(item.label);
-            this.handleUserListVisibility(item.label);
+            this.selectedMenuItemId = item._id;
+            this.documentStore.setSelectedMenuItem(item._id);
+            this.documentMenuService.handleUserListVisibility(item._id, this.catagories);
         }
     }
-    selectMenuItem(menuItemLabel) {
-        this.selectedMenuItem = menuItemLabel;
-        this.documentStore.setSelectedMenuItem(menuItemLabel);
-        this.handleUserListVisibility(menuItemLabel);
+    onSelectMenuItem(menuItemId) {
+        const label = this.findMenuItemLabelById(menuItemId);
+        if (label) {
+            this.selectedMenuItem = label;
+            this.selectedMenuItemId = menuItemId;
+            this.documentStore.setSelectedMenuItem(menuItemId);
+            this.documentMenuService.handleUserListVisibility(menuItemId, this.catagories);
+        }
     }
-    // Method to programmatically unselect menu item
-    unselectMenuItem() {
+    onUnselectMenuItem() {
         this.selectedMenuItem = null;
+        this.selectedMenuItemId = null;
         this.documentStore.setSelectedMenuItem(null);
+        // Force refresh to get unfiltered results
+        this.documentHelperService.refreshDocumentsWithoutFilters(this.contextId);
     }
-    // Method to check if a menu item is selected
-    isMenuItemSelected(menuItemLabel) {
-        return this.selectedMenuItem === menuItemLabel;
-    }
-    // Method to get the currently selected menu item
     getSelectedMenuItem() {
         return this.selectedMenuItem;
     }
-    // Helper method to determine the category of a menu item
-    getMenuItemCategory(menuItemLabel) {
-        const applicationCategory = this.items.find((category) => category.label === 'Application');
-        const applicantCategory = this.items.find((category) => category.label === 'Applicant');
-        if (applicationCategory?.items?.some((menuItem) => menuItem.label === menuItemLabel)) {
-            return 'Application';
-        }
-        else if (applicantCategory?.items?.some((menuItem) => menuItem.label === menuItemLabel)) {
-            return 'Applicant';
-        }
-        return null;
+    getSelectedMenuItemId() {
+        return this.selectedMenuItemId;
     }
-    // Helper method to handle user list visibility based on menu item category
-    handleUserListVisibility(menuItemLabel) {
-        const category = this.getMenuItemCategory(menuItemLabel);
-        if (category === 'Application') {
-            // Hide user list and reset filters when menu item is from Application category
-            this.documentStore.setSelectedUserId(null);
-            this.documentStore.setSelectedStatus(null);
-            this.documentStore.setShowUserList(false);
-            console.log('User list hidden for Application menu item:', menuItemLabel);
-        }
-        else if (category === 'Applicant') {
-            // Show user list when menu item is from Applicant category
-            this.documentStore.setShowUserList(true);
-            console.log('User list shown for Applicant menu item:', menuItemLabel);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\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 - 00123882</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    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"items\" 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]=\"isMenuItemSelected(item.label)\"\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.badge\" class=\"ml-auto \" severity=\"warning\" [value]=\"item.badge\" />\r\n                    <span *ngIf=\"item.shortcut\"\r\n                        class=\"ml-auto border-1 surface-border border-round surface-100 text-xs p-1\">{{ item.shortcut\r\n                        }}</span>\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-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-icon-wrapper{display:none}::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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i6.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: i7$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
+    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: "14.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    <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    <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-icon-wrapper{display:none}::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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\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 - 00123882</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    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"items\" 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]=\"isMenuItemSelected(item.label)\"\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.badge\" class=\"ml-auto \" severity=\"warning\" [value]=\"item.badge\" />\r\n                    <span *ngIf=\"item.shortcut\"\r\n                        class=\"ml-auto border-1 surface-border border-round surface-100 text-xs p-1\">{{ item.shortcut\r\n                        }}</span>\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-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-icon-wrapper{display:none}::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"] }]
-        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }], propDecorators: { items: [{
+            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\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    <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-icon-wrapper{display:none}::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"] }]
+        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentMenuService }, { type: DocumentHelperService }], propDecorators: { catagories: [{
+                type: Input
+            }], applicationNumber: [{
+                type: Input
+            }], contextId: [{
                 type: Input
             }] } });
 
@@ -2603,6 +3283,7 @@ class DocumentContainerComponent {
     documentService;
     documentQuery;
     documentHttpService;
+    documentHelperService;
     /**
      * Creates an instance of DocumentContainerComponent.
      * @param {DocumentStore} documentStore - Query Store service to manage store document-related state.
@@ -2610,11 +3291,14 @@ class DocumentContainerComponent {
      * @param {DocumentQuery} documentQuery - Query service to manage document-related state.
      * @param {DocumentHttpService} documentHttpService - Service to make HTTP requests related to documents.
      */
-    constructor(documentStore, documentService, documentQuery, documentHttpService) {
+    constructor(documentStore, documentService, documentQuery, documentHttpService, documentHelperService) {
+        // Note: initializeSelectionWatcher now requires contextId
+        // This should be called from the component that has access to contextId
         this.documentStore = documentStore;
         this.documentService = documentService;
         this.documentQuery = documentQuery;
         this.documentHttpService = documentHttpService;
+        this.documentHelperService = documentHelperService;
     }
     /**
      * Get contextId in input.
@@ -2622,31 +3306,22 @@ class DocumentContainerComponent {
      */
     contextId = SHARED.EMPTY;
     /**
-     * Get isCollapsed in input.
-     * @type {string}
-     */
-    isCollapsed = SHARED.FALSE;
-    /**
-     * Get showFolderList in input.
-     * @type {boolean}
-     */
-    showFolderList = SHARED.TRUE;
-    /**
-     * Get isUploadButtonVisible in input.
-     * @type {boolean}
+     * The list of folders.
+     * @type {Array}
      */
-    isUploadButtonVisible = SHARED.TRUE;
+    applicationNumber = SHARED.EMPTY;
+    catagories = SHARED.EMPTY_ARRAY;
+    userList = SHARED.EMPTY_ARRAY;
     /**
-     * The list of documents.
-     * @type {Array}
+     * Status data for the current selection
+     * @type {StatusDataModel[]}
      */
-    documentList = [];
+    statusData = [];
     /**
-     * The list of folders.
-     * @type {Array}
+     * Document list response from API
+     * @type {DocumentListResponse | null}
      */
-    folderList = SHARED.EMPTY_ARRAY;
-    items = SHARED.Menu;
+    documentListResponse = null;
     /**
      * Holds the subscription to manage observable cleanup.
      * @private
@@ -2658,88 +3333,88 @@ class DocumentContainerComponent {
      * @returns {void}
      */
     ngOnInit() {
-        // this.fetchFolder();
-        const folderSubscription = this.documentQuery
-            .selectParentDocumentTypeId()
-            .subscribe((folderBlockId) => {
-            const validFolders = this.folderList.filter(folder => (folder.documentCount ?? 0) > 0);
-            const idToFetch = folderBlockId ?? validFolders[0]?._id;
-            if (idToFetch) {
-                // this.fetchDocuments(idToFetch);
-            }
-            else {
-                console.warn('No folders with documents available.');
-            }
-        });
-        this.subscription.add(folderSubscription);
+        this.fetchDocumentCatagories();
+        this.fetchUserList();
+        this.setupStatusDataSubscriptions();
+        this.setupFilteredDocumentSubscription();
+        this.documentHelperService.initializeSelectionWatcherWithInitialLoad(this.contextId);
     }
     /**
-     * Fetches the folder data from the API.
-     * @returns {void}
+     * Sets up subscriptions to monitor menu item and user selection changes
+     * to trigger status data fetching
      */
+    setupStatusDataSubscriptions() {
+        this.subscription.add(this.documentQuery.selectSelectedMenuItem().subscribe(menuItem => {
+            this.fetchStatusData();
+        }));
+        this.subscription.add(this.documentQuery.selectSelectedUserId().subscribe(userId => {
+            this.fetchStatusData();
+        }));
+        this.fetchStatusData();
+    }
     /**
-     * Fetches the folder data from the API.
-     * @returns {void}
+     * Fetches status data based on current selections
      */
-    fetchFolder() {
-        const folderSubscription = this.documentHttpService.getFoldersData(this.contextId).subscribe({
-            /**
-             * Handles the successful API response.
-             * @param {FolderBlockModel[]} folder - The list of folders returned by the API.
-             */
-            next: (folder) => {
-                if (folder && folder.length > 0) {
-                    this.folderList = folder.filter(f => (f.documentCount ?? 0) > 0);
-                    if (this.folderList.length > 0) {
-                        // this.fetchDocuments(this.folderList[0]._id);
-                    }
-                    else {
-                        console.warn('No folders with documents found.');
-                    }
-                }
-                else {
-                    console.error(ERRORS.ERROR_ALLDOCUMENT_MISSING);
+    fetchStatusData() {
+        if (!this.contextId) {
+            console.warn('Context ID is required to fetch status data');
+            return;
+        }
+        const currentState = this.documentQuery.getSelectionState();
+        const contextId = currentState.userId || this.contextId;
+        const categoryId = currentState.menuItem || null;
+        this.documentHttpService.getStatusDocumentCount(this.contextId, contextId, categoryId).subscribe({
+            next: (statusData) => {
+                this.statusData = statusData;
+                this.documentStore.setStatusData(statusData);
+            },
+            error: (error) => {
+                console.error('Error fetching status data:', error);
+            }
+        });
+    }
+    /**
+     * Fetches document catagory data.
+     */
+    fetchDocumentCatagories() {
+        const categoriesSubscription = this.documentHttpService.getDocumentCatagories(this.contextId).subscribe({
+            next: (categories) => {
+                if (categories) {
+                    this.catagories = categories.categories;
+                    this.applicationNumber = categories.applicationNumber;
                 }
             },
-            /**
-             * Handles errors if the request fails.
-             * @param {any} err - The error object returned by the server.
-             */
             error: (err) => {
-                console.error(ERRORS.ERROR_DOCUMENT_TYPES, err);
+                console.error('Error fetching document categories:', err);
             }
         });
-        this.subscription.add(folderSubscription);
+        this.subscription.add(categoriesSubscription);
     }
     /**
-     * Fetches the document data from the API.
-     * @param {string} folderBlockId - The folder ID to fetch the document.
-     * @returns {void}
+     * Fetches userlist data
      */
-    fetchDocuments(folderBlockId) {
-        const documentSubscription = this.documentHttpService.getDocumentByFolderID(folderBlockId, this.contextId).subscribe({
-            /**
-             * Handles the successful API response.
-             * @param {DocumentModel[]} documentList - The list of documents returned by the API.
-             */
-            next: (documentList) => {
-                if (documentList) {
-                    this.documentList = documentList;
-                    this.documentStore.setDocumentList(documentList);
-                }
-                else {
-                    console.error(ERRORS.ERROR_FETCHING_DOCUMENTS);
-                }
+    fetchUserList() {
+        this.documentHttpService.getUserListByContextId(this.contextId).subscribe({
+            next: (res) => {
+                this.userList = res;
             },
-            /**
-             * Handles errors if the request fails.
-             * @param {any} err - The error object returned by the server.
-             */
             error: (err) => {
-                console.error(ERRORS.ERROR_FETCHING_DOCUMENTS, err);
+                console.log(err);
             }
         });
-        this.subscription.add(documentSubscription);
+    }
+    /**
+     * Sets up subscription to listen for filtered document responses
+     */
+    setupFilteredDocumentSubscription() {
+        this.subscription.add(this.documentQuery.selectDocumentListResponse().subscribe({
+            next: (response) => {
+                this.documentListResponse = response;
+            },
+            error: (error) => {
+                console.error('Error receiving filtered documents:', error);
+            }
+        }));
     }
     /**
      * Unsubscribe subscription on destroy of component .
@@ -2747,19 +3422,13 @@ class DocumentContainerComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentStore }, { token: DocumentService$1 }, { token: DocumentQuery }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId", isCollapsed: "isCollapsed", showFolderList: "showFolderList", isUploadButtonVisible: "isUploadButtonVisible" }, 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 [items]=\"items\"></lib-documents-menu>\r\n    </div>\r\n    <div class=\"col-12 md:col-9 lg:col-9 p-0 h-full\" [ngClass]=\"showFolderList ? 'custom-scroll' : ''\">\r\n      @if(showFolderList){\r\n        <div>\r\n          <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n        </div>\r\n      }\r\n      <div [ngClass]=\"showFolderList ? 'mt-3' : ''\">\r\n        <lib-document-list [isCollapsed]=\"isCollapsed\" [documentList]=\"documentList\" [contextId]=\"contextId\" [isUploadButtonVisible]=\"isUploadButtonVisible\" (onRefresh)=\"fetchFolder()\">\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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "isUploadButtonVisible", "isCollapsed", "documentList"], outputs: ["onRefresh"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["items"] }] });
+    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\" >\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: "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.0.5", ngImport: i0, type: DocumentContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-container', standalone: false, 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 [items]=\"items\"></lib-documents-menu>\r\n    </div>\r\n    <div class=\"col-12 md:col-9 lg:col-9 p-0 h-full\" [ngClass]=\"showFolderList ? 'custom-scroll' : ''\">\r\n      @if(showFolderList){\r\n        <div>\r\n          <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n        </div>\r\n      }\r\n      <div [ngClass]=\"showFolderList ? 'mt-3' : ''\">\r\n        <lib-document-list [isCollapsed]=\"isCollapsed\" [documentList]=\"documentList\" [contextId]=\"contextId\" [isUploadButtonVisible]=\"isUploadButtonVisible\" (onRefresh)=\"fetchFolder()\">\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"] }]
-        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentService$1 }, { type: DocumentQuery }, { type: DocumentHttpService }], propDecorators: { contextId: [{
-                type: Input
-            }], isCollapsed: [{
-                type: Input
-            }], showFolderList: [{
-                type: Input
-            }], isUploadButtonVisible: [{
+            args: [{ selector: 'lib-document-container', standalone: false, 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\" >\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"] }]
+        }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentService }, { type: DocumentQuery }, { type: DocumentHttpService }, { type: DocumentHelperService }], propDecorators: { contextId: [{
                 type: Input
             }] } });
 
@@ -2802,10 +3471,10 @@ class FolderBlockComponent {
         this.documentStore.setParentDocumentTypeId(folderBlockId);
         return folderBlockId;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderBlockComponent, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-folder-block', standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: DocumentStore }], propDecorators: { folderList: [{
@@ -2840,10 +3509,10 @@ class DocumentListItemComponent {
         }
         this.documentClick.emit(document);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-document-list-item', standalone: false, 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"] }]
         }], propDecorators: { documentClick: [{
@@ -2878,10 +3547,10 @@ class GlobalErrorHandler {
     handleError(error) {
         console.error('GlobalErrorHandler:', error);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GlobalErrorHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GlobalErrorHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GlobalErrorHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GlobalErrorHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
@@ -2909,16 +3578,16 @@ class DocumentDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentDirective, deps: [{ token: DocumentService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: DocumentDirective, isStandalone: false, selector: "[doc]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentDirective, deps: [{ token: DocumentHelperService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DocumentDirective, isStandalone: false, selector: "[doc]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[doc]',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
+        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
 
 /**
  * Service for managing user session details.
@@ -2984,10 +3653,10 @@ class SessionService {
     clearSession() {
         localStorage.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, providedIn: 'root' });
+    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.0.5", ngImport: i0, type: SessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SessionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3047,10 +3716,10 @@ class HasPermissionDirective {
             this.renderer.removeStyle(this.el.nativeElement, 'display');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.0.5", type: HasPermissionDirective, isStandalone: false, selector: "[permission]", inputs: { permission: "permission" }, usesOnChanges: true, ngImport: i0 });
+    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.0.5", ngImport: i0, type: HasPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HasPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[permission]',
@@ -3061,17 +3730,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class SharedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SharedModule, declarations: [TablePrimaryComponent], imports: [CommonModule,
+    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,
             TableModule,
             ButtonModule,
             RippleModule], exports: [TablePrimaryComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SharedModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, imports: [CommonModule,
             TableModule,
             ButtonModule,
             RippleModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TablePrimaryComponent],
@@ -3093,8 +3762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * document lists, and individual document items.
  */
 class DocumentModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DocumentModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, declarations: [
             /**
              * The main container for managing documents.
              * DocumentContainerComponent
@@ -3237,7 +3906,7 @@ class DocumentModule {
              * A directive to show the document.
              */
             DocumentDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentModule, providers: [
+    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.
              */
@@ -3343,7 +4012,7 @@ class DocumentModule {
             TableModule,
             SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [