cat-documents-ng 0.3.10 → 0.3.12

package/fesm2022/cat-documents-ng.mjs

@@ -21,7 +21,7 @@ import * as i11 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import * as i12 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i7 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i14 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
@@ -31,24 +31,24 @@ import * as i5 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import * as i8 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9$2 from 'primeng/inputtext';
+import * as i10$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i2$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i6$1 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
-import * as i3$1 from 'primeng/accordion';
+import * as i3$2 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
 import * as i1 from '@angular/router';
 import * as i6 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i9$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i7$1 from 'primeng/badge';
+import * as i7 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i8$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i9$3 from 'primeng/card';
+import * as i9$2 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { ListboxModule } from 'primeng/listbox';
 import { TimelineModule } from 'primeng/timeline';
@@ -297,11 +297,13 @@ class SHARED {
     static USER_LIST = 'userList';
     static HYPEN = '-';
     static CATEGORIES = 'categories';
-    static UNSAVED_CHANGES_MESSAGE = 'You will loose all the data that was filled in the respective fields.';
+    static UNSAVED_CHANGES_MESSAGE = 'You have unsaved changes. Are you sure you want to leave?';
     static UNSAVED_CHANGES_HEADER = 'Unsaved Changes';
     static DOCUMENT_DELETED_SUCCESSFULLY = 'Document deleted successfully';
     static UNSAVED_CHANGES_ICON = 'pi pi-exclamation-triangle';
     static REMOVE = 'Remove';
+    static YES = 'Yes';
+    static NO = 'No';
     static CANCEL = 'Cancel';
     static ACCEPT_ICON = 'pi pi-times';
     static REJECT_ICON = 'pi pi-check';
@@ -3522,7 +3524,7 @@ class DocumentUploadComponent {
         this.dataService.destroy();
     }
     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 }, { token: DocumentUploadBusinessService }, { token: DocumentUploadFormService }, { token: DocumentUploadDataService }], 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" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application <span class=\"text-red-500\">*</span> </h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s) </label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s) <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          [accept]=\"getFileUploadAcceptString()\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\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 \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\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\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </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 \r\n                      [value]=\"uploadedFile.progress ?? 0\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': (uploadedFile.progress ?? 0) > 100 }\"\r\n                    >\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>\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}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.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: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application <span class=\"text-red-500\">*</span> </h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s) </label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s) <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          [accept]=\"getFileUploadAcceptString()\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\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 \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\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\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </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 \r\n                      [value]=\"uploadedFile.progress ?? 0\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': (uploadedFile.progress ?? 0) > 100 }\"\r\n                    >\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>\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}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.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: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, decorators: [{
             type: Component,
