cloud-ide-shared 1.0.74 → 1.0.76

package/fesm2022/cloud-ide-shared.mjs

@@ -997,7 +997,7 @@ class CideSharedOrgStructureComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-auto !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [class.level-5]=\"level === 5\"\n      (click)=\"viewEntity(node._id)\">\n\n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div\n          class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3\n            class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\"\n            [cideEleTooltip]=\"node.syen_name || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n\n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Icons (unchanged) -->\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow:auto;height:100%;position:relative;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem;margin:0 auto;display:block}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSharedOrgStructureComponent, isStandalone: true, selector: "cide-shared-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-auto !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [class.level-5]=\"level === 5\"\n      (click)=\"viewEntity(node._id)\">\n\n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div\n          class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3\n            class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\"\n            [cideEleTooltip]=\"node.syen_name || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n\n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Icons (unchanged) -->\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow:auto;height:100%;position:relative;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem;margin:0 auto;display:block}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSharedOrgStructureComponent, decorators: [{
             type: Component,
@@ -1007,7 +1007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CideIconComponent,
                         CideSpinnerComponent,
                         TooltipDirective
-                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-auto !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [class.level-5]=\"level === 5\"\n      (click)=\"viewEntity(node._id)\">\n\n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div\n          class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3\n            class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\"\n            [cideEleTooltip]=\"node.syen_name || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n\n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Icons (unchanged) -->\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow:auto;height:100%;position:relative;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem;margin:0 auto;display:block}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"] }]
+                    ], template: "<!-- Organization Structure Component -->\n<div class=\"tw-flex-1 tw-overflow-auto !tw-h-full\">\n  @if (loading()) {\n  <div class=\"tw-flex tw-items-center !tw-h-full tw-justify-center tw-py-12\">\n    <cide-ele-spinner size=\"md\"></cide-ele-spinner>\n    <span class=\"tw-ml-3 tw-text-gray-600 tw-text-sm\">Loading organization structure...</span>\n  </div>\n  } @else if (error()) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-red-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-red-500\">error</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">Error Loading Structure</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">{{ error() }}</p>\n    <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"loadOrgStructure()\">\n      <cide-ele-icon>refresh</cide-ele-icon>\n      Try Again\n    </button>\n  </div>\n  } @else if (orgStructure().length === 0) {\n  <div class=\"tw-text-center tw-py-12\">\n    <div\n      class=\"tw-w-16 tw-h-16 tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4\">\n      <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">account_tree</cide-ele-icon>\n    </div>\n    <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-2\">No Entities Found</h3>\n    <p class=\"tw-text-gray-600 tw-mb-4\">No entities are available to display in the organization structure.</p>\n    @if (mode() === 'view') {\n    <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"router.navigate(['/control-panel/entity-list'])\">\n      <cide-ele-icon>add</cide-ele-icon>\n      Create First Entity\n    </button>\n    }\n  </div>\n  } @else {\n  <!-- Organization Chart Container -->\n  <div class=\"tw-relative tw-h-full tw-bg-gray-50 tw-py-8 org-chart-container\">\n    <!-- Chart Content with Background Pattern -->\n    <div class=\"tw-relative tw-z-10 tw-min-w-max tw-px-4 org-chart-content org-chart-content-with-bg\">\n      <div class=\"tree\">\n        @for (rootNode of orgStructure(); track rootNode._id) {\n        <!-- Root nodes don't need top lines, but using wrapper is fine as they are not inside .tree-children -->\n        <div class=\"tree-node-wrapper tw-mb-12\">\n          <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: rootNode, level: 0 }\"></ng-container>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Entity Node Template (Recursive) -->\n<ng-template #entityNodeTemplate let-node let-level=\"level\">\n  <div class=\"tree-node-content\">\n\n    <!-- Entity Card -->\n    <div class=\"tw-bg-white tw-shadow-lg tw-rounded-lg tw-p-4 entity-card tw-border-t-4 tw-cursor-pointer\"\n      [class.level-0]=\"level === 0\" [class.level-1]=\"level === 1\" [class.level-2]=\"level === 2\"\n      [class.level-3]=\"level === 3\" [class.level-4]=\"level === 4\" [class.level-5]=\"level === 5\"\n      (click)=\"viewEntity(node._id)\">\n\n      <!-- Card Content -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Avatar -->\n        <div\n          class=\"tw-w-12 tw-h-12 tw-bg-purple-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n          <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-purple-600\">person</cide-ele-icon>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex-1 tw-min-w-0\">\n          <h3\n            class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\"\n            [cideEleTooltip]=\"node.syen_name || ''\" [tooltipPlacement]=\"'top'\" [tooltipType]=\"'default'\">{{\n            node.syen_name }}</h3>\n          <p class=\"tw-text-xs tw-text-gray-600 tw-mt-1\">{{ node.syen_entity_code }}</p>\n          <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ node.syen_entity_type_sygms }}</p>\n        </div>\n      </div>\n\n      <!-- Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-3\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <!-- Icons (unchanged) -->\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">phone</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">email</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-600 hover:tw-bg-blue-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">attach_money</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">description</cide-ele-icon>\n          </button>\n          <button\n            class=\"tw-w-6 tw-h-6 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-600 hover:tw-bg-gray-200 tw-transition-colors\">\n            <cide-ele-icon class=\"tw-text-xs\">more_horiz</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Status Badge -->\n        <div class=\"tw-flex-shrink-0\">\n          @if (node.syen_isactive) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-green-500 tw-rounded-full tw-mr-1\"></div>\n            Active\n          </div>\n          } @else {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n            <div class=\"tw-w-1.5 tw-h-1.5 tw-bg-red-500 tw-rounded-full tw-mr-1\"></div>\n            Inactive\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Connector line extending downwards from parent -->\n    @if (node.children && node.children.length > 0) {\n    <div class=\"min-h-connector\"></div>\n    }\n  </div>\n\n  <!-- Recursive Children Container -->\n  @if (node.children && node.children.length > 0) {\n  <div class=\"tree-children\">\n    @for (child of node.children; track child._id) {\n    <div class=\"tree-node-wrapper\">\n      <ng-container [ngTemplateOutlet]=\"entityNodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"></ng-container>\n    </div>\n    }\n  </div>\n  }\n</ng-template>", styles: [".org-chart-container{overflow:auto;height:100%;position:relative;padding-top:2rem}.org-chart-content{min-width:max-content;min-height:max-content;padding:0 1rem 4rem;margin:0 auto;display:block}.org-chart-content-with-bg{position:relative}.org-chart-content-with-bg:before{content:\"\";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:radial-gradient(circle,#e5e7eb 1px,transparent 1px);background-size:20px 20px;background-repeat:repeat;z-index:-1}.tree{display:flex;flex-direction:column;align-items:center}.tree-children{display:flex;flex-direction:row;justify-content:center;position:relative}.tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 1rem 0}.tree-node-wrapper:before{content:\"\";position:absolute;top:0;left:50%;border-left:2px solid #9333ea;width:0;height:20px;z-index:1}.tree-node-wrapper:after{content:\"\";position:absolute;top:0;right:50%;border-top:2px solid #9333ea;width:50%;height:20px;z-index:0}.tree-children>.tree-node-wrapper:before{height:20px}.tree-children>.tree-node-wrapper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:20px;border-top:2px solid #9333ea;border-left:0;right:auto}.tree-children>.tree-node-wrapper:first-child:after{left:50%;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:last-child:after{left:0;width:50%;border-top:2px solid #9333ea}.tree-children>.tree-node-wrapper:only-child:after{display:none}.tree-children>.tree-node-wrapper:only-child:before{height:20px}.tree-node-content{position:relative;z-index:2;margin-bottom:0}.min-h-connector{height:20px;width:2px;background-color:#9333ea;margin:0 auto}.entity-card{width:18rem;transition:all .2s ease-in-out;flex-shrink:0}.entity-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.connection-dot{width:6px;height:6px;background-color:#9333ea;border-radius:50%;position:absolute;top:-3px;left:50%;transform:translate(-50%);z-index:5}@media (max-width: 1400px){.entity-card{width:16rem}}@media (max-width: 1200px){.entity-card{width:14rem}}@media (max-width: 992px){.entity-card{width:13rem}}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.org-chart-container::-webkit-scrollbar{height:8px;width:8px}.org-chart-container::-webkit-scrollbar-track{background:#f1f5f9}.org-chart-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.org-chart-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}\n"] }]
         }], propDecorators: { allowSwitching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSwitching", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], entityView: [{ type: i0.Output, args: ["entityView"] }] } });
 
 class CideSharedProgramSectionSelectorComponent {
@@ -1500,13 +1500,39 @@ class CideSharedProgramSectionSelectorComponent {
             setTimeout(() => clearInterval(branchCheckInterval), 5000);
         }
         else {
-            // If no branch dropdown but term dropdown should be shown, load terms directly
-            if (this.showTermDropdown()) {
+            // Extract config to check for one-to-one term relationship
+            const selectedProgram = this.selectedClassProgram();
+            const generalMaster = selectedProgram?.acacpm_class_program_id_sygms || selectedProgram?.acacpm_class_program_id_sygmt;
+            let config;
+            if (generalMaster && typeof generalMaster === 'object' && 'sygms_configuration' in generalMaster) {
+                const configValue = generalMaster.sygms_configuration;
+                if (typeof configValue === 'string') {
+                    try {
+                        config = JSON.parse(configValue);
+                    }
+                    catch { }
+                }
+                else if (typeof configValue === 'object' && configValue !== null) {
+                    config = configValue;
+                }
+            }
+            // Check if one-to-one term (dropdown hidden but term exists)
+            const isOneToOneTerm = config?.termType === true && config?.termLevelUpTo === 1 && config?.termProgramLevelOneConnected === true;
+            // Load terms if dropdown shown OR one-to-one relationship
+            if (this.showTermDropdown() || isOneToOneTerm) {
+                console.log('📚 Loading terms - dropdown:', this.showTermDropdown(), 'oneToOne:', isOneToOneTerm);
                 this.loadClassProgramTerms(classProgramId, undefined);
-                // After terms load, check if current term value is valid
+                // After terms load, auto-select if one-to-one OR validate if dropdown shown
                 const termCheckInterval = setInterval(() => {
                     if (!this.classProgramTermsLoading()) {
                         clearInterval(termCheckInterval);
+                        if (isOneToOneTerm && this.classProgramTerms().length > 0) {
+                            // One-to-one: Auto-select the first term
+                            const firstTerm = this.classProgramTerms()[0];
+                            console.log('🎯 Auto-selecting one-to-one term:', firstTerm);
+                            form.patchValue({ [this.termControlName()]: firstTerm.value }, { emitEvent: true });
+                            return; // Exit early, onTermChange will load sections
+                        }
                         // Check if current term value exists in loaded terms
                         const termExists = currentTermId &&
                             this.classProgramTerms().some(t => t.value === currentTermId);
@@ -1676,6 +1702,7 @@ class CideSharedProgramSectionSelectorComponent {
         }
     }
     loadProgramTermSections(termId) {
+        console.log('🔍 loadProgramTermSections called with termId:', termId);
         this.programTermSectionsLoading.set(true);
         const payload = new MPrgTrmSection({
             acapts_parent_class_prog_term_acapt: termId,
@@ -1695,12 +1722,16 @@ class CideSharedProgramSectionSelectorComponent {
             academicsRoutesUrl.programTermSection,
             query
         ]);
+        console.log('📡 Fetching sections from URL:', url);
+        console.log('📦 Payload:', payload);
         this.http.get(url)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
+                console.log('✅ Section API response:', response);
                 if (response?.success && response?.data) {
                     const sections = Array.isArray(response.data) ? response.data : [];
+                    console.log(`📊 Found ${sections.length} sections:`, sections);
                     const hasSections = sections.length > 0;
                     this.hasSections.set(hasSections);
                     if (hasSections) {
@@ -1708,6 +1739,7 @@ class CideSharedProgramSectionSelectorComponent {
                             value: section._id || '',
                             label: section.acapts_name || section.acapts_code || ''
                         })));
+                        console.log('✅ Section dropdown will be shown. hasSections =', hasSections);
                         const form = this.formGroup();
                         const sectionControl = form?.get(this.sectionControlName());
                         if (sectionControl) {
@@ -1716,6 +1748,7 @@ class CideSharedProgramSectionSelectorComponent {
                         }
                     }
                     else {
+                        console.warn('⚠️ No sections found! Section dropdown will be hidden.');
                         this.programTermSections.set([]);
                         const form = this.formGroup();
                         const sectionControl = form?.get(this.sectionControlName());