@memberjunction/ng-dashboards 2.128.0 → 2.129.0

package/dist/Credentials/components/credentials-overview-resource.component.js

@@ -0,0 +1,936 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { RunView, Metadata, CompositeKey } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-shared-generic";
+function CredentialsOverviewResourceComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 3);
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_button_10_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "New Credential");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_span_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.expiredCredentials, " expired ");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_span_24_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 66);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_span_24_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.expiringSoonCount, " expiring soon ");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_span_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 67);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵtext(2, " All credentials healthy ");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_83__svg_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "circle", 79);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_83__svg_ng_container_4_Template_circle_click_1_listener() { const stat_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r6)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const stat_r6 = ctx.$implicit;
+    const i_r7 = ctx.index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("stroke", stat_r6.color)("stroke-dasharray", stat_r6.percentage * 2.51 + " " + (251 - stat_r6.percentage * 2.51))("stroke-dashoffset", ctx_r1.getDonutOffset(i_r7));
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_83_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 80);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_83_div_11_Template_div_click_0_listener() { const stat_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick(stat_r9)); });
+    i0.ɵɵelement(1, "div", 81);
+    i0.ɵɵelementStart(2, "div", 82)(3, "div", 83);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 84);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(8, "i", 85);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const stat_r9 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", stat_r9.color);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(stat_r9.iconClass);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", stat_r9.category, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", stat_r9.count, " (", stat_r9.percentage, "%)");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_83_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69)(1, "div", 70);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 71);
+    i0.ɵɵelement(3, "circle", 72);
+    i0.ɵɵtemplate(4, CredentialsOverviewResourceComponent_ng_container_2_div_83__svg_ng_container_4_Template, 2, 3, "ng-container", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(5, "div", 74)(6, "div", 75);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 76);
+    i0.ɵɵtext(9, "Total");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 77);
+    i0.ɵɵtemplate(11, CredentialsOverviewResourceComponent_ng_container_2_div_83_div_11_Template, 9, 7, "div", 78);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.categoryStats);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.totalCredentials);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.categoryStats);
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_84_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No credentials configured");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_span_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 103);
+    i0.ɵɵelement(1, "i", 104);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", type_r11.activeCount, " ");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 105);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", type_r11.expiringCount, " ");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_Template_div_click_0_listener() { const type_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTypeClick(type_r11)); });
+    i0.ɵɵelementStart(1, "div", 91)(2, "div", 92);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 93);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 94)(7, "div", 95)(8, "span", 96);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 97);
+    i0.ɵɵtext(11, "credentials");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 98);
+    i0.ɵɵelement(13, "div", 99);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 100);
+    i0.ɵɵtemplate(15, CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_span_15_Template, 3, 1, "span", 101)(16, CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_span_16_Template, 3, 1, "span", 102);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const type_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(type_r11.typeName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(type_r11.category);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(type_r11.credentialCount);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("width", ctx_r1.totalCredentials > 0 ? type_r11.credentialCount / ctx_r1.totalCredentials * 100 : 0, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", type_r11.activeCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", type_r11.expiringCount > 0);
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_95_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵtemplate(1, CredentialsOverviewResourceComponent_ng_container_2_div_95_div_1_Template, 17, 7, "div", 89);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.typeStats.slice(0, 6));
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_96_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No credential types configured");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_107_div_1_span_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 118);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const activity_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("by ", activity_r13.user, "");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_107_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_107_div_1_Template_div_click_0_listener() { const activity_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActivityClick(activity_r13)); });
+    i0.ɵɵelementStart(1, "div", 110);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 111)(4, "div", 112);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 113)(7, "span", 114);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 115);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(11, CredentialsOverviewResourceComponent_ng_container_2_div_107_div_1_span_11_Template, 2, 1, "span", 116);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 117);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activity_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getActionClass(activity_r13.action));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getActionIcon(activity_r13.action));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(activity_r13.credentialName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(activity_r13.typeName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(activity_r13.action);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", activity_r13.user);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(activity_r13.date), " ");
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_107_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵtemplate(1, CredentialsOverviewResourceComponent_ng_container_2_div_107_div_1_Template, 14, 8, "div", 108);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.recentActivity);
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_108_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "i", 119);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No recent activity");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_div_109_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120)(1, "div", 121);
+    i0.ɵɵtext(2, "Quick Actions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 122)(4, "button", 123);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_109_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(5, "i", 63);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Add Credential");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "button", 123);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_109_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
+    i0.ɵɵelement(9, "i", 106);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11, "Manage Types");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "button", 123);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_109_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAllCategories()); });
+    i0.ɵɵelement(13, "i", 124);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15, "Categories");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "button", 123);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_div_109_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
+    i0.ɵɵelement(17, "i", 125);
+    i0.ɵɵelementStart(18, "span");
+    i0.ɵɵtext(19, "Audit Log");
+    i0.ɵɵelementEnd()()()();
+} }
+function CredentialsOverviewResourceComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 4)(2, "div", 5)(3, "h2", 6);
+    i0.ɵɵtext(4, "Credential Overview");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 7);
+    i0.ɵɵtext(6, "Monitor and manage your organization's credentials");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 8)(8, "button", 9);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
+    i0.ɵɵelement(9, "i", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(10, CredentialsOverviewResourceComponent_ng_container_2_button_10_Template, 4, 0, "button", 11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 12)(12, "div", 13)(13, "div", 14);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(14, "svg", 15);
+    i0.ɵɵelement(15, "path", 16)(16, "path", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(17, "div", 18);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 19)(20, "div", 20);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 21);
+    i0.ɵɵtemplate(23, CredentialsOverviewResourceComponent_ng_container_2_span_23_Template, 3, 1, "span", 22)(24, CredentialsOverviewResourceComponent_ng_container_2_span_24_Template, 3, 1, "span", 23)(25, CredentialsOverviewResourceComponent_ng_container_2_span_25_Template, 3, 0, "span", 24);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(26, "div", 25)(27, "div", 26);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_div_click_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
+    i0.ɵɵelementStart(28, "div", 27);
+    i0.ɵɵelement(29, "i", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "div", 29)(31, "div", 30);
+    i0.ɵɵtext(32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "div", 31);
+    i0.ɵɵtext(34, "Total Credentials");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(35, "div", 32);
+    i0.ɵɵelement(36, "i", 33);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 34);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllCredentials()); });
+    i0.ɵɵelementStart(38, "div", 27);
+    i0.ɵɵelement(39, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "div", 29)(41, "div", 30);
+    i0.ɵɵtext(42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(43, "div", 31);
+    i0.ɵɵtext(44, "Active");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "div", 36)(46, "span", 37);
+    i0.ɵɵtext(47);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(48, "div", 38)(49, "div", 27);
+    i0.ɵɵelement(50, "i", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(51, "div", 29)(52, "div", 30);
+    i0.ɵɵtext(53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(54, "div", 31);
+    i0.ɵɵtext(55, "Types");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(56, "div", 26);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_div_click_56_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewExpiringCredentials()); });
+    i0.ɵɵelementStart(57, "div", 27);
+    i0.ɵɵelement(58, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(59, "div", 29)(60, "div", 30);
+    i0.ɵɵtext(61);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(62, "div", 31);
+    i0.ɵɵtext(63, "Expiring Soon");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(64, CredentialsOverviewResourceComponent_ng_container_2_div_64_Template, 2, 0, "div", 41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(65, "div", 38)(66, "div", 27);
+    i0.ɵɵelement(67, "i", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(68, "div", 29)(69, "div", 30);
+    i0.ɵɵtext(70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(71, "div", 31);
+    i0.ɵɵtext(72, "Expired");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(73, "div", 43)(74, "div", 44)(75, "div", 45)(76, "div", 46);
+    i0.ɵɵelement(77, "i", 47);
+    i0.ɵɵelementStart(78, "span");
+    i0.ɵɵtext(79, "Credentials by Category");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(80, "span", 48);
+    i0.ɵɵtext(81, "Click to filter by category");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(82, "div", 49);
+    i0.ɵɵtemplate(83, CredentialsOverviewResourceComponent_ng_container_2_div_83_Template, 12, 3, "div", 50)(84, CredentialsOverviewResourceComponent_ng_container_2_div_84_Template, 4, 0, "div", 51);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(85, "div", 52)(86, "div", 45)(87, "div", 46);
+    i0.ɵɵelement(88, "i", 39);
+    i0.ɵɵelementStart(89, "span");
+    i0.ɵɵtext(90, "Top Credential Types");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(91, "button", 53);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_button_click_91_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAllTypes()); });
+    i0.ɵɵtext(92, " View All ");
+    i0.ɵɵelement(93, "i", 33);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(94, "div", 49);
+    i0.ɵɵtemplate(95, CredentialsOverviewResourceComponent_ng_container_2_div_95_Template, 2, 1, "div", 54)(96, CredentialsOverviewResourceComponent_ng_container_2_div_96_Template, 4, 0, "div", 51);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(97, "div", 55)(98, "div", 45)(99, "div", 46);
+    i0.ɵɵelement(100, "i", 56);
+    i0.ɵɵelementStart(101, "span");
+    i0.ɵɵtext(102, "Recent Activity");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(103, "button", 53);
+    i0.ɵɵlistener("click", function CredentialsOverviewResourceComponent_ng_container_2_Template_button_click_103_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewAuditLog()); });
+    i0.ɵɵtext(104, " View All ");
+    i0.ɵɵelement(105, "i", 33);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(106, "div", 49);
+    i0.ɵɵtemplate(107, CredentialsOverviewResourceComponent_ng_container_2_div_107_Template, 2, 1, "div", 57)(108, CredentialsOverviewResourceComponent_ng_container_2_div_108_Template, 4, 0, "div", 51);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(109, CredentialsOverviewResourceComponent_ng_container_2_div_109_Template, 20, 0, "div", 58);
+    i0.ɵɵelementStart(110, "div", 59);
+    i0.ɵɵelement(111, "i", 60);
+    i0.ɵɵelementStart(112, "div", 61)(113, "strong");
+    i0.ɵɵtext(114, "Security Note:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(115, " All credential values are encrypted. Access to credentials is logged in the audit trail for compliance and security monitoring. ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("ngIf", ctx_r1.UserCanCreateCredentials);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getHealthClass());
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("stroke-dasharray", ctx_r1.getHealthScore() + ", 100");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getHealthScore());
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.getHealthLabel());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.expiredCredentials > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.expiringSoonCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.expiredCredentials === 0 && ctx_r1.expiringSoonCount === 0);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.totalCredentials);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.activeCredentials);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", ctx_r1.totalCredentials > 0 ? (ctx_r1.activeCredentials / ctx_r1.totalCredentials * 100).toFixed(0) : 0, "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.credentialTypes);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("warning", ctx_r1.expiringSoonCount > 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.expiringSoonCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.expiringSoonCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("danger", ctx_r1.expiredCredentials > 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.expiredCredentials);
+    i0.ɵɵadvance(13);
+    i0.ɵɵproperty("ngIf", ctx_r1.categoryStats.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.categoryStats.length === 0);
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("ngIf", ctx_r1.typeStats.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.typeStats.length === 0);
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("ngIf", ctx_r1.recentActivity.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.recentActivity.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.UserCanCreateCredentials);
+} }
+export function LoadCredentialsOverviewResource() {
+    // Prevents tree-shaking
+}
+let CredentialsOverviewResourceComponent = class CredentialsOverviewResourceComponent extends BaseResourceComponent {
+    cdr;
+    navigationService;
+    isLoading = true;
+    // Summary stats
+    totalCredentials = 0;
+    activeCredentials = 0;
+    expiredCredentials = 0;
+    expiringSoonCount = 0;
+    credentialTypes = 0;
+    categories = 0;
+    // Grouped data
+    categoryStats = [];
+    typeStats = [];
+    recentActivity = [];
+    usageTrend = [];
+    // Raw data
+    credentials = [];
+    types = [];
+    categoryList = [];
+    auditLogs = [];
+    // Permissions
+    _metadata = new Metadata();
+    _permissionCache = new Map();
+    // Category colors for charts
+    categoryColors = {
+        'AI': '#8b5cf6',
+        'Communication': '#3b82f6',
+        'Storage': '#10b981',
+        'Database': '#f59e0b',
+        'Authentication': '#ef4444',
+        'Integration': '#6366f1'
+    };
+    destroy$ = new Subject();
+    constructor(cdr, navigationService) {
+        super();
+        this.cdr = cdr;
+        this.navigationService = navigationService;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async GetResourceDisplayName(data) {
+        return 'Overview';
+    }
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-chart-pie';
+    }
+    // === Permission Checks ===
+    get UserCanCreateCredentials() {
+        return this.checkEntityPermission('MJ: Credentials', 'Create');
+    }
+    get UserCanUpdateCredentials() {
+        return this.checkEntityPermission('MJ: Credentials', 'Update');
+    }
+    checkEntityPermission(entityName, permissionType) {
+        const cacheKey = `${entityName}_${permissionType}`;
+        if (this._permissionCache.has(cacheKey)) {
+            return this._permissionCache.get(cacheKey);
+        }
+        try {
+            const entityInfo = this._metadata.Entities.find(e => e.Name === entityName);
+            if (!entityInfo) {
+                this._permissionCache.set(cacheKey, false);
+                return false;
+            }
+            const userPermissions = entityInfo.GetUserPermisions(this._metadata.CurrentUser);
+            let hasPermission = false;
+            switch (permissionType) {
+                case 'Create':
+                    hasPermission = userPermissions.CanCreate;
+                    break;
+                case 'Read':
+                    hasPermission = userPermissions.CanRead;
+                    break;
+                case 'Update':
+                    hasPermission = userPermissions.CanUpdate;
+                    break;
+                case 'Delete':
+                    hasPermission = userPermissions.CanDelete;
+                    break;
+            }
+            this._permissionCache.set(cacheKey, hasPermission);
+            return hasPermission;
+        }
+        catch (error) {
+            this._permissionCache.set(cacheKey, false);
+            return false;
+        }
+    }
+    async loadData() {
+        try {
+            this.isLoading = true;
+            this.cdr.markForCheck();
+            const rv = new RunView();
+            // Calculate date range for audit logs (last 30 days)
+            const thirtyDaysAgo = new Date();
+            thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+            const dateFilter = `__mj_CreatedAt >= '${thirtyDaysAgo.toISOString()}'`;
+            // Load all data in parallel using RunViews
+            const [credResult, typeResult, categoryResult, auditResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Credentials',
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'MJ: Credential Types',
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'MJ: Credential Categories',
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'Audit Logs',
+                    ExtraFilter: `AuditLogType LIKE '%Credential%' AND ${dateFilter}`,
+                    OrderBy: '__mj_CreatedAt DESC',
+                    MaxRows: 100,
+                    ResultType: 'entity_object'
+                }
+            ]);
+            if (credResult.Success) {
+                this.credentials = credResult.Results;
+                this.processCredentialStats();
+            }
+            if (typeResult.Success) {
+                this.types = typeResult.Results;
+                this.credentialTypes = this.types.length;
+                this.processTypeStats();
+            }
+            if (categoryResult.Success) {
+                this.categoryList = categoryResult.Results;
+                this.categories = this.categoryList.length;
+                this.processCategoryStats();
+            }
+            if (auditResult.Success) {
+                this.auditLogs = auditResult.Results;
+                this.processActivityAndTrends();
+            }
+            // Build recent activity from credentials if no audit logs
+            if (this.recentActivity.length === 0) {
+                this.buildActivityFromCredentials();
+            }
+        }
+        catch (error) {
+            console.error('Error loading credentials overview:', error);
+        }
+        finally {
+            this.isLoading = false;
+            this.NotifyLoadComplete();
+            this.cdr.markForCheck();
+        }
+    }
+    processCredentialStats() {
+        this.totalCredentials = this.credentials.length;
+        this.activeCredentials = this.credentials.filter(c => c.IsActive).length;
+        const now = new Date();
+        const thirtyDaysFromNow = new Date();
+        thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+        this.expiredCredentials = this.credentials.filter(c => c.ExpiresAt && new Date(c.ExpiresAt) < now).length;
+        this.expiringSoonCount = this.credentials.filter(c => c.ExpiresAt &&
+            new Date(c.ExpiresAt) >= now &&
+            new Date(c.ExpiresAt) <= thirtyDaysFromNow &&
+            c.IsActive).length;
+    }
+    processTypeStats() {
+        const now = new Date();
+        const thirtyDaysFromNow = new Date();
+        thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+        this.typeStats = this.types.map(type => {
+            const typeCredentials = this.credentials.filter(c => c.CredentialTypeID === type.ID);
+            return {
+                typeId: type.ID,
+                typeName: type.Name,
+                category: type.Category,
+                credentialCount: typeCredentials.length,
+                activeCount: typeCredentials.filter(c => c.IsActive).length,
+                expiringCount: typeCredentials.filter(c => c.ExpiresAt &&
+                    new Date(c.ExpiresAt) >= now &&
+                    new Date(c.ExpiresAt) <= thirtyDaysFromNow).length
+            };
+        }).sort((a, b) => b.credentialCount - a.credentialCount);
+    }
+    processCategoryStats() {
+        const categoryMap = new Map();
+        // Initialize from credential types
+        for (const type of this.types) {
+            const category = type.Category;
+            const existing = categoryMap.get(category);
+            const categoryCredentials = this.credentials.filter(c => c.CredentialTypeID === type.ID);
+            if (existing) {
+                existing.count += categoryCredentials.length;
+            }
+            else {
+                categoryMap.set(category, {
+                    category: category,
+                    categoryId: category, // Use category name as ID for filtering
+                    count: categoryCredentials.length,
+                    iconClass: this.getCategoryIcon(category),
+                    color: this.categoryColors[category] || '#64748b',
+                    percentage: 0
+                });
+            }
+        }
+        // Calculate percentages
+        const total = this.totalCredentials || 1;
+        categoryMap.forEach(stat => {
+            stat.percentage = Math.round((stat.count / total) * 100);
+        });
+        this.categoryStats = Array.from(categoryMap.values())
+            .sort((a, b) => b.count - a.count);
+    }
+    processActivityAndTrends() {
+        // Process recent activity from audit logs
+        this.recentActivity = this.auditLogs
+            .slice(0, 10)
+            .map(log => ({
+            id: log.ID,
+            credentialName: this.extractCredentialName(log.Description || ''),
+            credentialId: '', // Would need to parse from log
+            typeName: 'Credential',
+            action: this.extractAction(log.Description || ''),
+            date: new Date(log.__mj_CreatedAt),
+            user: log.User
+        }));
+        // Build usage trend data (group by day)
+        const trendMap = new Map();
+        const uniqueCredentialsPerDay = new Map();
+        for (const log of this.auditLogs) {
+            const dateKey = new Date(log.__mj_CreatedAt).toISOString().split('T')[0];
+            if (!trendMap.has(dateKey)) {
+                trendMap.set(dateKey, {
+                    timestamp: new Date(dateKey),
+                    accessCount: 0,
+                    uniqueCredentials: 0,
+                    successRate: 100
+                });
+                uniqueCredentialsPerDay.set(dateKey, new Set());
+            }
+            const point = trendMap.get(dateKey);
+            point.accessCount++;
+            // Track unique credentials (would need proper parsing)
+            const credId = this.extractCredentialId(log.Description || '');
+            if (credId) {
+                uniqueCredentialsPerDay.get(dateKey).add(credId);
+            }
+        }
+        // Finalize unique counts
+        trendMap.forEach((point, dateKey) => {
+            point.uniqueCredentials = uniqueCredentialsPerDay.get(dateKey)?.size || 0;
+        });
+        this.usageTrend = Array.from(trendMap.values())
+            .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+    }
+    buildActivityFromCredentials() {
+        this.recentActivity = this.credentials
+            .filter(c => c.__mj_UpdatedAt)
+            .sort((a, b) => new Date(b.__mj_UpdatedAt).getTime() - new Date(a.__mj_UpdatedAt).getTime())
+            .slice(0, 10)
+            .map(c => ({
+            id: c.ID,
+            credentialName: c.Name,
+            credentialId: c.ID,
+            typeName: c.CredentialType || 'Unknown',
+            action: 'Updated',
+            date: new Date(c.__mj_UpdatedAt),
+            user: undefined
+        }));
+    }
+    extractCredentialName(description) {
+        // Try to extract credential name from audit log description
+        const match = description.match(/credential[:\s]+['"]?([^'"]+)['"]?/i);
+        return match ? match[1] : 'Unknown Credential';
+    }
+    extractAction(description) {
+        if (description.toLowerCase().includes('creat'))
+            return 'Created';
+        if (description.toLowerCase().includes('rotat'))
+            return 'Rotated';
+        if (description.toLowerCase().includes('access'))
+            return 'Accessed';
+        return 'Updated';
+    }
+    extractCredentialId(description) {
+        const match = description.match(/[a-f0-9-]{36}/i);
+        return match ? match[0] : '';
+    }
+    getCategoryIcon(category) {
+        const iconMap = {
+            'AI': 'fa-solid fa-brain',
+            'Communication': 'fa-solid fa-envelope',
+            'Storage': 'fa-solid fa-cloud',
+            'Database': 'fa-solid fa-database',
+            'Authentication': 'fa-solid fa-shield-halved',
+            'Integration': 'fa-solid fa-plug'
+        };
+        return iconMap[category] || 'fa-solid fa-key';
+    }
+    // === Navigation Actions ===
+    createNewCredential() {
+        // Navigate to Credentials tab with openCreatePanel flag to show the slide-in editor
+        this.navigationService.OpenNavItemByName('Credentials', {
+            openCreatePanel: true
+        });
+    }
+    openCredential(credentialId) {
+        const key = new CompositeKey([{ FieldName: 'ID', Value: credentialId }]);
+        this.navigationService.OpenEntityRecord('MJ: Credentials', key);
+    }
+    onCategoryClick(category) {
+        // Navigate to types nav item with category filter
+        this.navigationService.OpenNavItemByName('Types', {
+            categoryFilter: category.category
+        });
+    }
+    onTypeClick(typeStat) {
+        // Navigate to credentials nav item with type filter
+        this.navigationService.OpenNavItemByName('Credentials', {
+            typeId: typeStat.typeId
+        });
+    }
+    onActivityClick(activity) {
+        if (activity.credentialId) {
+            this.openCredential(activity.credentialId);
+        }
+    }
+    viewAllCredentials() {
+        this.navigationService.OpenNavItemByName('Credentials');
+    }
+    viewAuditLog() {
+        this.navigationService.OpenNavItemByName('Audit Log');
+    }
+    viewAllTypes() {
+        this.navigationService.OpenNavItemByName('Types');
+    }
+    viewAllCategories() {
+        this.navigationService.OpenNavItemByName('Categories');
+    }
+    viewExpiringCredentials() {
+        this.navigationService.OpenNavItemByName('Credentials', {
+            filter: 'expiring'
+        });
+    }
+    // === Formatting Helpers ===
+    formatDate(date) {
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+    getActionIcon(action) {
+        const iconMap = {
+            'Created': 'fa-solid fa-plus',
+            'Updated': 'fa-solid fa-pen',
+            'Accessed': 'fa-solid fa-eye',
+            'Rotated': 'fa-solid fa-rotate'
+        };
+        return iconMap[action] || 'fa-solid fa-circle';
+    }
+    getActionClass(action) {
+        const classMap = {
+            'Created': 'action-created',
+            'Updated': 'action-updated',
+            'Accessed': 'action-accessed',
+            'Rotated': 'action-rotated'
+        };
+        return classMap[action] || '';
+    }
+    refresh() {
+        this.loadData();
+    }
+    getHealthScore() {
+        if (this.totalCredentials === 0)
+            return 100;
+        const activeRatio = this.activeCredentials / this.totalCredentials;
+        const expiredPenalty = (this.expiredCredentials / this.totalCredentials) * 30;
+        const expiringPenalty = (this.expiringSoonCount / this.totalCredentials) * 15;
+        return Math.max(0, Math.min(100, Math.round((activeRatio * 100) - expiredPenalty - expiringPenalty)));
+    }
+    getHealthClass() {
+        const score = this.getHealthScore();
+        if (score >= 80)
+            return 'health-good';
+        if (score >= 60)
+            return 'health-warning';
+        return 'health-critical';
+    }
+    getHealthLabel() {
+        const score = this.getHealthScore();
+        if (score >= 80)
+            return 'Healthy';
+        if (score >= 60)
+            return 'Needs Attention';
+        return 'Critical';
+    }
+    getDonutOffset(index) {
+        // Calculate cumulative offset for donut chart segments
+        // Each segment starts where the previous one ended
+        // The circumference is 251 (2 * PI * 40)
+        let offset = 63; // Start at top (25% of circumference = 90 degrees rotation)
+        for (let i = 0; i < index; i++) {
+            offset -= this.categoryStats[i].percentage * 2.51;
+        }
+        return offset;
+    }
+    static ɵfac = function CredentialsOverviewResourceComponent_Factory(t) { return new (t || CredentialsOverviewResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.NavigationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsOverviewResourceComponent, selectors: [["mj-credentials-overview-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[1, "overview-container"], ["text", "Loading overview...", 4, "ngIf"], [4, "ngIf"], ["text", "Loading overview..."], [1, "overview-header"], [1, "header-left"], [1, "overview-title"], [1, "overview-subtitle"], [1, "header-actions"], ["title", "Refresh", 1, "btn-refresh", 3, "click"], [1, "fa-solid", "fa-refresh"], ["class", "btn-primary", 3, "click", 4, "ngIf"], [1, "health-banner", 3, "ngClass"], [1, "health-score-container"], [1, "health-score-ring"], ["viewBox", "0 0 36 36", 1, "circular-chart"], ["d", "M18 2.0845\n                               a 15.9155 15.9155 0 0 1 0 31.831\n                               a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle-bg"], ["d", "M18 2.0845\n                               a 15.9155 15.9155 0 0 1 0 31.831\n                               a 15.9155 15.9155 0 0 1 0 -31.831", 1, "circle"], [1, "health-score-value"], [1, "health-info"], [1, "health-label"], [1, "health-details"], ["class", "health-alert", 4, "ngIf"], ["class", "health-warning-text", 3, "click", 4, "ngIf"], ["class", "health-ok", 4, "ngIf"], [1, "kpi-row"], [1, "kpi-card", "clickable", 3, "click"], [1, "kpi-icon"], [1, "fa-solid", "fa-key"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-trend"], [1, "fa-solid", "fa-arrow-right"], [1, "kpi-card", "active", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-trend", "success"], [1, "percentage"], [1, "kpi-card"], [1, "fa-solid", "fa-cubes"], [1, "fa-solid", "fa-clock"], ["class", "kpi-trend warning", 4, "ngIf"], [1, "fa-solid", "fa-circle-xmark"], [1, "content-grid"], [1, "panel", "category-panel"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-chart-pie"], [1, "panel-subtitle"], [1, "panel-body"], ["class", "category-chart", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "panel", "types-panel"], [1, "panel-action", 3, "click"], ["class", "type-list", 4, "ngIf"], [1, "panel", "activity-panel"], [1, "fa-solid", "fa-clock-rotate-left"], ["class", "activity-list", 4, "ngIf"], ["class", "quick-actions", 4, "ngIf"], [1, "security-notice"], [1, "fa-solid", "fa-shield-check"], [1, "notice-content"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "health-alert"], [1, "fa-solid", "fa-circle-exclamation"], [1, "health-warning-text", 3, "click"], [1, "health-ok"], [1, "kpi-trend", "warning"], [1, "category-chart"], [1, "donut-chart-container"], ["viewBox", "0 0 100 100", 1, "donut-chart"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke", "#e5e7eb", "stroke-width", "12"], [4, "ngFor", "ngForOf"], [1, "donut-center"], [1, "donut-total"], [1, "donut-label"], [1, "category-legend"], ["class", "legend-item", 3, "click", 4, "ngFor", "ngForOf"], ["cx", "50", "cy", "50", "r", "40", "fill", "none", "stroke-width", "12", 1, "donut-segment", 3, "click"], [1, "legend-item", 3, "click"], [1, "legend-color"], [1, "legend-info"], [1, "legend-name"], [1, "legend-value"], [1, "fa-solid", "fa-chevron-right", "legend-arrow"], [1, "empty-state"], [1, "fa-solid", "fa-folder-open"], [1, "type-list"], ["class", "type-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "type-item", 3, "click"], [1, "type-info"], [1, "type-name"], [1, "type-category"], [1, "type-stats"], [1, "type-count"], [1, "count-value"], [1, "count-label"], [1, "type-bar"], [1, "type-bar-fill"], [1, "type-indicators"], ["class", "indicator active", "title", "Active", 4, "ngIf"], ["class", "indicator warning", "title", "Expiring Soon", 4, "ngIf"], ["title", "Active", 1, "indicator", "active"], [1, "fa-solid", "fa-circle"], ["title", "Expiring Soon", 1, "indicator", "warning"], [1, "fa-solid", "fa-shapes"], [1, "activity-list"], ["class", "activity-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "activity-item", 3, "click"], [1, "activity-icon", 3, "ngClass"], [1, "activity-info"], [1, "activity-name"], [1, "activity-meta"], [1, "activity-type"], [1, "activity-action"], ["class", "activity-user", 4, "ngIf"], [1, "activity-time"], [1, "activity-user"], [1, "fa-solid", "fa-inbox"], [1, "quick-actions"], [1, "quick-actions-title"], [1, "quick-actions-grid"], [1, "quick-action", 3, "click"], [1, "fa-solid", "fa-folder-tree"], [1, "fa-solid", "fa-clipboard-list"]], template: function CredentialsOverviewResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, CredentialsOverviewResourceComponent_mj_loading_1_Template, 1, 0, "mj-loading", 1)(2, CredentialsOverviewResourceComponent_ng_container_2_Template, 116, 26, "ng-container", 2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.LoadingComponent], styles: [".overview-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n}\n\n\n\n.overview-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.overview-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.overview-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-refresh[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-refresh[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-refresh[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n\n\n.health-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border: 1px solid #a7f3d0;\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);\n    border-color: #fcd34d;\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border-color: #fca5a5;\n}\n\n.health-score-container[_ngcontent-%COMP%] {\n    margin-right: 24px;\n}\n\n.health-score-ring[_ngcontent-%COMP%] {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart[_ngcontent-%COMP%] {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg[_ngcontent-%COMP%] {\n    fill: none;\n    stroke: #e5e7eb;\n    stroke-width: 3.8;\n}\n\n.circle[_ngcontent-%COMP%] {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: #10b981;\n    animation: _ngcontent-%COMP%_progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: #f59e0b;\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .circle[_ngcontent-%COMP%] {\n    stroke: #ef4444;\n}\n\n@keyframes _ngcontent-%COMP%_progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.health-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.health-label[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: #059669;\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: #d97706;\n}\n\n.health-banner.health-critical[_ngcontent-%COMP%]   .health-label[_ngcontent-%COMP%] {\n    color: #dc2626;\n}\n\n.health-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #dc2626;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #d97706;\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.health-ok[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #059669;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n\n\n.kpi-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.kpi-card.clickable[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.kpi-card.danger[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: white;\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.2;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.kpi-trend.success[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.kpi-trend.warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.kpi-trend[_ngcontent-%COMP%]   .percentage[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n\n\n.content-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.category-panel[_ngcontent-%COMP%] {\n    grid-row: span 2;\n}\n\n.panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--header-background, #f9fafb);\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.panel-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action[_ngcontent-%COMP%]:hover {\n    background: var(--accent-color, #6366f1);\n    border-color: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.category-chart[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container[_ngcontent-%COMP%] {\n    position: relative;\n    width: 200px;\n    height: 200px;\n    margin: 0 auto;\n}\n\n.donut-chart[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment[_ngcontent-%COMP%]:hover {\n    opacity: 0.8;\n}\n\n.donut-center[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total[_ngcontent-%COMP%] {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.donut-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n\n\n.category-legend[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n    transform: translateX(4px);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.legend-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.legend-value[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.legend-arrow[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #9ca3af);\n    font-size: 10px;\n}\n\n\n\n.type-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-category[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n    margin-top: 2px;\n}\n\n.type-stats[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.count-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.type-bar[_ngcontent-%COMP%] {\n    width: 100px;\n    height: 4px;\n    background: #e5e7eb;\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: linear-gradient(90deg, #6366f1, #8b5cf6);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.indicator.warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 6px;\n}\n\n\n\n.activity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.activity-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #e0e7ff);\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%] {\n    background: #d1fae5;\n}\n\n.activity-icon.action-created[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #059669;\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%] {\n    background: #e0e7ff;\n}\n\n.activity-icon.action-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%] {\n    background: #fef3c7;\n}\n\n.activity-icon.action-accessed[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #d97706;\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%] {\n    background: #dbeafe;\n}\n\n.activity-icon.action-rotated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #3b82f6;\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.activity-type[_ngcontent-%COMP%] {\n    background: var(--tag-background, #e5e7eb);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.activity-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: #f5f3ff;\n    transform: translateY(-2px);\n}\n\n.quick-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--accent-color, #6366f1);\n}\n\n.quick-action[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n\n\n.security-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border-radius: 12px;\n    border: 1px solid #bfdbfe;\n}\n\n.security-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #3b82f6;\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #1e40af;\n    line-height: 1.5;\n}\n\n.notice-content[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n\n\n@media (max-width: 1024px) {\n    .content-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel[_ngcontent-%COMP%] {\n        grid-row: auto;\n    }\n\n    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container[_ngcontent-%COMP%] {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend[_ngcontent-%COMP%] {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .overview-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-end;\n    }\n\n    .health-banner[_ngcontent-%COMP%] {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container[_ngcontent-%COMP%] {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .category-chart[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}"], changeDetection: 0 });
+};
+CredentialsOverviewResourceComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'CredentialsOverviewResource')
+], CredentialsOverviewResourceComponent);
+export { CredentialsOverviewResourceComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsOverviewResourceComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-credentials-overview-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overview-container\">\n    <mj-loading *ngIf=\"isLoading\" text=\"Loading overview...\"></mj-loading>\n\n    <ng-container *ngIf=\"!isLoading\">\n        <!-- Header with Actions -->\n        <div class=\"overview-header\">\n            <div class=\"header-left\">\n                <h2 class=\"overview-title\">Credential Overview</h2>\n                <p class=\"overview-subtitle\">Monitor and manage your organization's credentials</p>\n            </div>\n            <div class=\"header-actions\">\n                <button class=\"btn-refresh\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-refresh\"></i>\n                </button>\n                <button class=\"btn-primary\" *ngIf=\"UserCanCreateCredentials\" (click)=\"createNewCredential()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>New Credential</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Health Score Banner -->\n        <div class=\"health-banner\" [ngClass]=\"getHealthClass()\">\n            <div class=\"health-score-container\">\n                <div class=\"health-score-ring\">\n                    <svg viewBox=\"0 0 36 36\" class=\"circular-chart\">\n                        <path class=\"circle-bg\"\n                            d=\"M18 2.0845\n                               a 15.9155 15.9155 0 0 1 0 31.831\n                               a 15.9155 15.9155 0 0 1 0 -31.831\"\n                        />\n                        <path class=\"circle\"\n                            [attr.stroke-dasharray]=\"getHealthScore() + ', 100'\"\n                            d=\"M18 2.0845\n                               a 15.9155 15.9155 0 0 1 0 31.831\n                               a 15.9155 15.9155 0 0 1 0 -31.831\"\n                        />\n                    </svg>\n                    <div class=\"health-score-value\">{{getHealthScore()}}</div>\n                </div>\n            </div>\n            <div class=\"health-info\">\n                <div class=\"health-label\">{{getHealthLabel()}}</div>\n                <div class=\"health-details\">\n                    <span *ngIf=\"expiredCredentials > 0\" class=\"health-alert\">\n                        <i class=\"fa-solid fa-circle-exclamation\"></i>\n                        {{expiredCredentials}} expired\n                    </span>\n                    <span *ngIf=\"expiringSoonCount > 0\" class=\"health-warning-text\" (click)=\"viewExpiringCredentials()\">\n                        <i class=\"fa-solid fa-clock\"></i>\n                        {{expiringSoonCount}} expiring soon\n                    </span>\n                    <span *ngIf=\"expiredCredentials === 0 && expiringSoonCount === 0\" class=\"health-ok\">\n                        <i class=\"fa-solid fa-check-circle\"></i>\n                        All credentials healthy\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <!-- KPI Cards Row -->\n        <div class=\"kpi-row\">\n            <div class=\"kpi-card clickable\" (click)=\"viewAllCredentials()\">\n                <div class=\"kpi-icon\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{totalCredentials}}</div>\n                    <div class=\"kpi-label\">Total Credentials</div>\n                </div>\n                <div class=\"kpi-trend\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n            </div>\n\n            <div class=\"kpi-card active clickable\" (click)=\"viewAllCredentials()\">\n                <div class=\"kpi-icon\">\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{activeCredentials}}</div>\n                    <div class=\"kpi-label\">Active</div>\n                </div>\n                <div class=\"kpi-trend success\">\n                    <span class=\"percentage\">{{totalCredentials > 0 ? (activeCredentials / totalCredentials * 100).toFixed(0) : 0}}%</span>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\">\n                <div class=\"kpi-icon\">\n                    <i class=\"fa-solid fa-cubes\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{credentialTypes}}</div>\n                    <div class=\"kpi-label\">Types</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card clickable\" [class.warning]=\"expiringSoonCount > 0\" (click)=\"viewExpiringCredentials()\">\n                <div class=\"kpi-icon\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{expiringSoonCount}}</div>\n                    <div class=\"kpi-label\">Expiring Soon</div>\n                </div>\n                <div class=\"kpi-trend warning\" *ngIf=\"expiringSoonCount > 0\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\" [class.danger]=\"expiredCredentials > 0\">\n                <div class=\"kpi-icon\">\n                    <i class=\"fa-solid fa-circle-xmark\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{expiredCredentials}}</div>\n                    <div class=\"kpi-label\">Expired</div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Content Grid -->\n        <div class=\"content-grid\">\n            <!-- Category Distribution Chart -->\n            <div class=\"panel category-panel\">\n                <div class=\"panel-header\">\n                    <div class=\"panel-title\">\n                        <i class=\"fa-solid fa-chart-pie\"></i>\n                        <span>Credentials by Category</span>\n                    </div>\n                    <span class=\"panel-subtitle\">Click to filter by category</span>\n                </div>\n                <div class=\"panel-body\">\n                    <div class=\"category-chart\" *ngIf=\"categoryStats.length > 0\">\n                        <!-- Visual Donut Chart -->\n                        <div class=\"donut-chart-container\">\n                            <svg viewBox=\"0 0 100 100\" class=\"donut-chart\">\n                                <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"12\"/>\n                                <ng-container *ngFor=\"let stat of categoryStats; let i = index\">\n                                    <circle\n                                        cx=\"50\" cy=\"50\" r=\"40\"\n                                        fill=\"none\"\n                                        [attr.stroke]=\"stat.color\"\n                                        stroke-width=\"12\"\n                                        [attr.stroke-dasharray]=\"stat.percentage * 2.51 + ' ' + (251 - stat.percentage * 2.51)\"\n                                        [attr.stroke-dashoffset]=\"getDonutOffset(i)\"\n                                        class=\"donut-segment\"\n                                        (click)=\"onCategoryClick(stat)\"\n                                    />\n                                </ng-container>\n                            </svg>\n                            <div class=\"donut-center\">\n                                <div class=\"donut-total\">{{totalCredentials}}</div>\n                                <div class=\"donut-label\">Total</div>\n                            </div>\n                        </div>\n                        <!-- Legend -->\n                        <div class=\"category-legend\">\n                            <div class=\"legend-item\" *ngFor=\"let stat of categoryStats\" (click)=\"onCategoryClick(stat)\">\n                                <div class=\"legend-color\" [style.backgroundColor]=\"stat.color\"></div>\n                                <div class=\"legend-info\">\n                                    <div class=\"legend-name\">\n                                        <i [class]=\"stat.iconClass\"></i>\n                                        {{stat.category}}\n                                    </div>\n                                    <div class=\"legend-value\">{{stat.count}} ({{stat.percentage}}%)</div>\n                                </div>\n                                <i class=\"fa-solid fa-chevron-right legend-arrow\"></i>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"categoryStats.length === 0\">\n                        <i class=\"fa-solid fa-folder-open\"></i>\n                        <span>No credentials configured</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Types Breakdown -->\n            <div class=\"panel types-panel\">\n                <div class=\"panel-header\">\n                    <div class=\"panel-title\">\n                        <i class=\"fa-solid fa-cubes\"></i>\n                        <span>Top Credential Types</span>\n                    </div>\n                    <button class=\"panel-action\" (click)=\"viewAllTypes()\">\n                        View All <i class=\"fa-solid fa-arrow-right\"></i>\n                    </button>\n                </div>\n                <div class=\"panel-body\">\n                    <div class=\"type-list\" *ngIf=\"typeStats.length > 0\">\n                        <div class=\"type-item\" *ngFor=\"let type of typeStats.slice(0, 6)\" (click)=\"onTypeClick(type)\">\n                            <div class=\"type-info\">\n                                <div class=\"type-name\">{{type.typeName}}</div>\n                                <div class=\"type-category\">{{type.category}}</div>\n                            </div>\n                            <div class=\"type-stats\">\n                                <div class=\"type-count\">\n                                    <span class=\"count-value\">{{type.credentialCount}}</span>\n                                    <span class=\"count-label\">credentials</span>\n                                </div>\n                                <div class=\"type-bar\">\n                                    <div class=\"type-bar-fill\"\n                                         [style.width.%]=\"totalCredentials > 0 ? (type.credentialCount / totalCredentials * 100) : 0\">\n                                    </div>\n                                </div>\n                                <div class=\"type-indicators\">\n                                    <span class=\"indicator active\" *ngIf=\"type.activeCount > 0\" title=\"Active\">\n                                        <i class=\"fa-solid fa-circle\"></i> {{type.activeCount}}\n                                    </span>\n                                    <span class=\"indicator warning\" *ngIf=\"type.expiringCount > 0\" title=\"Expiring Soon\">\n                                        <i class=\"fa-solid fa-clock\"></i> {{type.expiringCount}}\n                                    </span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"typeStats.length === 0\">\n                        <i class=\"fa-solid fa-shapes\"></i>\n                        <span>No credential types configured</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Recent Activity -->\n            <div class=\"panel activity-panel\">\n                <div class=\"panel-header\">\n                    <div class=\"panel-title\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Recent Activity</span>\n                    </div>\n                    <button class=\"panel-action\" (click)=\"viewAuditLog()\">\n                        View All <i class=\"fa-solid fa-arrow-right\"></i>\n                    </button>\n                </div>\n                <div class=\"panel-body\">\n                    <div class=\"activity-list\" *ngIf=\"recentActivity.length > 0\">\n                        <div class=\"activity-item\" *ngFor=\"let activity of recentActivity\" (click)=\"onActivityClick(activity)\">\n                            <div class=\"activity-icon\" [ngClass]=\"getActionClass(activity.action)\">\n                                <i [class]=\"getActionIcon(activity.action)\"></i>\n                            </div>\n                            <div class=\"activity-info\">\n                                <div class=\"activity-name\">{{activity.credentialName}}</div>\n                                <div class=\"activity-meta\">\n                                    <span class=\"activity-type\">{{activity.typeName}}</span>\n                                    <span class=\"activity-action\">{{activity.action}}</span>\n                                    <span class=\"activity-user\" *ngIf=\"activity.user\">by {{activity.user}}</span>\n                                </div>\n                            </div>\n                            <div class=\"activity-time\">\n                                {{formatDate(activity.date)}}\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"recentActivity.length === 0\">\n                        <i class=\"fa-solid fa-inbox\"></i>\n                        <span>No recent activity</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Quick Actions -->\n        <div class=\"quick-actions\" *ngIf=\"UserCanCreateCredentials\">\n            <div class=\"quick-actions-title\">Quick Actions</div>\n            <div class=\"quick-actions-grid\">\n                <button class=\"quick-action\" (click)=\"createNewCredential()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>Add Credential</span>\n                </button>\n                <button class=\"quick-action\" (click)=\"viewAllTypes()\">\n                    <i class=\"fa-solid fa-shapes\"></i>\n                    <span>Manage Types</span>\n                </button>\n                <button class=\"quick-action\" (click)=\"viewAllCategories()\">\n                    <i class=\"fa-solid fa-folder-tree\"></i>\n                    <span>Categories</span>\n                </button>\n                <button class=\"quick-action\" (click)=\"viewAuditLog()\">\n                    <i class=\"fa-solid fa-clipboard-list\"></i>\n                    <span>Audit Log</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Security Notice -->\n        <div class=\"security-notice\">\n            <i class=\"fa-solid fa-shield-check\"></i>\n            <div class=\"notice-content\">\n                <strong>Security Note:</strong> All credential values are encrypted.\n                Access to credentials is logged in the audit trail for compliance and security monitoring.\n            </div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".overview-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n}\n\n/* Header */\n.overview-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n}\n\n.header-left {\n    flex: 1;\n}\n\n.overview-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.overview-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-refresh {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-refresh:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-refresh i {\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n/* Health Banner */\n.health-banner {\n    display: flex;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n    border: 1px solid #a7f3d0;\n    border-radius: 16px;\n    margin-bottom: 24px;\n}\n\n.health-banner.health-warning {\n    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);\n    border-color: #fcd34d;\n}\n\n.health-banner.health-critical {\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border-color: #fca5a5;\n}\n\n.health-score-container {\n    margin-right: 24px;\n}\n\n.health-score-ring {\n    position: relative;\n    width: 80px;\n    height: 80px;\n}\n\n.circular-chart {\n    display: block;\n    margin: 0 auto;\n    max-height: 80px;\n    transform: rotate(-90deg);\n}\n\n.circle-bg {\n    fill: none;\n    stroke: #e5e7eb;\n    stroke-width: 3.8;\n}\n\n.circle {\n    fill: none;\n    stroke-width: 3.8;\n    stroke-linecap: round;\n    stroke: #10b981;\n    animation: progress 1s ease-out forwards;\n}\n\n.health-banner.health-warning .circle {\n    stroke: #f59e0b;\n}\n\n.health-banner.health-critical .circle {\n    stroke: #ef4444;\n}\n\n@keyframes progress {\n    0% {\n        stroke-dasharray: 0 100;\n    }\n}\n\n.health-score-value {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.health-info {\n    flex: 1;\n}\n\n.health-label {\n    font-size: 18px;\n    font-weight: 700;\n    color: #059669;\n    margin-bottom: 4px;\n}\n\n.health-banner.health-warning .health-label {\n    color: #d97706;\n}\n\n.health-banner.health-critical .health-label {\n    color: #dc2626;\n}\n\n.health-details {\n    display: flex;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.health-alert {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #dc2626;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.health-warning-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #d97706;\n    font-weight: 500;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.health-warning-text:hover {\n    text-decoration: underline;\n}\n\n.health-ok {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: #059669;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n/* KPI Cards */\n.kpi-row {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.kpi-card.clickable {\n    cursor: pointer;\n}\n\n.kpi-card.clickable:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.kpi-card.active .kpi-icon {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n}\n\n.kpi-card.warning .kpi-icon {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.kpi-card.danger .kpi-icon {\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n}\n\n.kpi-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    border-radius: 10px;\n    margin-right: 14px;\n    flex-shrink: 0;\n}\n\n.kpi-icon i {\n    font-size: 20px;\n    color: white;\n}\n\n.kpi-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.kpi-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.2;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n}\n\n.kpi-trend {\n    display: flex;\n    align-items: center;\n    margin-left: 8px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.kpi-trend.success {\n    color: #10b981;\n}\n\n.kpi-trend.warning {\n    color: #f59e0b;\n}\n\n.kpi-trend .percentage {\n    font-size: 12px;\n    font-weight: 600;\n}\n\n/* Content Grid */\n.content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.category-panel {\n    grid-row: span 2;\n}\n\n.panel {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--header-background, #f9fafb);\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.panel-title i {\n    color: var(--accent-color, #6366f1);\n}\n\n.panel-subtitle {\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.panel-action {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: transparent;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.panel-action:hover {\n    background: var(--accent-color, #6366f1);\n    border-color: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.panel-body {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Category Chart */\n.category-chart {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.donut-chart-container {\n    position: relative;\n    width: 200px;\n    height: 200px;\n    margin: 0 auto;\n}\n\n.donut-chart {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n}\n\n.donut-segment {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n}\n\n.donut-segment:hover {\n    opacity: 0.8;\n}\n\n.donut-center {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n}\n\n.donut-total {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.donut-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n/* Category Legend */\n.category-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.legend-item:hover {\n    background: var(--item-hover, #f3f4f6);\n    transform: translateX(4px);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 4px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.legend-info {\n    flex: 1;\n}\n\n.legend-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.legend-name i {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.legend-value {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.legend-arrow {\n    color: var(--text-tertiary, #9ca3af);\n    font-size: 10px;\n}\n\n/* Type List */\n.type-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.type-item:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-category {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n    margin-top: 2px;\n}\n\n.type-stats {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.type-count {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.count-value {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.count-label {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n}\n\n.type-bar {\n    width: 100px;\n    height: 4px;\n    background: #e5e7eb;\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.type-bar-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #6366f1, #8b5cf6);\n    border-radius: 2px;\n    transition: width 0.3s ease;\n}\n\n.type-indicators {\n    display: flex;\n    gap: 8px;\n}\n\n.indicator {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n}\n\n.indicator.active {\n    color: #10b981;\n}\n\n.indicator.warning {\n    color: #f59e0b;\n}\n\n.indicator i {\n    font-size: 6px;\n}\n\n/* Activity List */\n.activity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.activity-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.activity-item:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.activity-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #e0e7ff);\n    border-radius: 6px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.activity-icon i {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.activity-icon.action-created {\n    background: #d1fae5;\n}\n\n.activity-icon.action-created i {\n    color: #059669;\n}\n\n.activity-icon.action-updated {\n    background: #e0e7ff;\n}\n\n.activity-icon.action-updated i {\n    color: #6366f1;\n}\n\n.activity-icon.action-accessed {\n    background: #fef3c7;\n}\n\n.activity-icon.action-accessed i {\n    color: #d97706;\n}\n\n.activity-icon.action-rotated {\n    background: #dbeafe;\n}\n\n.activity-icon.action-rotated i {\n    color: #3b82f6;\n}\n\n.activity-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.activity-name {\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.activity-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.activity-type {\n    background: var(--tag-background, #e5e7eb);\n    padding: 1px 6px;\n    border-radius: 4px;\n}\n\n.activity-action {\n    font-weight: 500;\n}\n\n.activity-time {\n    font-size: 11px;\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n}\n\n/* Quick Actions */\n.quick-actions {\n    margin-bottom: 24px;\n}\n\n.quick-actions-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin-bottom: 12px;\n}\n\n.quick-actions-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n}\n\n.quick-action {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.quick-action:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: #f5f3ff;\n    transform: translateY(-2px);\n}\n\n.quick-action i {\n    font-size: 20px;\n    color: var(--accent-color, #6366f1);\n}\n\n.quick-action span {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n/* Security Notice */\n.security-notice {\n    display: flex;\n    align-items: flex-start;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n    border-radius: 12px;\n    border: 1px solid #bfdbfe;\n}\n\n.security-notice i {\n    font-size: 20px;\n    color: #3b82f6;\n    margin-right: 12px;\n    margin-top: 2px;\n}\n\n.notice-content {\n    font-size: 13px;\n    color: #1e40af;\n    line-height: 1.5;\n}\n\n.notice-content strong {\n    font-weight: 600;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .content-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .category-panel {\n        grid-row: auto;\n    }\n\n    .category-chart {\n        flex-direction: row;\n        align-items: center;\n    }\n\n    .donut-chart-container {\n        width: 160px;\n        height: 160px;\n    }\n\n    .category-legend {\n        flex: 1;\n    }\n}\n\n@media (max-width: 768px) {\n    .overview-container {\n        padding: 16px;\n    }\n\n    .overview-header {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-actions {\n        width: 100%;\n        justify-content: flex-end;\n    }\n\n    .health-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n\n    .health-score-container {\n        margin-right: 0;\n        margin-bottom: 16px;\n    }\n\n    .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .category-chart {\n        flex-direction: column;\n    }\n\n    .quick-actions-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsOverviewResourceComponent, { className: "CredentialsOverviewResourceComponent", filePath: "src/Credentials/components/credentials-overview-resource.component.ts", lineNumber: 54 }); })();
+//# sourceMappingURL=credentials-overview-resource.component.js.map