@@ -3542,8 +3544,8 @@ class ConfirmationDialogComponent {
     confirmationService;
     confirmationOptions = {
         message: 'Are you sure that you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
+        header: '',
+        icon: '',
         acceptLabel: 'Yes',
         rejectLabel: 'No',
         acceptIcon: 'pi pi-check',
@@ -3584,8 +3586,8 @@ class ConfirmationDialogComponent {
     static confirm(confirmationService, options, acceptCallback, rejectCallback) {
         const defaultOptions = {
             message: 'Are you sure that you want to proceed?',
-            header: 'Confirmation',
-            icon: 'pi pi-exclamation-triangle',
+            header: '',
+            icon: '',
             acceptLabel: 'Yes',
             rejectLabel: 'No',
             acceptIcon: 'pi pi-check',
@@ -3673,13 +3675,10 @@ class SidebarComponent {
     showSuccessMessage = false;
     showErrorMessage = false;
     destroy$ = new Subject();
-    // Confirmation options for unsaved changes
     unsavedChangesConfirmationOptions = {
         message: SHARED.UNSAVED_CHANGES_MESSAGE,
-        header: SHARED.UNSAVED_CHANGES_HEADER,
-        icon: SHARED.UNSAVED_CHANGES_ICON,
-        acceptLabel: SHARED.REMOVE,
-        rejectLabel: SHARED.CANCEL,
+        acceptLabel: SHARED.YES,
+        rejectLabel: SHARED.NO,
         acceptIcon: SHARED.ACCEPT_ICON,
         rejectIcon: SHARED.REJECT_ICON,
         acceptButtonClass: SHARED.ACCEPT_BUTTON_STYLE_CLASS,
@@ -3693,7 +3692,6 @@ class SidebarComponent {
      * Only emits when actually closing, not when showing confirmation
      */
     onSidebarHide() {
-        // Only emit onHide if we're not showing confirmation
         if (!this.isShowingConfirmation) {
             this.onHide.emit();
         }
@@ -3703,9 +3701,7 @@ class SidebarComponent {
      * Intercepts automatic closing to show confirmation if needed
      */
     onVisibleChange(value) {
-        // If PrimeNG is trying to close the sidebar and we have unsaved changes
         if (!value && this.hasUnsavedChanges && !this.isShowingConfirmation) {
-            // Prevent the close and show confirmation
             this._visible = true;
             this.showUnsavedChangesConfirmation();
             return;
@@ -3766,13 +3762,13 @@ class SidebarComponent {
      */
     showUnsavedChangesConfirmation() {
         if (this.isShowingConfirmation) {
-            return; // Prevent multiple confirmations
+            return;
         }
         this.isShowingConfirmation = true;
         ConfirmationDialogComponent.confirm(this.confirmationService, this.unsavedChangesConfirmationOptions, () => {
             this.isShowingConfirmation = false;
             this.close();
-            this.onClose.emit(); // Emit close event when user confirms
+            this.onClose.emit();
         }, () => {
             this.isShowingConfirmation = false;
         });
@@ -4271,7 +4267,7 @@ class DocumentSearchComponent {
         this.documentHelperService.clearSelectionState();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, deps: [{ token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, decorators: [{
             type: Component,
@@ -4779,6 +4775,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }, { type: DocumentQuery }, { type: DocumentStore }, { type: DocumentTableBuilderService }, { type: DocumentHelperService }] });
 
+/**
+ * Service responsible for reordering document categories to match menu item order
+ * This ensures sections are displayed in the same order as menu items
+ */
+class DocumentCategoryReorderService {
+    constructor() { }
+    /**
+     * Reorders document categories to match the menu item order
+     * This ensures sections are displayed in the same order as menu items
+     * @param documentCategories - The document categories to reorder
+     * @param categoryTables - The table data for each category
+     * @param categoryCompletionCounts - The completion counts for each category
+     * @param sortedMenuItems - The sorted menu items to determine order
+     * @returns Object containing reordered categories, tables, and completion counts
+     */
+    reorderCategoriesByMenuItemOrder(documentCategories, categoryTables, categoryCompletionCounts, sortedMenuItems) {
+        if (!documentCategories || documentCategories.length === 0) {
+            return {
+                reorderedCategories: documentCategories,
+                reorderedTables: categoryTables,
+                reorderedCompletionCounts: categoryCompletionCounts
+            };
+        }
+        const menuItemOrder = this.getMenuItemOrder(sortedMenuItems);
+        if (!menuItemOrder || menuItemOrder.length === 0) {
+            return {
+                reorderedCategories: documentCategories,
+                reorderedTables: categoryTables,
+                reorderedCompletionCounts: categoryCompletionCounts
+            };
+        }
+        const categoryOrderMap = this.buildCategoryOrderMap(documentCategories, menuItemOrder);
+        const originalCategoryData = this.buildOriginalCategoryData(documentCategories, categoryTables, categoryCompletionCounts);
+        // Sort categories based on menu item order
+        const reorderedCategories = [...documentCategories].sort((a, b) => {
+            const orderA = categoryOrderMap.get(a.label) ?? Number.MAX_SAFE_INTEGER;
+            const orderB = categoryOrderMap.get(b.label) ?? Number.MAX_SAFE_INTEGER;
+            return orderA - orderB;
+        });
+        // Reorder tables and completion counts to match the new category order
+        const reorderedTables = [];
+        const reorderedCompletionCounts = [];
+        reorderedCategories.forEach(category => {
+            const categoryData = originalCategoryData.get(category.label);
+            if (categoryData) {
+                reorderedTables.push(categoryData.table);
+                reorderedCompletionCounts.push(categoryData.count);
+            }
+        });
+        return {
+            reorderedCategories,
+            reorderedTables,
+            reorderedCompletionCounts
+        };
+    }
+    /**
+     * Gets the menu item order from the sorted menu items input
+     * This ensures sections are displayed in the same order as the sorted menu items
+     * @param sortedMenuItems - The sorted menu items array
+     * @returns Array of menu item labels in order
+     */
+    getMenuItemOrder(sortedMenuItems) {
+        if (!sortedMenuItems || sortedMenuItems.length === 0) {
+            return [];
+        }
+        const menuItemOrder = [];
+        sortedMenuItems.forEach((category) => {
+            if (category.items) {
+                category.items.forEach((item) => {
+                    menuItemOrder.push(item.label);
+                });
+            }
+        });
+        return menuItemOrder;
+    }
+    /**
+     * Builds a map of category labels to their order based on menu items
+     * @param documentCategories - The document categories
+     * @param menuItemOrder - The ordered menu item labels
+     * @returns Map of category label to order index
+     */
+    buildCategoryOrderMap(documentCategories, menuItemOrder) {
+        const categoryOrderMap = new Map();
+        menuItemOrder.forEach((menuItem, index) => {
+            const matchingCategory = documentCategories.find(category => {
+                const categoryLabel = category.label.toLowerCase();
+                const menuItemLabel = menuItem.toLowerCase();
+                if (categoryLabel === menuItemLabel) {
+                    return true;
+                }
+                if (categoryLabel.includes(menuItemLabel) && menuItemLabel.length > 2) {
+                    return true;
+                }
+                if (menuItemLabel.includes(categoryLabel) && categoryLabel.length > 2) {
+                    return true;
+                }
+                return false;
+            });
+            if (matchingCategory) {
+                categoryOrderMap.set(matchingCategory.label, index);
+            }
+        });
+        return categoryOrderMap;
+    }
+    /**
+     * Builds a map of original category data for reordering
+     * @param documentCategories - The document categories
+     * @param categoryTables - The table data for each category
+     * @param categoryCompletionCounts - The completion counts for each category
+     * @returns Map of category label to category data
+     */
+    buildOriginalCategoryData(documentCategories, categoryTables, categoryCompletionCounts) {
+        const originalCategoryData = new Map();
+        documentCategories.forEach((category, index) => {
+            originalCategoryData.set(category.label, {
+                category: category,
+                table: categoryTables[index],
+                count: categoryCompletionCounts[index]
+            });
+        });
+        return originalCategoryData;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentCategoryReorderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentCategoryReorderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentCategoryReorderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class TablePrimaryComponent {
     tableData = { columns: [], data: [] };
     showHeader = true;
@@ -5445,7 +5573,7 @@ class DocumentHistoryComponent {
         this.documentHistoryService.downloadDocument(documentUrl, docName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, deps: [{ token: DocumentHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\n  <div class=\"history-sections\">\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \n           class=\"initial-request-section\"\n           [ngClass]=\"section.accordionClass\">\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \n                     (onOpen)=\"onAccordionOpen()\" \n                     (onClose)=\"onAccordionClose()\">\n          <p-accordionTab [header]=\"section.header\">\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\n                  <div class=\"card-header\">\n                    <div class=\"action-info\">\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\n                        <i [class]=\"item.actionIcon\"></i>\n                      </div>\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\n                        {{ item.label }}\n                      </span>\n                    </div>\n                    <div class=\"timestamp\">\n                      {{ item.dateTime }}\n                    </div>\n                  </div>\n                  \n                  <!-- Description -->\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\n                  </div>\n                  \n                  <!-- Document details if URL exists -->\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\n                    <div class=\"document-card\">\n                      <div class=\"document-info\">\n                        <div class=\"document-icon\">\n                          <i class=\"pi pi-file\"></i>\n                        </div>\n                        <div class=\"document-text\">\n                          <div class=\"document-title\">Document</div>\n                          <div class=\"document-filename clickable\" \n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\n                               title=\"Click to download\">\n                            {{ item.docName || 'Document' }}\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"document-actions\">\n                        <button class=\"action-btn download-btn\" \n                                title=\"Download\"\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\n                          <i class=\"pi pi-download\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  \n                  <!-- User information -->\n                  <div class=\"user-info\">\n                    <span class=\"user-name\">{{ item.userName }}</span>\n                    <span class=\"user-role\">({{ item.userRole }})</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!-- Show message if no valid content -->\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\n              <p>No initial request details available.</p>\n            </div>\n          </p-accordionTab>\n        </p-accordion>\n      </div>\n      \n      <!-- Document History as regular timeline -->\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\n        <div class=\"section-header\" *ngIf=\"section.header\">\n          <h4 class=\"section-title\">{{ section.header }}</h4>\n        </div>\n        \n        <div class=\"history-timeline\">\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\n              <!-- Header with icon and timestamp -->\n              <div class=\"card-header\">\n                <div class=\"action-info\">\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\n                    <i [class]=\"item.actionIcon\"></i>\n                  </div>\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\n                    {{ item.label }}\n                  </span>\n                </div>\n                <div class=\"timestamp\">\n                  {{ item.dateTime }}\n                </div>\n              </div>\n              \n              <!-- Description -->\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\n              </div>\n              \n              <!-- Document details if URL exists -->\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\n                <div class=\"document-card\">\n                  <div class=\"document-info\">\n                    <div class=\"document-icon\">\n                      <i class=\"pi pi-file\"></i>\n                    </div>\n                    <div class=\"document-text\">\n                      <div class=\"document-title\">Document</div>\n                      <div class=\"document-filename clickable\" \n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\n                           title=\"Click to download\">\n                        {{ item.docName || 'Document' }}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              <!-- User information -->\n              <div class=\"user-info\">\n                <span class=\"user-name\">{{ item.userName }}</span>\n                <span class=\"user-role\">({{ item.userRole }})</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".document-history-container{padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:none;overflow-y:auto}.document-history-container .history-header{margin-bottom:1rem}.document-history-container .history-header .history-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border-top:1px solid;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;padding:.75rem 1rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:.75rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\n  <div class=\"history-sections\">\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \n           class=\"initial-request-section\"\n           [ngClass]=\"section.accordionClass\">\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \n                     (onOpen)=\"onAccordionOpen()\" \n                     (onClose)=\"onAccordionClose()\">\n          <p-accordionTab [header]=\"section.header\">\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\n                  <div class=\"card-header\">\n                    <div class=\"action-info\">\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\n                        <i [class]=\"item.actionIcon\"></i>\n                      </div>\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\n                        {{ item.label }}\n                      </span>\n                    </div>\n                    <div class=\"timestamp\">\n                      {{ item.dateTime }}\n                    </div>\n                  </div>\n                  \n                  <!-- Description -->\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\n                  </div>\n                  \n                  <!-- Document details if URL exists -->\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\n                    <div class=\"document-card\">\n                      <div class=\"document-info\">\n                        <div class=\"document-icon\">\n                          <i class=\"pi pi-file\"></i>\n                        </div>\n                        <div class=\"document-text\">\n                          <div class=\"document-title\">Document</div>\n                          <div class=\"document-filename clickable\" \n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\n                               title=\"Click to download\">\n                            {{ item.docName || 'Document' }}\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"document-actions\">\n                        <button class=\"action-btn download-btn\" \n                                title=\"Download\"\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\n                          <i class=\"pi pi-download\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                  \n                  <!-- User information -->\n                  <div class=\"user-info\">\n                    <span class=\"user-name\">{{ item.userName }}</span>\n                    <span class=\"user-role\">({{ item.userRole }})</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!-- Show message if no valid content -->\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\n              <p>No initial request details available.</p>\n            </div>\n          </p-accordionTab>\n        </p-accordion>\n      </div>\n      \n      <!-- Document History as regular timeline -->\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\n        <div class=\"section-header\" *ngIf=\"section.header\">\n          <h4 class=\"section-title\">{{ section.header }}</h4>\n        </div>\n        \n        <div class=\"history-timeline\">\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\n              <!-- Header with icon and timestamp -->\n              <div class=\"card-header\">\n                <div class=\"action-info\">\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\n                    <i [class]=\"item.actionIcon\"></i>\n                  </div>\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\n                    {{ item.label }}\n                  </span>\n                </div>\n                <div class=\"timestamp\">\n                  {{ item.dateTime }}\n                </div>\n              </div>\n              \n              <!-- Description -->\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\n              </div>\n              \n              <!-- Document details if URL exists -->\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\n                <div class=\"document-card\">\n                  <div class=\"document-info\">\n                    <div class=\"document-icon\">\n                      <i class=\"pi pi-file\"></i>\n                    </div>\n                    <div class=\"document-text\">\n                      <div class=\"document-title\">Document</div>\n                      <div class=\"document-filename clickable\" \n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\n                           title=\"Click to download\">\n                        {{ item.docName || 'Document' }}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              <!-- User information -->\n              <div class=\"user-info\">\n                <span class=\"user-name\">{{ item.userName }}</span>\n                <span class=\"user-role\">({{ item.userRole }})</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".document-history-container{padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:none;overflow-y:auto}.document-history-container .history-header{margin-bottom:1rem}.document-history-container .history-header .history-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border-top:1px solid;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;padding:.75rem 1rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:.75rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, decorators: [{
             type: Component,
@@ -5819,7 +5947,7 @@ class DocumentActionsComponent {
         this.rejectNote = SHARED.EMPTY;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, deps: [{ token: DocumentActionsService }, { token: SessionService }, { token: i3.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentActionsComponent, isStandalone: false, selector: "document-actions", inputs: { document: "document", documentId: "documentId", currentStatus: "currentStatus", isLoading: "isLoading", isUploaded: "isUploaded", statusId: "statusId" }, outputs: { actionPerformed: "actionPerformed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-actions-container\" *ngIf=\"document?.status !=='Pending' && !document?.isUploaded && document?.status === 'Reviewing'\">\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\n    <div class=\"actions-buttons\">\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\"\n        (click)=\"onRejectClick()\" [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\n          SHARED.BUTTON_LABEL_REJECT }}</span>\n      </button>\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\"\n        (click)=\"onAcceptClick()\" [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\n          }}</span>\n      </button>\n    </div>\n  </div>\n</div>\n\n@if(document?.isUploaded){\n<div class=\"actions-card\">\n  <div class=\"actions-buttons\">\n    <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\n    [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\n    <i class=\"pi pi-trash\"></i>\n    </button>\n  </div>\n</div>\n}\n\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\n      rows=\"6\" class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\n      </button>\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\n      rows=\"6\" class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\n      </button>\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\n        (click)=\"onRejectConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease;width:92%;margin-left:3%}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#e8f5e9;border:1px solid #66bb6a}.actions-card.rejected-card{background-color:#feeaea;border:1px solid #e57373}.actions-card[class*=status-].status-approved-card{background-color:#e8f5e9;border:1px solid #66bb6a}.actions-card[class*=status-].status-rejected-card{background-color:#feeaea;border:1px solid #e57373}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card:has(.delete-btn){width:auto;margin-left:0;background-color:#fff;border:1px solid #e2e8f0;padding:.5rem}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#feeaea;border-color:#e57373;color:#4a4a4a}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7}.reject-btn.primary-reject{background-color:#feeaea;border-color:#e57373;color:#e57373}.reject-btn.primary-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn[class*=status-].status-approved-reject{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7}.reject-btn[class*=status-].status-rejected-reject{background-color:#feeaea;border-color:#e57373;color:#e57373}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn[class*=status-].status-pending-reject{background-color:#feeaea;border-color:#e57373;color:#4a4a4a}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#e8f5e9;border-color:#66bb6a;color:#4a4a4a}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7}.accept-btn.primary-accept{background-color:#4caf50;border-color:#4caf50;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#45a049;border-color:#45a049}.accept-btn[class*=status-].status-approved-accept{background-color:#4caf50;border-color:#4caf50;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#45a049;border-color:#45a049}.accept-btn[class*=status-].status-rejected-accept{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7}.accept-btn[class*=status-].status-pending-accept{background-color:#e8f5e9;border-color:#66bb6a;color:#4a4a4a}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#f5f5f5;border-color:#e57373;color:#e57373;padding:.5rem;min-width:auto;width:40px;height:40px;border-radius:6px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}.no-actions-message{display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:40px}.no-actions-message .no-actions-text{color:#6b7280;font-size:.875rem;font-style:italic;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: "directive", type: i9$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentActionsComponent, isStandalone: false, selector: "document-actions", inputs: { document: "document", documentId: "documentId", currentStatus: "currentStatus", isLoading: "isLoading", isUploaded: "isUploaded", statusId: "statusId" }, outputs: { actionPerformed: "actionPerformed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-actions-container\" *ngIf=\"document?.status !=='Pending' && !document?.isUploaded && document?.status === 'Reviewing'\">\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\n    <div class=\"actions-buttons\">\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\"\n        (click)=\"onRejectClick()\" [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\n          SHARED.BUTTON_LABEL_REJECT }}</span>\n      </button>\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\"\n        (click)=\"onAcceptClick()\" [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\n          }}</span>\n      </button>\n    </div>\n  </div>\n</div>\n\n@if(document?.isUploaded){\n<div class=\"actions-card\">\n  <div class=\"actions-buttons\">\n    <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\n    [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\n    <i class=\"pi pi-trash\"></i>\n    </button>\n  </div>\n</div>\n}\n\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\n      rows=\"6\" class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\n      </button>\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>\n\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\n  <div class=\"dialog-content\">\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\n      rows=\"6\" class=\"note-textarea\">\n    </textarea>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <div class=\"dialog-footer\">\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\n      </button>\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\n        (click)=\"onRejectConfirm()\">\n      </button>\n    </div>\n  </ng-template>\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease;width:92%;margin-left:3%}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#e8f5e9;border:1px solid #66bb6a}.actions-card.rejected-card{background-color:#feeaea;border:1px solid #e57373}.actions-card[class*=status-].status-approved-card{background-color:#e8f5e9;border:1px solid #66bb6a}.actions-card[class*=status-].status-rejected-card{background-color:#feeaea;border:1px solid #e57373}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card:has(.delete-btn){width:auto;margin-left:0;background-color:#fff;border:1px solid #e2e8f0;padding:.5rem}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#feeaea;border-color:#e57373;color:#4a4a4a}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7}.reject-btn.primary-reject{background-color:#feeaea;border-color:#e57373;color:#e57373}.reject-btn.primary-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn[class*=status-].status-approved-reject{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7}.reject-btn[class*=status-].status-rejected-reject{background-color:#feeaea;border-color:#e57373;color:#e57373}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn[class*=status-].status-pending-reject{background-color:#feeaea;border-color:#e57373;color:#4a4a4a}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#e8f5e9;border-color:#66bb6a;color:#4a4a4a}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7}.accept-btn.primary-accept{background-color:#4caf50;border-color:#4caf50;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#45a049;border-color:#45a049}.accept-btn[class*=status-].status-approved-accept{background-color:#4caf50;border-color:#4caf50;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#45a049;border-color:#45a049}.accept-btn[class*=status-].status-rejected-accept{background-color:#f5f5f5;border-color:transparent;color:#4a4a4a}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7}.accept-btn[class*=status-].status-pending-accept{background-color:#e8f5e9;border-color:#66bb6a;color:#4a4a4a}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#f5f5f5;border-color:#e57373;color:#e57373;padding:.5rem;min-width:auto;width:40px;height:40px;border-radius:6px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}.no-actions-message{display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:40px}.no-actions-message .no-actions-text{color:#6b7280;font-size:.875rem;font-style:italic;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: "directive", type: i9$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, decorators: [{
             type: Component,
@@ -6006,6 +6134,7 @@ class DocumentListComponent {
     documentListService;
     documentHttpService;
     documentMenuService;
+    documentCategoryReorderService;
     /**
      * Represents the context ID for the document list.
      * This value is passed from the parent component.
@@ -6151,10 +6280,11 @@ class DocumentListComponent {
      * @class
      * @param {DocumentListService} documentListService - The service responsible for document list operations.
      */
-    constructor(documentListService, documentHttpService, documentMenuService) {
+    constructor(documentListService, documentHttpService, documentMenuService, documentCategoryReorderService) {
         this.documentListService = documentListService;
         this.documentHttpService = documentHttpService;
         this.documentMenuService = documentMenuService;
+        this.documentCategoryReorderService = documentCategoryReorderService;
     }
     /**
      * Handles changes to input properties
@@ -6171,7 +6301,10 @@ class DocumentListComponent {
         }
         // Reorder sections when sorted menu items change
         if (changes['sortedMenuItems'] && this.sortedMenuItems && this.documentCategories && this.documentCategories.length > 0) {
-            this.reorderCategoriesByMenuItemOrder();
+            const reorderResult = this.documentCategoryReorderService.reorderCategoriesByMenuItemOrder(this.documentCategories, this.categoryTables, this.categoryCompletionCounts, this.sortedMenuItems);
+            this.documentCategories = reorderResult.reorderedCategories;
+            this.categoryTables = reorderResult.reorderedTables;
+            this.categoryCompletionCounts = reorderResult.reorderedCompletionCounts;
         }
     }
     /**
@@ -6207,110 +6340,11 @@ class DocumentListComponent {
         this.documentCategories = result.documentCategories;
         this.categoryTables = result.categoryTables;
         this.categoryCompletionCounts = result.categoryCompletionCounts;
-        // Reorder categories to match menu item order after setting the properties
-        this.reorderCategoriesByMenuItemOrder();
-    }
-    /**
-     * Reorders document categories to match the menu item order
-     * This ensures sections are displayed in the same order as menu items
-     */
-    reorderCategoriesByMenuItemOrder() {
-        if (!this.documentCategories || this.documentCategories.length === 0) {
-            return;
-        }
-        // Get the menu items order from the sorted menu items input
-        const menuItemOrder = this.getMenuItemOrder();
-        if (!menuItemOrder || menuItemOrder.length === 0) {
-            return;
-        }
-        // Create a map of category labels to their target positions
-        const categoryOrderMap = new Map();
-        menuItemOrder.forEach((menuItem, index) => {
-            // Find the category that matches this menu item more precisely
-            const matchingCategory = this.documentCategories.find(category => {
-                const categoryLabel = category.label.toLowerCase();
-                const menuItemLabel = menuItem.toLowerCase();
-                // Exact match first
-                if (categoryLabel === menuItemLabel) {
-                    return true;
-                }
-                // Check if category label contains the menu item (but be more specific)
-                if (categoryLabel.includes(menuItemLabel) && menuItemLabel.length > 2) {
-                    return true;
-                }
-                // Check if menu item contains the category label (but be more specific)
-                if (menuItemLabel.includes(categoryLabel) && categoryLabel.length > 2) {
-                    return true;
-                }
-                return false;
-            });
-            if (matchingCategory) {
-                categoryOrderMap.set(matchingCategory.label, index);
-            }
-        });
-        // Create a map of original category labels to their data BEFORE reordering
-        const originalCategoryData = new Map();
-        this.documentCategories.forEach((category, index) => {
-            originalCategoryData.set(category.label, {
-                category: category,
-                table: this.categoryTables[index],
-                count: this.categoryCompletionCounts[index]
-            });
-        });
-        // Sort categories based on the menu item order
-        this.documentCategories.sort((a, b) => {
-            const orderA = categoryOrderMap.get(a.label) ?? Number.MAX_SAFE_INTEGER;
-            const orderB = categoryOrderMap.get(b.label) ?? Number.MAX_SAFE_INTEGER;
-            return orderA - orderB;
-        });
-        // Reorder the corresponding tables and completion counts
-        // We need to maintain the relationship between categories and their data
-        const reorderedTables = [];
-        const reorderedCompletionCounts = [];
-        // Use the reordered categories to get the corresponding data from the original map
-        this.documentCategories.forEach(category => {
-            const categoryData = originalCategoryData.get(category.label);
-            if (categoryData) {
-                reorderedTables.push(categoryData.table);
-                reorderedCompletionCounts.push(categoryData.count);
-            }
-        });
-        this.categoryTables = reorderedTables;
-        this.categoryCompletionCounts = reorderedCompletionCounts;
-    }
-    /**
-     * Gets the menu item order from the sorted menu items input
-     * This ensures sections are displayed in the same order as the sorted menu items
-     */
-    getMenuItemOrder() {
-        // Use the sorted menu items input if available
-        if (this.sortedMenuItems && this.sortedMenuItems.length > 0) {
-            const menuItemOrder = [];
-            // Extract menu item labels in the order they appear in the sorted menu
-            this.sortedMenuItems.forEach((category) => {
-                if (category.items) {
-                    category.items.forEach((item) => {
-                        menuItemOrder.push(item.label);
-                    });
-                }
-            });
-            if (menuItemOrder.length > 0) {
-                return menuItemOrder;
-            }
-        }
-        // Fallback to default order if sorted menu items are not available
-        return [
-            'System Documents',
-            'Deposit',
-            'Direct Debit Mandate',
-            'Identity',
-            'Affordability',
-            'Income',
-            'Miscellaneous',
-            'Welcome Call',
-            'Ad Hoc',
-            'Credit Conduct'
-        ];
+        // Use the new service to reorder categories
+        const reorderResult = this.documentCategoryReorderService.reorderCategoriesByMenuItemOrder(this.documentCategories, this.categoryTables, this.categoryCompletionCounts, this.sortedMenuItems);
+        this.documentCategories = reorderResult.reorderedCategories;
+        this.categoryTables = reorderResult.reorderedTables;
+        this.categoryCompletionCounts = reorderResult.reorderedCompletionCounts;
     }
     /**
      * Sets up subscription to document list response from store
@@ -6333,7 +6367,6 @@ class DocumentListComponent {
         this.isdialogVisible = SHARED.TRUE;
         this.selectedDocument = this.documentListService.handleTableRowClick(rowData);
         this.handleSelectedDocument.emit(this.selectedDocument);
-        // Reset editing state when opening a new document
         this.isEditingDocumentName = false;
         this.documentName = SHARED.EMPTY;
         this.fileNameError = SHARED.EMPTY;
@@ -6362,7 +6395,7 @@ class DocumentListComponent {
      */
     onDocumentNameClick() {
         this.isEditingDocumentName = true;
-        this.documentName = this.selectedDocument.docName;
+        this.documentName = this.selectedDocument.aliasName ?? this.selectedDocument.docName;
         const lastDotIndex = this.selectedDocument.docName.lastIndexOf('.');
         if (lastDotIndex !== -1) {
             this.documentExtension = this.selectedDocument.docName.substring(lastDotIndex);
@@ -6537,17 +6570,13 @@ class DocumentListComponent {
         const input = event.target;
         this.documentName = input.value;
         if (this.disallowedCharsRegex.test(this.documentName)) {
-            // this.fileNameError = ERRORS.ERROR_INVALID_FILENAME_CHARACTERS;
         }
         else {
             this.fileNameError = SHARED.EMPTY;
         }
-        // Remove the dynamic width calculation that was causing the name to hide
-        // The input will now use its natural width or CSS-defined width
     }
     handleSaveClick() {
         if (this.documentName !== this.selectedDocument.docName && !this.fileNameError) {
-            // Send only the document name without extension for alias
             const payload = { aliasName: this.documentName };
             this.documentHttpService.updateDocumentName(this.selectedDocument._id, payload)
                 .subscribe((res) => {
@@ -6559,7 +6588,6 @@ class DocumentListComponent {
                 }
                 this.isEditingDocumentName = false;
                 this.fileNameError = SHARED.EMPTY;
-                // Refresh everything after successful alias name update
                 this.documentListService.refreshAllDataWithCurrentFilters(this.contextId);
             });
         }
@@ -6574,13 +6602,13 @@ class DocumentListComponent {
     ngOnDestroy() {
         this.documentListSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentListService }, { token: DocumentHttpService }, { token: DocumentMenuService }], 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", selectedMenuItemId: "selectedMenuItemId", navigationInfo: "navigationInfo", sortedMenuItems: "sortedMenuItems", documentList: "documentList" }, outputs: { handleSelectedDocument: "handleSelectedDocument" }, viewQueries: [{ propertyName: "documentCategoriesContainer", first: true, predicate: ["documentCategoriesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\n  <p-dialog [header]=\"selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\n    <ng-template pTemplate=\"header\">\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\n        <!-- Show alias name and document name when available -->\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \n             class=\"document-name-display clickable-doc-name\"\n             (click)=\"onDocumentNameClick()\"\n             title=\"Click to edit document name\">\n          <div class=\"alias-name\">\n            {{ aliasName }}\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\n          </div>\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\n        </div>\n        <span \n          *ngIf=\"!isEditingDocumentName && !aliasName\" \n          class=\"font-bold white-space-nowrap clickable-doc-name\"\n          (click)=\"onDocumentNameClick()\"\n          title=\"Click to edit document name\">\n          {{selectedDocument?.docName}}\n          <i class=\"pi pi-pencil edit-icon\"></i>\n        </span>\n        <input \n          *ngIf=\"isEditingDocumentName\"\n          #fileInput \n          type=\"text\" \n          class=\"h-3rem file-input-wrapper document-name-input\" \n          pInputText \n          [(ngModel)]=\"documentName\"\n          (input)=\"onDocumentNameChange($event)\" \n          (blur)=\"handleSaveClick()\"\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\n          (keydown.enter)=\"handleSaveClick()\" />\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\n          {{ fileNameError }}\n        </div>\n      </div>\n    </ng-template>\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\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\n        </div>\n      </ng-template>\n      <ng-content></ng-content>\n    </document-viewer>\n  </p-dialog>\n</div>\n\n<div class=\"document-categories-container\" #documentCategoriesContainer>\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\n    [id]=\"'section-' + category.label.toLowerCase().replace(' ', '-')\">\n    <div class=\"category-header\">\n      <div class=\"category-title\">\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\n      </div>\n      <div class=\"completion-status\">\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\n      </div>\n    </div>\n\n    <div class=\"table-container\">\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\n      </lib-table-primary>\n    </div>\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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease}.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}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: "directive", type: i9$2.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentListService }, { token: DocumentHttpService }, { token: DocumentMenuService }, { token: DocumentCategoryReorderService }], 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", selectedMenuItemId: "selectedMenuItemId", navigationInfo: "navigationInfo", sortedMenuItems: "sortedMenuItems", documentList: "documentList" }, outputs: { handleSelectedDocument: "handleSelectedDocument" }, viewQueries: [{ propertyName: "documentCategoriesContainer", first: true, predicate: ["documentCategoriesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\n  <p-dialog [header]=\"selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\n    <ng-template pTemplate=\"header\">\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\n        <!-- Show alias name and document name when available -->\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \n             class=\"document-name-display clickable-doc-name\"\n             (click)=\"onDocumentNameClick()\"\n             title=\"Click to edit document name\">\n          <div class=\"alias-name\">\n            {{ aliasName }}\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\n          </div>\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\n        </div>\n        <span \n          *ngIf=\"!isEditingDocumentName && !aliasName\" \n          class=\"font-bold white-space-nowrap clickable-doc-name\"\n          (click)=\"onDocumentNameClick()\"\n          title=\"Click to edit document name\">\n          {{selectedDocument?.docName}}\n          <i class=\"pi pi-pencil edit-icon\"></i>\n        </span>\n        <input \n          *ngIf=\"isEditingDocumentName\"\n          #fileInput \n          type=\"text\" \n          class=\"h-3rem file-input-wrapper document-name-input\" \n          pInputText \n          [(ngModel)]=\"documentName\"\n          (input)=\"onDocumentNameChange($event)\" \n          (blur)=\"handleSaveClick()\"\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\n          (keydown.enter)=\"handleSaveClick()\" />\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\n          {{ fileNameError }}\n        </div>\n      </div>\n    </ng-template>\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\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\n        </div>\n      </ng-template>\n      <ng-content></ng-content>\n    </document-viewer>\n  </p-dialog>\n</div>\n\n<div class=\"document-categories-container\" #documentCategoriesContainer>\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\n    [id]=\"'section-' + category.label.toLowerCase().replace(' ', '-')\">\n    <div class=\"category-header\">\n      <div class=\"category-title\">\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\n      </div>\n      <div class=\"completion-status\">\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\n      </div>\n    </div>\n\n    <div class=\"table-container\">\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\n      </lib-table-primary>\n    </div>\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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease}.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}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: "directive", type: i10$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\n  <p-dialog [header]=\"selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\n    <ng-template pTemplate=\"header\">\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\n        <!-- Show alias name and document name when available -->\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \n             class=\"document-name-display clickable-doc-name\"\n             (click)=\"onDocumentNameClick()\"\n             title=\"Click to edit document name\">\n          <div class=\"alias-name\">\n            {{ aliasName }}\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\n          </div>\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\n        </div>\n        <span \n          *ngIf=\"!isEditingDocumentName && !aliasName\" \n          class=\"font-bold white-space-nowrap clickable-doc-name\"\n          (click)=\"onDocumentNameClick()\"\n          title=\"Click to edit document name\">\n          {{selectedDocument?.docName}}\n          <i class=\"pi pi-pencil edit-icon\"></i>\n        </span>\n        <input \n          *ngIf=\"isEditingDocumentName\"\n          #fileInput \n          type=\"text\" \n          class=\"h-3rem file-input-wrapper document-name-input\" \n          pInputText \n          [(ngModel)]=\"documentName\"\n          (input)=\"onDocumentNameChange($event)\" \n          (blur)=\"handleSaveClick()\"\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\n          (keydown.enter)=\"handleSaveClick()\" />\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\n          {{ fileNameError }}\n        </div>\n      </div>\n    </ng-template>\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\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\n        </div>\n      </ng-template>\n      <ng-content></ng-content>\n    </document-viewer>\n  </p-dialog>\n</div>\n\n<div class=\"document-categories-container\" #documentCategoriesContainer>\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\n    [id]=\"'section-' + category.label.toLowerCase().replace(' ', '-')\">\n    <div class=\"category-header\">\n      <div class=\"category-title\">\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\n      </div>\n      <div class=\"completion-status\">\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\n      </div>\n    </div>\n\n    <div class=\"table-container\">\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\n      </lib-table-primary>\n    </div>\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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease}.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}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.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: DocumentListService }, { type: DocumentHttpService }, { type: DocumentMenuService }], propDecorators: { contextId: [{
+        }], ctorParameters: () => [{ type: DocumentListService }, { type: DocumentHttpService }, { type: DocumentMenuService }, { type: DocumentCategoryReorderService }], propDecorators: { contextId: [{
                 type: Input
             }], documentListResponse: [{
                 type: Input
@@ -6821,7 +6849,7 @@ class DocumentsMenuComponent {
         return this.selectedMenuItemId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentMenuService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, outputs: { menuItemSelected: "menuItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" 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 }} Documents</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-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;border:none!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 .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-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{overflow-y:auto;overflow-x:hidden}.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:#fff!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:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!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}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2$1.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$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, outputs: { menuItemSelected: "menuItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" 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 }} Documents</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-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;border:none!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 .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-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{overflow-y:auto;overflow-x:hidden}.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:#fff!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:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!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}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
             type: Component,
@@ -6964,7 +6992,6 @@ class DocumentContainerComponent {
                 top: 0,
                 behavior: 'smooth'
             });
-            console.log('Container: Reset scroll to top');
         }
     }
     /**
@@ -7040,7 +7067,6 @@ class DocumentContainerComponent {
         }
         const currentState = this.documentQuery.getSelectionState();
         const contextId = currentState.userId || null;
-        // No category filtering - removed menu item dependency
         this.documentHttpService.getStatusDocumentCount(this.contextId, contextId, null).subscribe({
             next: (statusData) => {
                 this.statusData = statusData;
@@ -7060,8 +7086,6 @@ class DocumentContainerComponent {
             return;
         }
         const currentState = this.documentQuery.getSelectionState();
-        // For user list, we use the contextId but the API might need additional parameters
-        // based on current filters. For now, we'll use the base contextId
         // If the API supports filtering by menu item or status, we can add those parameters
         this.documentHttpService.getUserListByContextId(this.contextId).subscribe({
             next: (res) => {
@@ -7083,7 +7107,6 @@ class DocumentContainerComponent {
                     this.catagories = categories.categories;
                     this.applicationNumber = categories.applicationNumber;
                     this.documentStore.setDocumentCategories(categories.categories);
-                    // Sort the categories and menu items for consistent ordering
                     this.sortedMenuItems = this.documentMenuService.sortCategoriesAndMenuItems(categories.categories);
                 }
             },