@masterteam/work-center 0.0.1 → 0.0.3

package/fesm2022/masterteam-work-center.mjs

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, output, Component } from '@angular/core';
+import { inject, Injectable, computed, input, output, Component, signal, effect, untracked } from '@angular/core';
 import { ClientPage } from '@masterteam/components/client-page';
-import { Page } from '@masterteam/components/page';
+import { ModalService } from '@masterteam/components/modal';
 import { PropertyFilterBuilder } from '@masterteam/components/property-filter-builder';
 import { StatisticCard } from '@masterteam/components/statistic-card';
 import { Table } from '@masterteam/components/table';
@@ -12,6 +12,13 @@ import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
 import { handleApiRequest } from '@masterteam/components';
 import { catchError, EMPTY, map } from 'rxjs';
+import { EntitiesPreview } from '@masterteam/components/entities';
+import { Tabs } from '@masterteam/components/tabs';
+import { StructureBuilder } from '@masterteam/structure-builder';
+import { ClientModulePreview } from '@masterteam/client-components/client-module-preview';
+import { ClientForm } from '@masterteam/forms/client-form';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Drawer } from '@masterteam/components/drawer';
 
 class EnterArea {
     area;
@@ -151,26 +158,42 @@ function toLabel$1(value) {
         .trim()
         .replace(/\b\w/g, (char) => char.toUpperCase());
 }
-function toColumnType(key) {
-    return key.toLowerCase().includes('date') ? 'date' : 'text';
+function toViewType(viewType, key) {
+    if (viewType?.trim()) {
+        return viewType;
+    }
+    return key.toLowerCase().includes('date') ? 'Date' : 'Text';
+}
+function getValue(record, key) {
+    return key.split('.').reduce((current, part) => {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        return current[part];
+    }, record);
 }
-function mapViewTypeToColumnType(viewType, key) {
-    const normalized = viewType?.toLowerCase();
-    if (normalized === 'date' || key.toLowerCase().includes('date')) {
-        return 'date';
+function toDisplayValue(value, column) {
+    if (column.viewType !== 'Text') {
+        return value;
     }
-    return 'text';
+    if (!value || typeof value !== 'object') {
+        return value;
+    }
+    const display = value['display'];
+    return typeof display === 'string' ? display : value;
 }
 function buildColumnsFromProperties(properties) {
     return properties
         .filter((property) => typeof property?.key === 'string' && property.key.length > 0)
         .map((property) => ({
+        ...property,
         key: property.key,
         label: property.name?.display ||
             property.name?.en ||
             property.name?.ar ||
             toLabel$1(property.key),
-        type: mapViewTypeToColumnType(property.viewType, property.key),
+        type: 'entity',
+        viewType: toViewType(property.viewType, property.key),
     }));
 }
 function buildColumns(columnsConfig) {
@@ -182,9 +205,23 @@ function buildColumns(columnsConfig) {
     return keys.map((key) => ({
         key,
         label: toLabel$1(key),
-        type: toColumnType(key),
+        type: 'entity',
+        viewType: toViewType(undefined, key),
     }));
 }
+function toDisplayRows(rows, columns) {
+    return rows.map((row) => {
+        const displayRow = { ...row };
+        for (const column of columns) {
+            const value = getValue(row, column.key);
+            displayRow[column.key] = {
+                ...column,
+                value: toDisplayValue(value, column),
+            };
+        }
+        return displayRow;
+    });
+}
 function buildMenuItems(cards) {
     const mapped = cards.map((card, index) => ({
         key: card.key,
@@ -271,10 +308,14 @@ function buildContextFromInputs(currentContext, area, inputs = {}) {
         templateId: parsedTemplateId ?? currentContext.templateId,
         sort: hasParamValue(inputs.sort)
             ? parseSortInput(inputs.sort)
-            : currentContext.sort,
+            : inputs.sort === null
+                ? []
+                : currentContext.sort,
         runtimeFilters: hasParamValue(inputs.filters)
             ? parseFiltersInput(inputs.filters)
-            : currentContext.runtimeFilters,
+            : inputs.filters === null
+                ? []
+                : currentContext.runtimeFilters,
     });
 }
 function isSameContext(left, right) {
@@ -289,7 +330,6 @@ function isSameContext(left, right) {
 }
 function mapRuntimeResponse(current, response) {
     const selectedCard = response.selectedCard;
-    const rows = selectedCard?.items ?? [];
     const menuItems = buildMenuItems(response.cards);
     const requestedCardKey = selectedCard?.key ?? current.context.selectedCardKey ?? null;
     const selectedCardKey = requestedCardKey &&
@@ -301,6 +341,7 @@ function mapRuntimeResponse(current, response) {
         : null;
     const selectedMenuItem = menuItems.find((item) => item.key === selectedCardKey);
     const columns = buildColumns(selectedCard?.columnsConfig ?? selectedCardFromList?.columnsConfig);
+    const rows = toDisplayRows(selectedCard?.items ?? [], columns);
     const kpis = buildKpis(selectedCard?.stats ?? [], selectedMenuItem?.icon ?? null);
     return {
         ...current,
@@ -717,10 +758,14 @@ function mapAllowedOperators(schema) {
 }
 class WorkCenterPage {
     facade = inject(WorkCenterFacade);
+    modal = inject(ModalService);
     area = input('MyInbox', ...(ngDevMode ? [{ debugName: "area" }] : []));
     pageTitle = input('Work Center', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
     menuIcon = input('communication.inbox-01', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
+    openItemsInDrawer = input(true, ...(ngDevMode ? [{ debugName: "openItemsInDrawer" }] : []));
+    itemDrawer = input(null, ...(ngDevMode ? [{ debugName: "itemDrawer" }] : []));
     runtimeFiltersChanged = output();
+    itemClicked = output();
     context = this.facade.context;
     menuItems = this.facade.menuItems;
     rows = this.facade.rows;
@@ -760,6 +805,7 @@ class WorkCenterPage {
             allowedOperators: fallbackOperators,
         };
     }, ...(ngDevMode ? [{ debugName: "propertyFilterSchema" }] : []));
+    defaultDrawerStyleClass = '!w-[96vw] xl:!w-[calc(100%-8rem)] 2xl:!w-[calc(100%-12rem)] !absolute !shadow-none';
     onMenuItemClick(item) {
         this.facade.selectCardAndLoad(this.area(), item.key);
     }
@@ -767,33 +813,476 @@ class WorkCenterPage {
         this.facade.applyTableLazyLoadAndLoad(this.area(), event);
     }
     onRuntimeFiltersApplied(filters) {
-        this.runtimeFiltersChanged.emit(filters.map((filter) => ({
+        const mappedFilters = filters.map((filter) => ({
             field: filter.field,
             op: filter.op,
             value: filter.value,
             values: filter.values,
             from: filter.from,
             to: filter.to,
-        })));
+        }));
+        this.facade.applyRuntimeFiltersAndLoad(this.area(), mappedFilters);
+        this.runtimeFiltersChanged.emit(mappedFilters);
     }
     onRuntimeFiltersCleared() {
+        this.facade.applyRuntimeFiltersAndLoad(this.area(), []);
         this.runtimeFiltersChanged.emit([]);
     }
+    onRowClick(row) {
+        const contextKey = this.resolveRowContextKey(row);
+        console.log('[work-center-debug] page row click', {
+            contextKey,
+            row,
+            openItemsInDrawer: this.openItemsInDrawer(),
+            hasDrawerComponent: !!this.itemDrawer()?.component,
+        });
+        if (!contextKey) {
+            return;
+        }
+        this.itemClicked.emit(contextKey);
+        if (!this.openItemsInDrawer()) {
+            return;
+        }
+        const drawerOptions = this.itemDrawer();
+        if (!drawerOptions?.component) {
+            return;
+        }
+        this.modal.openModal(drawerOptions.component, 'drawer', {
+            header: drawerOptions?.header ?? 'Item Details',
+            styleClass: drawerOptions?.styleClass ?? this.defaultDrawerStyleClass,
+            position: drawerOptions?.position ?? 'end',
+            dismissible: true,
+            modal: true,
+            ...(drawerOptions?.appendTo ? { appendTo: drawerOptions.appendTo } : {}),
+            inputValues: { contextKey },
+        });
+    }
+    rowsClickable = computed(() => this.openItemsInDrawer(), ...(ngDevMode ? [{ debugName: "rowsClickable" }] : []));
+    resolveRowContextKey(row) {
+        const value = row['contextKey'];
+        if (typeof value !== 'string') {
+            return null;
+        }
+        const normalized = value.trim();
+        return normalized.length ? normalized : null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged" }, ngImport: i0, template: "<mt-page [title]=\"pageTitle()\" [avatarIcon]=\"menuIcon()\">\r\n  <div class=\"h-full min-h-0\">\r\n    <mt-client-page\r\n      [menuIcon]=\"menuIcon()\"\r\n      [menuTitle]=\"pageTitle()\"\r\n      [menuItems]=\"menuItems()\"\r\n      [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n      [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n      (menuItemClick)=\"onMenuItemClick($event)\"\r\n    >\r\n      <ng-template #headerClientPageEnd>\r\n        <mt-property-filter-builder\r\n          [schema]=\"propertyFilterSchema()\"\r\n          [filters]=\"context().runtimeFilters\"\r\n          (applied)=\"onRuntimeFiltersApplied($event)\"\r\n          (cleared)=\"onRuntimeFiltersCleared()\"\r\n        />\r\n      </ng-template>\r\n\r\n      <div class=\"flex flex-col gap-4\">\r\n        @if (loading()) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n        } @else if (kpis().length) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (kpi of kpis(); track $index) {\r\n              <mt-statistic-card [data]=\"kpi\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <mt-table\r\n          [data]=\"rows()\"\r\n          [columns]=\"columns()\"\r\n          [lazy]=\"true\"\r\n          [loading]=\"loading()\"\r\n          [lazyTotalRecords]=\"totalCount()\"\r\n          [showFilters]=\"false\"\r\n          [generalSearch]=\"false\"\r\n          [pageSize]=\"context().pageSize\"\r\n          [currentPage]=\"tableCurrentPage()\"\r\n          [first]=\"tableFirst()\"\r\n          (lazyLoad)=\"onLazyLoad($event)\"\r\n        />\r\n      </div>\r\n    </mt-client-page>\r\n  </div>\r\n</mt-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterPage, isStandalone: true, selector: "mt-work-center-page", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, openItemsInDrawer: { classPropertyName: "openItemsInDrawer", publicName: "openItemsInDrawer", isSignal: true, isRequired: false, transformFunction: null }, itemDrawer: { classPropertyName: "itemDrawer", publicName: "itemDrawer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { runtimeFiltersChanged: "runtimeFiltersChanged", itemClicked: "itemClicked" }, ngImport: i0, template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ClientPage, selector: "mt-client-page", inputs: ["menuIcon", "menuTitle", "menuItems", "menuItemsLoading", "activeItem", "collapsed"], outputs: ["collapsedChange", "menuItemClick"] }, { kind: "component", type: PropertyFilterBuilder, selector: "mt-property-filter-builder", inputs: ["schema", "filters", "title", "buttonLabel", "disabled"], outputs: ["filtersChange", "applied", "cleared"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterPage, decorators: [{
             type: Component,
             args: [{ selector: 'mt-work-center-page', standalone: true, imports: [
                         CommonModule,
                         ClientPage,
-                        Page,
                         PropertyFilterBuilder,
                         StatisticCard,
                         Table,
                         SkeletonModule,
-                    ], template: "<mt-page [title]=\"pageTitle()\" [avatarIcon]=\"menuIcon()\">\r\n  <div class=\"h-full min-h-0\">\r\n    <mt-client-page\r\n      [menuIcon]=\"menuIcon()\"\r\n      [menuTitle]=\"pageTitle()\"\r\n      [menuItems]=\"menuItems()\"\r\n      [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n      [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n      (menuItemClick)=\"onMenuItemClick($event)\"\r\n    >\r\n      <ng-template #headerClientPageEnd>\r\n        <mt-property-filter-builder\r\n          [schema]=\"propertyFilterSchema()\"\r\n          [filters]=\"context().runtimeFilters\"\r\n          (applied)=\"onRuntimeFiltersApplied($event)\"\r\n          (cleared)=\"onRuntimeFiltersCleared()\"\r\n        />\r\n      </ng-template>\r\n\r\n      <div class=\"flex flex-col gap-4\">\r\n        @if (loading()) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n        } @else if (kpis().length) {\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n            @for (kpi of kpis(); track $index) {\r\n              <mt-statistic-card [data]=\"kpi\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <mt-table\r\n          [data]=\"rows()\"\r\n          [columns]=\"columns()\"\r\n          [lazy]=\"true\"\r\n          [loading]=\"loading()\"\r\n          [lazyTotalRecords]=\"totalCount()\"\r\n          [showFilters]=\"false\"\r\n          [generalSearch]=\"false\"\r\n          [pageSize]=\"context().pageSize\"\r\n          [currentPage]=\"tableCurrentPage()\"\r\n          [first]=\"tableFirst()\"\r\n          (lazyLoad)=\"onLazyLoad($event)\"\r\n        />\r\n      </div>\r\n    </mt-client-page>\r\n  </div>\r\n</mt-page>\r\n" }]
-        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }] } });
+                    ], template: "<mt-client-page\r\n  [menuIcon]=\"menuIcon()\"\r\n  [menuTitle]=\"pageTitle()\"\r\n  [menuItems]=\"menuItems()\"\r\n  [menuItemsLoading]=\"loading() && !menuItems().length\"\r\n  [activeItem]=\"context().selectedCardKey ?? undefined\"\r\n  (menuItemClick)=\"onMenuItemClick($event)\"\r\n>\r\n  <ng-template #headerClientPageEnd>\r\n    <mt-property-filter-builder\r\n      [schema]=\"propertyFilterSchema()\"\r\n      [filters]=\"context().runtimeFilters\"\r\n      (applied)=\"onRuntimeFiltersApplied($event)\"\r\n      (cleared)=\"onRuntimeFiltersCleared()\"\r\n    />\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (loading()) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (_ of [1, 2, 3, 4, 5]; track $index) {\r\n          <p-skeleton height=\"6.5rem\" borderRadius=\"1rem\" />\r\n        }\r\n      </div>\r\n    } @else if (kpis().length) {\r\n      <div\r\n        class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3\"\r\n      >\r\n        @for (kpi of kpis(); track $index) {\r\n          <mt-statistic-card [data]=\"kpi\" />\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [lazy]=\"true\"\r\n      [clickableRows]=\"rowsClickable()\"\r\n      [loading]=\"loading()\"\r\n      [lazyTotalRecords]=\"totalCount()\"\r\n      [showFilters]=\"false\"\r\n      [generalSearch]=\"false\"\r\n      [pageSize]=\"context().pageSize\"\r\n      [currentPage]=\"tableCurrentPage()\"\r\n      [first]=\"tableFirst()\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n    />\r\n  </div>\r\n</mt-client-page>\r\n" }]
+        }], propDecorators: { area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], openItemsInDrawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemsInDrawer", required: false }] }], itemDrawer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDrawer", required: false }] }], runtimeFiltersChanged: [{ type: i0.Output, args: ["runtimeFiltersChanged"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
+function readItemContext(details) {
+    const item = details.item;
+    if (!item || typeof item !== 'object') {
+        return null;
+    }
+    const context = item['context'];
+    return context && typeof context === 'object'
+        ? context
+        : null;
+}
+function readNumber(source, key) {
+    const value = source?.[key];
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : undefined;
+    }
+    if (typeof value === 'string' && value.trim().length) {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+}
+function readString$1(source, key) {
+    const value = source?.[key];
+    return typeof value === 'string' && value.trim().length ? value : undefined;
+}
+
+class WorkCenterEscalationInstanceType {
+    http = inject(HttpClient);
+    loadSub;
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('escalationDetails', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    tabOptions = [
+        {
+            label: 'Escalation Details',
+            value: 'escalationDetails',
+        },
+        {
+            label: 'Schema',
+            value: 'schema',
+        },
+    ];
+    detailEntities = computed(() => {
+        const preview = this.preview();
+        if (!preview) {
+            return [];
+        }
+        return [
+            {
+                key: 'initiatedBy',
+                name: 'Initiated By',
+                value: mapUserValue(preview.initiatedBy),
+                viewType: 'User',
+                order: 1,
+                configuration: { size: 12 },
+            },
+            {
+                key: 'startedAt',
+                name: 'Started At',
+                value: resolveDisplayValue(preview.startedAt),
+                rawValue: resolveRawValue(preview.startedAt),
+                viewType: 'DateTime',
+                order: 2,
+                configuration: { size: 12 },
+            },
+            {
+                key: 'reason',
+                name: 'Reason',
+                value: preview.reason ?? '',
+                viewType: 'LongText',
+                order: 3,
+                configuration: { size: 24 },
+            },
+            {
+                key: 'attachments',
+                name: 'Attachments',
+                value: mapAttachments(preview.attachments),
+                viewType: 'Attachment',
+                order: 4,
+                configuration: { size: 24 },
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "detailEntities" }] : []));
+    schemaNodes = computed(() => resolveSchemaSteps(this.preview()).map((step) => ({
+        id: String(step.id),
+        name: resolveTranslatable(step.name) || `Step ${step.id}`,
+        color: step.isFinal ? '#059669' : step.isInitial ? '#2563eb' : '#0f172a',
+    })), ...(ngDevMode ? [{ debugName: "schemaNodes" }] : []));
+    schemaConnections = computed(() => (this.preview()?.schema?.connections ?? []).map((connection, index) => ({
+        id: String(connection.id ?? `${connection.source}-${connection.target}-${index}`),
+        from: String(connection.source),
+        to: String(connection.target),
+    })), ...(ngDevMode ? [{ debugName: "schemaConnections" }] : []));
+    hasSchema = computed(() => this.schemaNodes().length > 0, ...(ngDevMode ? [{ debugName: "hasSchema" }] : []));
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    instanceId = computed(() => readNumber(this.itemContext(), 'escalationInstanceId') ??
+        readNumber(this.itemContext(), 'instanceId'), ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
+    resolvedInstanceId = computed(() => this.instanceId() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedInstanceId" }] : []));
+    canRenderDetails = computed(() => this.resolvedInstanceId() > 0, ...(ngDevMode ? [{ debugName: "canRenderDetails" }] : []));
+    constructor() {
+        effect(() => {
+            const instanceId = this.resolvedInstanceId();
+            if (instanceId > 0) {
+                untracked(() => this.loadPreview(instanceId));
+                return;
+            }
+            this.preview.set(null);
+            this.error.set(null);
+        });
+    }
+    ngOnDestroy() {
+        this.loadSub?.unsubscribe();
+    }
+    loadPreview(instanceId) {
+        this.loadSub?.unsubscribe();
+        this.loading.set(true);
+        this.error.set(null);
+        this.loadSub = this.http
+            .get(`escalations/${instanceId}/preview`)
+            .subscribe({
+            next: (response) => {
+                this.loading.set(false);
+                this.preview.set(response.data ?? null);
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.preview.set(null);
+                this.error.set(error?.error?.message ??
+                    error?.message ??
+                    'Failed to load escalation preview');
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterEscalationInstanceType, isStandalone: true, selector: "mt-work-center-escalation-instance-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities"] }, { kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterEscalationInstanceType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-escalation-instance-type', standalone: true, imports: [CommonModule, Tabs, EntitiesPreview, StructureBuilder], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'escalationDetails'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation details...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (preview()) {\n        <mt-entities-preview [entities]=\"detailEntities()\" />\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation details context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'schema'\">\n    @if (canRenderDetails()) {\n      @if (loading()) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Loading escalation schema...\n          </p>\n        </div>\n      } @else if (error(); as error) {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-red-300 bg-red-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-red-600\">\n            {{ error }}\n          </p>\n        </div>\n      } @else if (hasSchema()) {\n        <div class=\"h-[70vh] overflow-hidden rounded-2xl\">\n          <mt-structure-builder\n            class=\"h-full\"\n            [readonly]=\"true\"\n            [nodes]=\"schemaNodes()\"\n            [connections]=\"schemaConnections()\"\n          />\n        </div>\n      } @else {\n        <div\n          class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n        >\n          <p class=\"max-w-md text-center text-sm text-surface-500\">\n            Escalation schema is not available for this item yet.\n          </p>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Escalation schema context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+function mapUserValue(value) {
+    if (!value || typeof value !== 'object') {
+        return {
+            displayName: '',
+            userName: '',
+        };
+    }
+    return {
+        id: readString(value, 'id'),
+        userName: readString(value, 'userName'),
+        displayName: readString(value, 'displayName') ??
+            readString(value, 'fullName') ??
+            readString(value, 'userName') ??
+            '',
+        photoUrl: readString(value, 'photoUrl'),
+        phoneNumber: readString(value, 'phoneNumber') ?? readString(value, 'mobileNumber'),
+        email: readString(value, 'email') ?? readString(value, 'emailAddress'),
+    };
+}
+function mapAttachments(attachments) {
+    return (attachments ?? []).map((attachment) => ({
+        id: attachment.id,
+        name: attachment.name,
+        fileName: attachment.fileName,
+        contentType: attachment.contentType,
+        extension: attachment.extension,
+        size: attachment.size,
+    }));
+}
+function resolveSchemaSteps(preview) {
+    return preview?.schema?.stepsSchema ?? preview?.schemaSteps ?? [];
+}
+function resolveTranslatable(value) {
+    if (!value || typeof value !== 'object') {
+        return '';
+    }
+    return value.display ?? value.en ?? value.ar ?? '';
+}
+function resolveDisplayValue(value) {
+    if (!value || typeof value !== 'object') {
+        return typeof value === 'string' ? value : '';
+    }
+    return (readString(value, 'displayValue') ??
+        readString(value, 'display') ??
+        readString(value, 'actualValue') ??
+        '');
+}
+function resolveRawValue(value) {
+    if (!value || typeof value !== 'object') {
+        return typeof value === 'string' ? value : undefined;
+    }
+    return (readString(value, 'actualValue') ??
+        readString(value, 'displayValue') ??
+        undefined);
+}
+function readString(value, key) {
+    if (!value || typeof value !== 'object') {
+        return undefined;
+    }
+    const result = value[key];
+    return typeof result === 'string' && result.length ? result : undefined;
+}
+
+class WorkCenterProcessRequestType {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: WorkCenterProcessRequestType, isStandalone: true, selector: "mt-work-center-process-request-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n  <p class=\"text-sm text-surface-500\">\n    Process request content will be added here.\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessRequestType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-request-type', standalone: true, imports: [CommonModule], template: "<div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n  <p class=\"text-sm text-surface-500\">\n    Process request content will be added here.\n  </p>\n</div>\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterProcessStepType {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    activeTab = signal('processForm', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tabOptions = [
+        {
+            label: 'Process Form',
+            value: 'processForm',
+        },
+        {
+            label: 'Module Preview',
+            value: 'modulePreview',
+        },
+    ];
+    itemContext = computed(() => readItemContext(this.details()), ...(ngDevMode ? [{ debugName: "itemContext" }] : []));
+    moduleKey = computed(() => readString$1(this.itemContext(), 'moduleKey') ?? '', ...(ngDevMode ? [{ debugName: "moduleKey" }] : []));
+    operationKey = computed(() => readString$1(this.itemContext(), 'operationKey') ?? '', ...(ngDevMode ? [{ debugName: "operationKey" }] : []));
+    moduleId = computed(() => readNumber(this.itemContext(), 'moduleId'), ...(ngDevMode ? [{ debugName: "moduleId" }] : []));
+    levelId = computed(() => readNumber(this.itemContext(), 'levelId'), ...(ngDevMode ? [{ debugName: "levelId" }] : []));
+    levelDataId = computed(() => readNumber(this.itemContext(), 'levelDataId'), ...(ngDevMode ? [{ debugName: "levelDataId" }] : []));
+    moduleDataId = computed(() => readNumber(this.itemContext(), 'moduleDataId'), ...(ngDevMode ? [{ debugName: "moduleDataId" }] : []));
+    requestSchemaId = computed(() => readNumber(this.itemContext(), 'requestSchemaId'), ...(ngDevMode ? [{ debugName: "requestSchemaId" }] : []));
+    draftProcessId = computed(() => readNumber(this.itemContext(), 'draftProcessId') ??
+        readNumber(this.itemContext(), 'requestId'), ...(ngDevMode ? [{ debugName: "draftProcessId" }] : []));
+    canRenderForm = computed(() => !!this.moduleKey() && !!this.operationKey(), ...(ngDevMode ? [{ debugName: "canRenderForm" }] : []));
+    canRenderPreview = computed(() => !!this.moduleKey() && !!this.operationKey(), ...(ngDevMode ? [{ debugName: "canRenderPreview" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterProcessStepType, isStandalone: true, selector: "mt-work-center-process-step-type", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'processForm'\">\n    @if (canRenderForm()) {\n      <mt-client-form\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [renderMode]=\"'steps'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process form context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'modulePreview'\">\n    @if (canRenderPreview()) {\n      <mt-client-module-preview\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [formMode]=\"'edit'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Module preview context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "lang", "lookups"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected"] }, { kind: "component", type: ClientModulePreview, selector: "mt-client-module-preview", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "autoLoad", "lang", "formMode"], outputs: ["loaded", "errored"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterProcessStepType, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-process-step-type', standalone: true, imports: [CommonModule, Tabs, ClientForm, ClientModulePreview], template: "<div class=\"mt-modal-content flex h-full flex-col gap-4 p-4\">\n  <mt-tabs [(active)]=\"activeTab\" [options]=\"tabOptions\" />\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'processForm'\">\n    @if (canRenderForm()) {\n      <mt-client-form\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [renderMode]=\"'steps'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Process form context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n\n  <div class=\"flex-1\" [hidden]=\"activeTab() !== 'modulePreview'\">\n    @if (canRenderPreview()) {\n      <mt-client-module-preview\n        [moduleKey]=\"moduleKey()\"\n        [operationKey]=\"operationKey()\"\n        [moduleId]=\"moduleId()\"\n        [levelId]=\"levelId()\"\n        [levelDataId]=\"levelDataId()\"\n        [moduleDataId]=\"moduleDataId()\"\n        [requestSchemaId]=\"requestSchemaId()\"\n        [draftProcessId]=\"draftProcessId()\"\n        [formMode]=\"'edit'\"\n      />\n    } @else {\n      <div\n        class=\"flex min-h-[22rem] items-center justify-center rounded-2xl border border-dashed border-surface-300 bg-surface-50 p-6\"\n      >\n        <p class=\"max-w-md text-center text-sm text-surface-500\">\n          Module preview context is not available for this item yet.\n        </p>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterItemDrawer {
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemDrawer, isStandalone: true, selector: "mt-work-center-item-drawer", inputs: { details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (details().type === 'ProcessStep') {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === 'ProcessRequest') {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === 'EscalationInstance') {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WorkCenterProcessStepType, selector: "mt-work-center-process-step-type", inputs: ["details"] }, { kind: "component", type: WorkCenterProcessRequestType, selector: "mt-work-center-process-request-type", inputs: ["details"] }, { kind: "component", type: WorkCenterEscalationInstanceType, selector: "mt-work-center-escalation-instance-type", inputs: ["details"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-drawer', standalone: true, imports: [
+                        CommonModule,
+                        WorkCenterProcessStepType,
+                        WorkCenterProcessRequestType,
+                        WorkCenterEscalationInstanceType,
+                    ], template: "@if (details().type === 'ProcessStep') {\n  <mt-work-center-process-step-type [details]=\"details()\" />\n} @else if (details().type === 'ProcessRequest') {\n  <mt-work-center-process-request-type [details]=\"details()\" />\n} @else if (details().type === 'EscalationInstance') {\n  <mt-work-center-escalation-instance-type [details]=\"details()\" />\n} @else {\n  <div class=\"mt-modal-content flex h-full items-center justify-center p-4\">\n    <p class=\"text-sm text-surface-500\">This item type is not supported yet.</p>\n  </div>\n}\n" }]
+        }], propDecorators: { details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: true }] }] } });
+
+class WorkCenterItemDrawerRoute {
+    http = inject(HttpClient);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    contextKey = input(null, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    drawerVisible = signal(true, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    details = signal(null, ...(ngDevMode ? [{ debugName: "details" }] : []));
+    resolvedContextKey = computed(() => this.decodeContextKey(this.contextKey()), ...(ngDevMode ? [{ debugName: "resolvedContextKey" }] : []));
+    drawerTitle = computed(() => this.readDisplayField(this.details()?.item, 'title') ?? 'Item Details', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
+    drawerSubtitle = computed(() => this.readDisplayField(this.details()?.item, 'subtitle') ?? '', ...(ngDevMode ? [{ debugName: "drawerSubtitle" }] : []));
+    constructor() {
+        effect(() => {
+            console.log('[work-center-debug] drawer route state', {
+                rawContextKey: this.contextKey(),
+                resolvedContextKey: this.resolvedContextKey(),
+                visible: this.drawerVisible(),
+                loading: this.loading(),
+                hasDetails: !!this.details(),
+                error: this.error(),
+                currentUrl: this.router.url,
+                outlet: this.route.outlet,
+            });
+        });
+        effect((onCleanup) => {
+            const contextKey = this.resolvedContextKey();
+            console.log('[work-center-debug] drawer route load effect', {
+                contextKey,
+            });
+            this.error.set(null);
+            this.details.set(null);
+            if (!contextKey) {
+                this.loading.set(false);
+                console.log('[work-center-debug] drawer route load skipped, no context key');
+                return;
+            }
+            this.loading.set(true);
+            console.log('[work-center-debug] drawer route fetch start', {
+                endpoint: 'workcenter/runtime/item-basic-info',
+                contextKey,
+            });
+            const subscription = this.http
+                .get('workcenter/runtime/item-basic-info', {
+                params: { contextKey },
+            })
+                .pipe(map((response) => {
+                if (response.code === 1) {
+                    return response.data;
+                }
+                throw new Error(this.resolveErrorMessage(response));
+            }))
+                .subscribe({
+                next: (details) => {
+                    console.log('[work-center-debug] drawer route fetch success', {
+                        contextKey,
+                        details,
+                    });
+                    this.details.set(details);
+                    this.loading.set(false);
+                },
+                error: (error) => {
+                    console.error('[work-center-debug] drawer route fetch failed', {
+                        contextKey,
+                        error,
+                    });
+                    this.error.set(error instanceof Error
+                        ? error.message
+                        : 'Failed to load item details.');
+                    this.loading.set(false);
+                },
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    async onVisibleChange(visible) {
+        this.drawerVisible.set(visible);
+        console.log('[work-center-debug] drawer visible change', { visible });
+        if (visible) {
+            return;
+        }
+        await this.closeDrawer();
+    }
+    closeDrawer() {
+        console.log('[work-center-debug] drawer closing', {
+            outlet: this.route.outlet || 'sidebar',
+            parentUrl: this.route.parent?.snapshot.url.map((segment) => segment.path),
+        });
+        return this.router
+            .navigate([{ outlets: { [this.route.outlet || 'sidebar']: null } }], {
+            relativeTo: this.route.parent,
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .then((success) => {
+            console.log('[work-center-debug] drawer close navigate result', {
+                success,
+                currentUrl: this.router.url,
+            });
+            return success;
+        });
+    }
+    decodeContextKey(value) {
+        if (!value) {
+            return null;
+        }
+        try {
+            return decodeURIComponent(value);
+        }
+        catch {
+            return value;
+        }
+    }
+    resolveErrorMessage(response) {
+        const fallbackError = 'Failed to load item details.';
+        return (response.errors?.message ??
+            response.message ??
+            fallbackError);
+    }
+    readDisplayField(item, key) {
+        const field = item?.[key];
+        if (typeof field === 'string' && field.trim().length) {
+            return field;
+        }
+        if (!field || typeof field !== 'object') {
+            return null;
+        }
+        const display = field.display;
+        return typeof display === 'string' && display.trim().length
+            ? display
+            : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawerRoute, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkCenterItemDrawerRoute, isStandalone: true, selector: "mt-work-center-item-drawer-route", inputs: { contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  [appendTo]=\"'system-content'\"\r\n  styleClass=\"!w-[84%] !absolute !shadow-none\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <mt-work-center-item-drawer [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</mt-drawer>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WorkCenterItemDrawer, selector: "mt-work-center-item-drawer", inputs: ["details"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkCenterItemDrawerRoute, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-work-center-item-drawer-route', standalone: true, imports: [CommonModule, Drawer, SkeletonModule, WorkCenterItemDrawer], template: "<mt-drawer\r\n  [visible]=\"drawerVisible()\"\r\n  [loadingHeader]=\"loading()\"\r\n  [title]=\"drawerTitle()\"\r\n  [subtitle]=\"drawerSubtitle()\"\r\n  [appendTo]=\"'system-content'\"\r\n  styleClass=\"!w-[84%] !absolute !shadow-none\"\r\n  position=\"right\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n>\r\n  <ng-container content>\r\n    @if (loading()) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] flex-col gap-5\">\r\n          <div class=\"flex items-center gap-3\">\r\n            <p-skeleton shape=\"circle\" size=\"3rem\" />\r\n            <div class=\"flex flex-1 flex-col gap-2\">\r\n              <p-skeleton width=\"12rem\" height=\"1rem\" />\r\n              <p-skeleton width=\"8rem\" height=\"0.875rem\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid gap-3 md:grid-cols-2\">\r\n            @for (_ of [1, 2, 3, 4]; track $index) {\r\n              <p-skeleton height=\"5rem\" borderRadius=\"1rem\" />\r\n            }\r\n          </div>\r\n\r\n          <p-skeleton height=\"16rem\" borderRadius=\"1rem\" />\r\n        </div>\r\n      </div>\r\n    } @else if (error(); as errorMessage) {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"max-w-xl text-sm font-medium text-red-600\">\r\n            {{ errorMessage }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    } @else if (details(); as details) {\r\n      <mt-work-center-item-drawer [details]=\"details\" />\r\n    } @else {\r\n      <div class=\"mt-modal-content p-4\">\r\n        <div class=\"flex min-h-[22rem] items-center justify-center\">\r\n          <p class=\"text-sm font-medium text-surface-500\">No item selected.</p>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-container>\r\n</mt-drawer>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: false }] }] } });
 
 const APP_STATES = [WorkCenterState];
 
@@ -801,5 +1290,5 @@ const APP_STATES = [WorkCenterState];
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterPage, WorkCenterState };
+export { APP_STATES, EnterArea, HydrateFromContext, LoadRuntime, SetParams, WORK_CENTER_MAX_FILTERS, WORK_CENTER_MAX_PAGE_SIZE, WORK_CENTER_MAX_SORT, WORK_CENTER_QUERY_VERSION, WorkCenterActionKey, WorkCenterFacade, WorkCenterItemDrawer, WorkCenterItemDrawerRoute, WorkCenterPage, WorkCenterState };
 //# sourceMappingURL=masterteam-work-center.mjs.map