@memberjunction/ng-dashboards 3.3.0 → 4.0.0

package/dist/APIKeys/api-usage-panel.component.js

@@ -5,21 +5,21 @@ import * as i1 from "@angular/common";
 import * as i2 from "@progress/kendo-angular-dialog";
 import * as i3 from "@progress/kendo-angular-buttons";
 import * as i4 from "@memberjunction/ng-shared-generic";
-function APIUsagePanelComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 4);
+function APIUsagePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 1);
 } }
-function APIUsagePanelComponent_ng_container_2_div_77_div_2_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 60);
+function APIUsagePanelComponent_Conditional_2_Conditional_76_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 56);
 } if (rf & 2) {
     const bucket_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵstyleProp("height", ctx_r1.getErrorBarHeight(bucket_r3), "%");
 } }
-function APIUsagePanelComponent_ng_container_2_div_77_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "div", 57);
-    i0.ɵɵtemplate(3, APIUsagePanelComponent_ng_container_2_div_77_div_2_div_3_Template, 1, 2, "div", 58);
+function APIUsagePanelComponent_Conditional_2_Conditional_76_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 52)(2, "div", 53);
+    i0.ɵɵconditionalCreate(3, APIUsagePanelComponent_Conditional_2_Conditional_76_For_3_Conditional_3_Template, 1, 2, "div", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 59);
+    i0.ɵɵelementStart(4, "div", 55);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -29,56 +29,56 @@ function APIUsagePanelComponent_ng_container_2_div_77_div_2_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵstyleProp("height", ctx_r1.getBarHeight(bucket_r3.requests), "%");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", bucket_r3.errors > 0);
+    i0.ɵɵconditional(bucket_r3.errors > 0 ? 3 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(bucket_r3.label);
 } }
-function APIUsagePanelComponent_ng_container_2_div_77_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
-    i0.ɵɵtemplate(2, APIUsagePanelComponent_ng_container_2_div_77_div_2_Template, 6, 5, "div", 53);
+function APIUsagePanelComponent_Conditional_2_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 49);
+    i0.ɵɵrepeaterCreate(2, APIUsagePanelComponent_Conditional_2_Conditional_76_For_3_Template, 6, 5, "div", 50, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 54)(4, "span");
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(4, "div", 51)(5, "span");
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span");
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span");
-    i0.ɵɵtext(9, "0");
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "0");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.TimeBuckets);
-    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.TimeBuckets);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatNumber(ctx_r1.MaxRequests));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.formatNumber(ctx_r1.Math.round(ctx_r1.MaxRequests / 2)));
 } }
-function APIUsagePanelComponent_ng_container_2_div_78_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵelement(1, "i", 62);
+function APIUsagePanelComponent_Conditional_2_Conditional_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No usage data available");
     i0.ɵɵelementEnd()();
 } }
-function APIUsagePanelComponent_ng_container_2_div_86_div_1_Template(rf, ctx) { if (rf & 1) {
+function APIUsagePanelComponent_Conditional_2_Conditional_85_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_div_86_div_1_Template_div_click_0_listener() { const ep_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.drillDownEndpoint(ep_r5)); });
-    i0.ɵɵelementStart(1, "div", 66)(2, "span", 67);
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Conditional_85_For_2_Template_div_click_0_listener() { const ep_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.drillDownEndpoint(ep_r5)); });
+    i0.ɵɵelementStart(1, "div", 60)(2, "span", 61);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 68);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 69)(7, "span", 70);
+    i0.ɵɵelementStart(6, "div", 63)(7, "span", 64);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 71);
+    i0.ɵɵelementStart(9, "span", 65);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 72);
+    i0.ɵɵelementStart(11, "span", 66);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -99,33 +99,33 @@ function APIUsagePanelComponent_ng_container_2_div_86_div_1_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ep_r5.errorRate, "% err ");
 } }
-function APIUsagePanelComponent_ng_container_2_div_86_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63);
-    i0.ɵɵtemplate(1, APIUsagePanelComponent_ng_container_2_div_86_div_1_Template, 13, 8, "div", 64);
+function APIUsagePanelComponent_Conditional_2_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, APIUsagePanelComponent_Conditional_2_Conditional_85_For_2_Template, 13, 8, "div", 58, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.TopEndpoints);
+    i0.ɵɵrepeater(ctx_r1.TopEndpoints);
 } }
-function APIUsagePanelComponent_ng_container_2_div_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 28);
+function APIUsagePanelComponent_Conditional_2_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "i", 26);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No endpoint data");
     i0.ɵɵelementEnd()();
 } }
-function APIUsagePanelComponent_ng_container_2_div_94_div_1_Template(rf, ctx) { if (rf & 1) {
+function APIUsagePanelComponent_Conditional_2_Conditional_93_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_div_94_div_1_Template_div_click_0_listener() { const key_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.drillDownKey(key_r7)); });
-    i0.ɵɵelementStart(1, "div", 77)(2, "span", 78);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Conditional_93_For_2_Template_div_click_0_listener() { const key_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.drillDownKey(key_r7)); });
+    i0.ɵɵelementStart(1, "div", 69)(2, "span", 70);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 79);
+    i0.ɵɵelementStart(4, "span", 71);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 80);
+    i0.ɵɵelementStart(6, "div", 72);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -138,36 +138,36 @@ function APIUsagePanelComponent_ng_container_2_div_94_div_1_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.formatNumber(key_r7.requests));
 } }
-function APIUsagePanelComponent_ng_container_2_div_94_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵtemplate(1, APIUsagePanelComponent_ng_container_2_div_94_div_1_Template, 8, 3, "div", 75);
+function APIUsagePanelComponent_Conditional_2_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵrepeaterCreate(1, APIUsagePanelComponent_Conditional_2_Conditional_93_For_2_Template, 8, 3, "div", 67, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.TopKeys);
+    i0.ɵɵrepeater(ctx_r1.TopKeys);
 } }
-function APIUsagePanelComponent_ng_container_2_div_95_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 26);
+function APIUsagePanelComponent_Conditional_2_Conditional_94_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No key data");
     i0.ɵɵelementEnd()();
 } }
-function APIUsagePanelComponent_ng_container_2_div_102_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 86);
+function APIUsagePanelComponent_Conditional_2_Conditional_101_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 77);
 } if (rf & 2) {
     const group_r8 = ctx.$implicit;
     i0.ɵɵstyleProp("width", group_r8.percentage, "%")("background-color", group_r8.color);
     i0.ɵɵproperty("title", group_r8.label + ": " + group_r8.count + " (" + group_r8.percentage + "%)");
 } }
-function APIUsagePanelComponent_ng_container_2_div_102_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵelement(1, "span", 88);
-    i0.ɵɵelementStart(2, "span", 89);
+function APIUsagePanelComponent_Conditional_2_Conditional_101_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "span", 78);
+    i0.ɵɵelementStart(2, "span", 79);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 90);
+    i0.ɵɵelementStart(4, "span", 80);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -180,44 +180,44 @@ function APIUsagePanelComponent_ng_container_2_div_102_div_4_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2("", ctx_r1.formatNumber(group_r9.count), " (", group_r9.percentage, "%)");
 } }
-function APIUsagePanelComponent_ng_container_2_div_102_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 81)(1, "div", 82);
-    i0.ɵɵtemplate(2, APIUsagePanelComponent_ng_container_2_div_102_div_2_Template, 1, 5, "div", 83);
+function APIUsagePanelComponent_Conditional_2_Conditional_101_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 73);
+    i0.ɵɵrepeaterCreate(2, APIUsagePanelComponent_Conditional_2_Conditional_101_For_3_Template, 1, 5, "div", 74, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 84);
-    i0.ɵɵtemplate(4, APIUsagePanelComponent_ng_container_2_div_102_div_4_Template, 6, 5, "div", 85);
+    i0.ɵɵelementStart(4, "div", 75);
+    i0.ɵɵrepeaterCreate(5, APIUsagePanelComponent_Conditional_2_Conditional_101_For_6_Template, 6, 5, "div", 76, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.StatusGroups);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.StatusGroups);
+    i0.ɵɵrepeater(ctx_r1.StatusGroups);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.StatusGroups);
 } }
-function APIUsagePanelComponent_ng_container_2_div_103_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵelement(1, "i", 44);
+function APIUsagePanelComponent_Conditional_2_Conditional_102_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No status data");
     i0.ɵɵelementEnd()();
 } }
-function APIUsagePanelComponent_ng_container_2_div_109_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101)(1, "span", 93);
+function APIUsagePanelComponent_Conditional_2_Conditional_108_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 82);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 94);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 95)(6, "span", 67);
+    i0.ɵɵelementStart(5, "span", 84)(6, "span", 61);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "span", 96);
+    i0.ɵɵelementStart(8, "span", 85);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 102);
+    i0.ɵɵelementStart(10, "span", 90);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 98);
+    i0.ɵɵelementStart(12, "span", 87);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -240,36 +240,36 @@ function APIUsagePanelComponent_ng_container_2_div_109_div_15_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", log_r10.responseTime, "ms");
 } }
-function APIUsagePanelComponent_ng_container_2_div_109_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91)(1, "div", 92)(2, "span", 93);
+function APIUsagePanelComponent_Conditional_2_Conditional_108_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47)(1, "div", 81)(2, "span", 82);
     i0.ɵɵtext(3, "Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 94);
+    i0.ɵɵelementStart(4, "span", 83);
     i0.ɵɵtext(5, "API Key");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 95);
+    i0.ɵɵelementStart(6, "span", 84);
     i0.ɵɵtext(7, "Method");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 96);
+    i0.ɵɵelementStart(8, "span", 85);
     i0.ɵɵtext(9, "Endpoint");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 97);
+    i0.ɵɵelementStart(10, "span", 86);
     i0.ɵɵtext(11, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 98);
+    i0.ɵɵelementStart(12, "span", 87);
     i0.ɵɵtext(13, "Duration");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 99);
-    i0.ɵɵtemplate(15, APIUsagePanelComponent_ng_container_2_div_109_div_15_Template, 14, 8, "div", 100);
+    i0.ɵɵelementStart(14, "div", 88);
+    i0.ɵɵrepeaterCreate(15, APIUsagePanelComponent_Conditional_2_Conditional_108_For_16_Template, 14, 8, "div", 89, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(15);
-    i0.ɵɵproperty("ngForOf", ctx_r1.RecentLogs);
+    i0.ɵɵrepeater(ctx_r1.RecentLogs);
 } }
-function APIUsagePanelComponent_ng_container_2_div_110_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 104);
+function APIUsagePanelComponent_Conditional_2_Conditional_109_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵelement(1, "i", 91);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No requests logged yet");
     i0.ɵɵelementEnd();
@@ -277,130 +277,133 @@ function APIUsagePanelComponent_ng_container_2_div_110_Template(rf, ctx) { if (r
     i0.ɵɵtext(5, "API usage will appear here once keys are used");
     i0.ɵɵelementEnd()();
 } }
-function APIUsagePanelComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function APIUsagePanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 5)(2, "div", 6)(3, "h3", 7);
-    i0.ɵɵelement(4, "i", 8);
-    i0.ɵɵtext(5, " API Usage Analytics ");
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "h3", 5);
+    i0.ɵɵelement(3, "i", 6);
+    i0.ɵɵtext(4, " API Usage Analytics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 9);
-    i0.ɵɵtext(7, "Monitor API key usage, performance, and trends");
+    i0.ɵɵelementStart(5, "p", 7);
+    i0.ɵɵtext(6, "Monitor API key usage, performance, and trends");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 10)(9, "button", 11);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("day")); });
-    i0.ɵɵtext(10, "24 Hours");
+    i0.ɵɵelementStart(7, "div", 8)(8, "button", 9);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("day")); });
+    i0.ɵɵtext(9, "24 Hours");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 11);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("week")); });
-    i0.ɵɵtext(12, "7 Days");
+    i0.ɵɵelementStart(10, "button", 9);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("week")); });
+    i0.ɵɵtext(11, "7 Days");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 11);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("month")); });
-    i0.ɵɵtext(14, "30 Days");
+    i0.ɵɵelementStart(12, "button", 9);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("month")); });
+    i0.ɵɵtext(13, "30 Days");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 11);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_ng_container_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("all")); });
-    i0.ɵɵtext(16, "All Time");
+    i0.ɵɵelementStart(14, "button", 9);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setTimeRange("all")); });
+    i0.ɵɵtext(15, "All Time");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 12)(18, "div", 13)(19, "div", 14);
-    i0.ɵɵelement(20, "i", 15);
+    i0.ɵɵelementStart(16, "div", 10)(17, "div", 11)(18, "div", 12);
+    i0.ɵɵelement(19, "i", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 16)(22, "div", 17);
-    i0.ɵɵtext(23);
+    i0.ɵɵelementStart(20, "div", 14)(21, "div", 15);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 18);
-    i0.ɵɵtext(25, "Total Requests");
+    i0.ɵɵelementStart(23, "div", 16);
+    i0.ɵɵtext(24, "Total Requests");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "div", 13)(27, "div", 19);
-    i0.ɵɵelement(28, "i", 20);
+    i0.ɵɵelementStart(25, "div", 11)(26, "div", 17);
+    i0.ɵɵelement(27, "i", 18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 16)(30, "div", 17);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(28, "div", 14)(29, "div", 15);
+    i0.ɵɵtext(30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 18);
-    i0.ɵɵtext(33, "Success Rate");
+    i0.ɵɵelementStart(31, "div", 16);
+    i0.ɵɵtext(32, "Success Rate");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 13)(35, "div", 21);
-    i0.ɵɵelement(36, "i", 22);
+    i0.ɵɵelementStart(33, "div", 11)(34, "div", 19);
+    i0.ɵɵelement(35, "i", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 16)(38, "div", 17);
-    i0.ɵɵtext(39);
+    i0.ɵɵelementStart(36, "div", 14)(37, "div", 15);
+    i0.ɵɵtext(38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "div", 18);
-    i0.ɵɵtext(41, "Errors");
+    i0.ɵɵelementStart(39, "div", 16);
+    i0.ɵɵtext(40, "Errors");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(42, "div", 13)(43, "div", 23);
-    i0.ɵɵelement(44, "i", 24);
+    i0.ɵɵelementStart(41, "div", 11)(42, "div", 21);
+    i0.ɵɵelement(43, "i", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 16)(46, "div", 17);
-    i0.ɵɵtext(47);
+    i0.ɵɵelementStart(44, "div", 14)(45, "div", 15);
+    i0.ɵɵtext(46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "div", 18);
-    i0.ɵɵtext(49, "Avg Response Time");
+    i0.ɵɵelementStart(47, "div", 16);
+    i0.ɵɵtext(48, "Avg Response Time");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(50, "div", 13)(51, "div", 25);
-    i0.ɵɵelement(52, "i", 26);
+    i0.ɵɵelementStart(49, "div", 11)(50, "div", 23);
+    i0.ɵɵelement(51, "i", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "div", 16)(54, "div", 17);
-    i0.ɵɵtext(55);
+    i0.ɵɵelementStart(52, "div", 14)(53, "div", 15);
+    i0.ɵɵtext(54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "div", 18);
-    i0.ɵɵtext(57, "Active Keys");
+    i0.ɵɵelementStart(55, "div", 16);
+    i0.ɵɵtext(56, "Active Keys");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(58, "div", 13)(59, "div", 27);
-    i0.ɵɵelement(60, "i", 28);
+    i0.ɵɵelementStart(57, "div", 11)(58, "div", 25);
+    i0.ɵɵelement(59, "i", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "div", 16)(62, "div", 17);
-    i0.ɵɵtext(63);
+    i0.ɵɵelementStart(60, "div", 14)(61, "div", 15);
+    i0.ɵɵtext(62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "div", 18);
-    i0.ɵɵtext(65, "Unique Endpoints");
+    i0.ɵɵelementStart(63, "div", 16);
+    i0.ɵɵtext(64, "Unique Endpoints");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(66, "div", 29)(67, "div", 30)(68, "h4");
-    i0.ɵɵtext(69, "Request Volume");
+    i0.ɵɵelementStart(65, "div", 27)(66, "div", 28)(67, "h4");
+    i0.ɵɵtext(68, "Request Volume");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(70, "div", 31)(71, "span", 32);
-    i0.ɵɵelement(72, "span", 33);
-    i0.ɵɵtext(73, " Requests ");
+    i0.ɵɵelementStart(69, "div", 29)(70, "span", 30);
+    i0.ɵɵelement(71, "span", 31);
+    i0.ɵɵtext(72, " Requests ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(74, "span", 32);
-    i0.ɵɵelement(75, "span", 34);
-    i0.ɵɵtext(76, " Errors ");
+    i0.ɵɵelementStart(73, "span", 30);
+    i0.ɵɵelement(74, "span", 32);
+    i0.ɵɵtext(75, " Errors ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(77, APIUsagePanelComponent_ng_container_2_div_77_Template, 10, 3, "div", 35)(78, APIUsagePanelComponent_ng_container_2_div_78_Template, 4, 0, "div", 36);
+    i0.ɵɵconditionalCreate(76, APIUsagePanelComponent_Conditional_2_Conditional_76_Template, 11, 2, "div", 33);
+    i0.ɵɵconditionalCreate(77, APIUsagePanelComponent_Conditional_2_Conditional_77_Template, 4, 0, "div", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(79, "div", 37)(80, "div", 38)(81, "div", 39)(82, "h4");
-    i0.ɵɵelement(83, "i", 28);
-    i0.ɵɵtext(84, " Top Endpoints ");
+    i0.ɵɵelementStart(78, "div", 35)(79, "div", 36)(80, "div", 37)(81, "h4");
+    i0.ɵɵelement(82, "i", 26);
+    i0.ɵɵtext(83, " Top Endpoints ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(85, "div", 40);
-    i0.ɵɵtemplate(86, APIUsagePanelComponent_ng_container_2_div_86_Template, 2, 1, "div", 41)(87, APIUsagePanelComponent_ng_container_2_div_87_Template, 4, 0, "div", 42);
+    i0.ɵɵelementStart(84, "div", 38);
+    i0.ɵɵconditionalCreate(85, APIUsagePanelComponent_Conditional_2_Conditional_85_Template, 3, 0, "div", 39);
+    i0.ɵɵconditionalCreate(86, APIUsagePanelComponent_Conditional_2_Conditional_86_Template, 4, 0, "div", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(88, "div", 38)(89, "div", 39)(90, "h4");
-    i0.ɵɵelement(91, "i", 26);
-    i0.ɵɵtext(92, " Most Active Keys ");
+    i0.ɵɵelementStart(87, "div", 36)(88, "div", 37)(89, "h4");
+    i0.ɵɵelement(90, "i", 24);
+    i0.ɵɵtext(91, " Most Active Keys ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(93, "div", 40);
-    i0.ɵɵtemplate(94, APIUsagePanelComponent_ng_container_2_div_94_Template, 2, 1, "div", 43)(95, APIUsagePanelComponent_ng_container_2_div_95_Template, 4, 0, "div", 42);
+    i0.ɵɵelementStart(92, "div", 38);
+    i0.ɵɵconditionalCreate(93, APIUsagePanelComponent_Conditional_2_Conditional_93_Template, 3, 0, "div", 41);
+    i0.ɵɵconditionalCreate(94, APIUsagePanelComponent_Conditional_2_Conditional_94_Template, 4, 0, "div", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(96, "div", 38)(97, "div", 39)(98, "h4");
-    i0.ɵɵelement(99, "i", 44);
-    i0.ɵɵtext(100, " Status Distribution ");
+    i0.ɵɵelementStart(95, "div", 36)(96, "div", 37)(97, "h4");
+    i0.ɵɵelement(98, "i", 42);
+    i0.ɵɵtext(99, " Status Distribution ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(101, "div", 40);
-    i0.ɵɵtemplate(102, APIUsagePanelComponent_ng_container_2_div_102_Template, 5, 2, "div", 45)(103, APIUsagePanelComponent_ng_container_2_div_103_Template, 4, 0, "div", 42);
+    i0.ɵɵelementStart(100, "div", 38);
+    i0.ɵɵconditionalCreate(101, APIUsagePanelComponent_Conditional_2_Conditional_101_Template, 7, 0, "div", 43);
+    i0.ɵɵconditionalCreate(102, APIUsagePanelComponent_Conditional_2_Conditional_102_Template, 4, 0, "div", 40);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(104, "div", 46)(105, "div", 47)(106, "h4");
-    i0.ɵɵelement(107, "i", 48);
-    i0.ɵɵtext(108, " Recent Requests ");
+    i0.ɵɵelementStart(103, "div", 44)(104, "div", 45)(105, "h4");
+    i0.ɵɵelement(106, "i", 46);
+    i0.ɵɵtext(107, " Recent Requests ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(109, APIUsagePanelComponent_ng_container_2_div_109_Template, 16, 1, "div", 49)(110, APIUsagePanelComponent_ng_container_2_div_110_Template, 6, 0, "div", 50);
+    i0.ɵɵconditionalCreate(108, APIUsagePanelComponent_Conditional_2_Conditional_108_Template, 17, 0, "div", 47);
+    i0.ɵɵconditionalCreate(109, APIUsagePanelComponent_Conditional_2_Conditional_109_Template, 6, 0, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
+    i0.ɵɵadvance(8);
     i0.ɵɵclassProp("active", ctx_r1.TimeRange === "day");
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.TimeRange === "week");
@@ -425,28 +428,28 @@ function APIUsagePanelComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.UniqueEndpoints);
     i0.ɵɵadvance(14);
-    i0.ɵɵproperty("ngIf", ctx_r1.TimeBuckets.length > 0);
+    i0.ɵɵconditional(ctx_r1.TimeBuckets.length > 0 ? 76 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.TimeBuckets.length === 0);
+    i0.ɵɵconditional(ctx_r1.TimeBuckets.length === 0 ? 77 : -1);
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngIf", ctx_r1.TopEndpoints.length > 0);
+    i0.ɵɵconditional(ctx_r1.TopEndpoints.length > 0 ? 85 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.TopEndpoints.length === 0);
+    i0.ɵɵconditional(ctx_r1.TopEndpoints.length === 0 ? 86 : -1);
     i0.ɵɵadvance(7);
-    i0.ɵɵproperty("ngIf", ctx_r1.TopKeys.length > 0);
+    i0.ɵɵconditional(ctx_r1.TopKeys.length > 0 ? 93 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.TopKeys.length === 0);
+    i0.ɵɵconditional(ctx_r1.TopKeys.length === 0 ? 94 : -1);
     i0.ɵɵadvance(7);
-    i0.ɵɵproperty("ngIf", ctx_r1.StatusGroups.length > 0);
+    i0.ɵɵconditional(ctx_r1.StatusGroups.length > 0 ? 101 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.StatusGroups.length === 0);
+    i0.ɵɵconditional(ctx_r1.StatusGroups.length === 0 ? 102 : -1);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", ctx_r1.RecentLogs.length > 0);
+    i0.ɵɵconditional(ctx_r1.RecentLogs.length > 0 ? 108 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.RecentLogs.length === 0);
+    i0.ɵɵconditional(ctx_r1.RecentLogs.length === 0 ? 109 : -1);
 } }
-function APIUsagePanelComponent_kendo_window_3_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 114);
+function APIUsagePanelComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 95);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -454,8 +457,8 @@ function APIUsagePanelComponent_kendo_window_3_span_6_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.LogsFilter.endpoint, " ");
 } }
-function APIUsagePanelComponent_kendo_window_3_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 114);
+function APIUsagePanelComponent_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 95);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -463,26 +466,26 @@ function APIUsagePanelComponent_kendo_window_3_span_7_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Key: ", ctx_r1.KeyMap.get(ctx_r1.LogsFilter.keyId) || "Unknown", " ");
 } }
-function APIUsagePanelComponent_kendo_window_3_mj_loading_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 115);
+function APIUsagePanelComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 99);
 } }
-function APIUsagePanelComponent_kendo_window_3_div_12_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101)(1, "span", 93);
+function APIUsagePanelComponent_Conditional_3_Conditional_12_For_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 82);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 94);
+    i0.ɵɵelementStart(3, "span", 83);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 95)(6, "span", 67);
+    i0.ɵɵelementStart(5, "span", 84)(6, "span", 61);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "span", 96);
+    i0.ɵɵelementStart(8, "span", 85);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 102);
+    i0.ɵɵelementStart(10, "span", 90);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 98);
+    i0.ɵɵelementStart(12, "span", 87);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -505,67 +508,65 @@ function APIUsagePanelComponent_kendo_window_3_div_12_div_16_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", log_r12.responseTime, "ms");
 } }
-function APIUsagePanelComponent_kendo_window_3_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 116)(1, "div", 91)(2, "div", 92)(3, "span", 93);
+function APIUsagePanelComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100)(1, "div", 47)(2, "div", 81)(3, "span", 82);
     i0.ɵɵtext(4, "Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 94);
+    i0.ɵɵelementStart(5, "span", 83);
     i0.ɵɵtext(6, "API Key");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 95);
+    i0.ɵɵelementStart(7, "span", 84);
     i0.ɵɵtext(8, "Method");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 96);
+    i0.ɵɵelementStart(9, "span", 85);
     i0.ɵɵtext(10, "Endpoint");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 97);
+    i0.ɵɵelementStart(11, "span", 86);
     i0.ɵɵtext(12, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 98);
+    i0.ɵɵelementStart(13, "span", 87);
     i0.ɵɵtext(14, "Duration");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 117);
-    i0.ɵɵtemplate(16, APIUsagePanelComponent_kendo_window_3_div_12_div_16_Template, 14, 8, "div", 100);
+    i0.ɵɵelementStart(15, "div", 101);
+    i0.ɵɵrepeaterCreate(16, APIUsagePanelComponent_Conditional_3_Conditional_12_For_17_Template, 14, 8, "div", 89, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(16);
-    i0.ɵɵproperty("ngForOf", ctx_r1.RecentLogs);
+    i0.ɵɵrepeater(ctx_r1.RecentLogs);
 } }
-function APIUsagePanelComponent_kendo_window_3_Template(rf, ctx) { if (rf & 1) {
+function APIUsagePanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 105);
-    i0.ɵɵlistener("close", function APIUsagePanelComponent_kendo_window_3_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeLogsPanel()); });
-    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 106);
-    i0.ɵɵelement(3, "i", 107);
+    i0.ɵɵelementStart(0, "kendo-window", 92);
+    i0.ɵɵlistener("close", function APIUsagePanelComponent_Conditional_3_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeLogsPanel()); });
+    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 93);
+    i0.ɵɵelement(3, "i", 94);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5, "Request Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIUsagePanelComponent_kendo_window_3_span_6_Template, 2, 1, "span", 108)(7, APIUsagePanelComponent_kendo_window_3_span_7_Template, 2, 1, "span", 108);
+    i0.ɵɵconditionalCreate(6, APIUsagePanelComponent_Conditional_3_Conditional_6_Template, 2, 1, "span", 95);
+    i0.ɵɵconditionalCreate(7, APIUsagePanelComponent_Conditional_3_Conditional_7_Template, 2, 1, "span", 95);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 109);
-    i0.ɵɵlistener("click", function APIUsagePanelComponent_kendo_window_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeLogsPanel()); });
-    i0.ɵɵelement(9, "i", 110);
+    i0.ɵɵelementStart(8, "button", 96);
+    i0.ɵɵlistener("click", function APIUsagePanelComponent_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeLogsPanel()); });
+    i0.ɵɵelement(9, "i", 97);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 111);
-    i0.ɵɵtemplate(11, APIUsagePanelComponent_kendo_window_3_mj_loading_11_Template, 1, 0, "mj-loading", 112)(12, APIUsagePanelComponent_kendo_window_3_div_12_Template, 17, 1, "div", 113);
+    i0.ɵɵelementStart(10, "div", 98);
+    i0.ɵɵconditionalCreate(11, APIUsagePanelComponent_Conditional_3_Conditional_11_Template, 1, 0, "mj-loading", 99);
+    i0.ɵɵconditionalCreate(12, APIUsagePanelComponent_Conditional_3_Conditional_12_Template, 18, 0, "div", 100);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("width", 800)("minWidth", 600)("height", 500)("minHeight", 400)("resizable", true)("draggable", true)("top", 80);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", ctx_r1.LogsFilter.endpoint);
+    i0.ɵɵconditional(ctx_r1.LogsFilter.endpoint ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.LogsFilter.keyId);
+    i0.ɵɵconditional(ctx_r1.LogsFilter.keyId ? 7 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r1.IsLoadingLogs);
+    i0.ɵɵconditional(ctx_r1.IsLoadingLogs ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingLogs);
+    i0.ɵɵconditional(!ctx_r1.IsLoadingLogs ? 12 : -1);
 } }
-/** Tree shaking prevention function */
-export function LoadAPIUsagePanel() {
-    // This function prevents tree shaking
-}
 /**
  * API Usage Analytics Panel Component
  * Comprehensive usage statistics and drill-down capabilities
@@ -992,22 +993,24 @@ export class APIUsagePanelComponent {
         return num.toString();
     }
     static ɵfac = function APIUsagePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIUsagePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIUsagePanelComponent, selectors: [["mj-api-usage-panel"]], decls: 4, vars: 3, consts: [[1, "usage-panel"], ["text", "Loading usage analytics...", 4, "ngIf"], [4, "ngIf"], [3, "width", "minWidth", "height", "minHeight", "resizable", "draggable", "top", "close", 4, "ngIf"], ["text", "Loading usage analytics..."], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "fa-solid", "fa-chart-line"], [1, "panel-subtitle"], [1, "time-filters"], [1, "time-btn", 3, "click"], [1, "kpi-grid"], [1, "kpi-card"], [1, "kpi-icon", "requests"], [1, "fa-solid", "fa-arrow-right-arrow-left"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "success-rate"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-icon", "errors"], [1, "fa-solid", "fa-circle-exclamation"], [1, "kpi-icon", "response-time"], [1, "fa-solid", "fa-gauge-high"], [1, "kpi-icon", "keys"], [1, "fa-solid", "fa-key"], [1, "kpi-icon", "endpoints"], [1, "fa-solid", "fa-code-branch"], [1, "chart-section"], [1, "chart-header"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "requests"], [1, "legend-color", "errors"], ["class", "chart-container", 4, "ngIf"], ["class", "empty-chart", 4, "ngIf"], [1, "breakdown-grid"], [1, "breakdown-card"], [1, "breakdown-header"], [1, "breakdown-content"], ["class", "endpoint-list", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "key-list", 4, "ngIf"], [1, "fa-solid", "fa-circle-half-stroke"], ["class", "status-distribution", 4, "ngIf"], [1, "logs-section"], [1, "logs-header"], [1, "fa-solid", "fa-list"], ["class", "logs-table", 4, "ngIf"], ["class", "empty-state large", 4, "ngIf"], [1, "chart-container"], [1, "chart-bars"], ["class", "bar-group", 3, "title", 4, "ngFor", "ngForOf"], [1, "chart-y-axis"], [1, "bar-group", 3, "title"], [1, "bar-wrapper"], [1, "bar", "requests-bar"], ["class", "bar errors-bar", 3, "height", 4, "ngIf"], [1, "bar-label"], [1, "bar", "errors-bar"], [1, "empty-chart"], [1, "fa-solid", "fa-chart-area"], [1, "endpoint-list"], ["class", "endpoint-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "endpoint-item", 3, "click"], [1, "endpoint-info"], [1, "method-badge", 3, "ngClass"], [1, "endpoint-path"], [1, "endpoint-stats"], [1, "endpoint-requests"], [1, "endpoint-time"], [1, "endpoint-error"], [1, "empty-state"], [1, "key-list"], ["class", "key-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "key-item", 3, "click"], [1, "key-info"], [1, "key-label"], [1, "key-last-used"], [1, "key-requests"], [1, "status-distribution"], [1, "status-bar"], ["class", "status-segment", 3, "width", "backgroundColor", "title", 4, "ngFor", "ngForOf"], [1, "status-legend"], ["class", "status-legend-item", 4, "ngFor", "ngForOf"], [1, "status-segment", 3, "title"], [1, "status-legend-item"], [1, "status-color"], [1, "status-label"], [1, "status-count"], [1, "logs-table"], [1, "logs-table-header"], [1, "col-time"], [1, "col-key"], [1, "col-method"], [1, "col-endpoint"], [1, "col-status"], [1, "col-duration"], [1, "logs-table-body"], ["class", "log-row", 4, "ngFor", "ngForOf"], [1, "log-row"], [1, "col-status", 3, "ngClass"], [1, "empty-state", "large"], [1, "fa-solid", "fa-inbox"], [3, "close", "width", "minWidth", "height", "minHeight", "resizable", "draggable", "top"], [1, "drilldown-title"], [1, "fa-solid", "fa-magnifying-glass-chart"], ["class", "filter-badge", 4, "ngIf"], ["kendoButton", "", "fillMode", "flat", 1, "window-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "drilldown-content"], ["text", "Loading requests...", 4, "ngIf"], ["class", "drilldown-logs", 4, "ngIf"], [1, "filter-badge"], ["text", "Loading requests..."], [1, "drilldown-logs"], [1, "logs-table-body", "scrollable"]], template: function APIUsagePanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIUsagePanelComponent, selectors: [["mj-api-usage-panel"]], standalone: false, decls: 4, vars: 3, consts: [[1, "usage-panel"], ["text", "Loading usage analytics..."], [3, "width", "minWidth", "height", "minHeight", "resizable", "draggable", "top"], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "fa-solid", "fa-chart-line"], [1, "panel-subtitle"], [1, "time-filters"], [1, "time-btn", 3, "click"], [1, "kpi-grid"], [1, "kpi-card"], [1, "kpi-icon", "requests"], [1, "fa-solid", "fa-arrow-right-arrow-left"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "success-rate"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-icon", "errors"], [1, "fa-solid", "fa-circle-exclamation"], [1, "kpi-icon", "response-time"], [1, "fa-solid", "fa-gauge-high"], [1, "kpi-icon", "keys"], [1, "fa-solid", "fa-key"], [1, "kpi-icon", "endpoints"], [1, "fa-solid", "fa-code-branch"], [1, "chart-section"], [1, "chart-header"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "requests"], [1, "legend-color", "errors"], [1, "chart-container"], [1, "empty-chart"], [1, "breakdown-grid"], [1, "breakdown-card"], [1, "breakdown-header"], [1, "breakdown-content"], [1, "endpoint-list"], [1, "empty-state"], [1, "key-list"], [1, "fa-solid", "fa-circle-half-stroke"], [1, "status-distribution"], [1, "logs-section"], [1, "logs-header"], [1, "fa-solid", "fa-list"], [1, "logs-table"], [1, "empty-state", "large"], [1, "chart-bars"], [1, "bar-group", 3, "title"], [1, "chart-y-axis"], [1, "bar-wrapper"], [1, "bar", "requests-bar"], [1, "bar", "errors-bar", 3, "height"], [1, "bar-label"], [1, "bar", "errors-bar"], [1, "fa-solid", "fa-chart-area"], [1, "endpoint-item"], [1, "endpoint-item", 3, "click"], [1, "endpoint-info"], [1, "method-badge", 3, "ngClass"], [1, "endpoint-path"], [1, "endpoint-stats"], [1, "endpoint-requests"], [1, "endpoint-time"], [1, "endpoint-error"], [1, "key-item"], [1, "key-item", 3, "click"], [1, "key-info"], [1, "key-label"], [1, "key-last-used"], [1, "key-requests"], [1, "status-bar"], [1, "status-segment", 3, "width", "backgroundColor", "title"], [1, "status-legend"], [1, "status-legend-item"], [1, "status-segment", 3, "title"], [1, "status-color"], [1, "status-label"], [1, "status-count"], [1, "logs-table-header"], [1, "col-time"], [1, "col-key"], [1, "col-method"], [1, "col-endpoint"], [1, "col-status"], [1, "col-duration"], [1, "logs-table-body"], [1, "log-row"], [1, "col-status", 3, "ngClass"], [1, "fa-solid", "fa-inbox"], [3, "close", "width", "minWidth", "height", "minHeight", "resizable", "draggable", "top"], [1, "drilldown-title"], [1, "fa-solid", "fa-magnifying-glass-chart"], [1, "filter-badge"], ["kendoButton", "", "fillMode", "flat", 1, "window-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "drilldown-content"], ["text", "Loading requests..."], [1, "drilldown-logs"], [1, "logs-table-body", "scrollable"]], template: function APIUsagePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, APIUsagePanelComponent_mj_loading_1_Template, 1, 0, "mj-loading", 1)(2, APIUsagePanelComponent_ng_container_2_Template, 111, 28, "ng-container", 2)(3, APIUsagePanelComponent_kendo_window_3_Template, 13, 11, "kendo-window", 3);
+            i0.ɵɵconditionalCreate(1, APIUsagePanelComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
+            i0.ɵɵconditionalCreate(2, APIUsagePanelComponent_Conditional_2_Template, 110, 28);
+            i0.ɵɵconditionalCreate(3, APIUsagePanelComponent_Conditional_3_Template, 13, 11, "kendo-window", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading);
+            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.ShowLogsPanel);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.WindowComponent, i2.WindowTitleBarComponent, i3.ButtonComponent, i4.LoadingComponent], styles: [".usage-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: #f8fafc;\n    min-height: 100%;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    background: white;\n    padding: 4px;\n    border-radius: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.time-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 18px 20px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    font-size: 18px;\n}\n\n.kpi-icon.requests[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n    color: #2563eb;\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n    color: #059669;\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #dc2626;\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    color: #4f46e5;\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #d97706;\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n    color: #7c3aed;\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.requests[_ngcontent-%COMP%] {\n    background: #6366f1;\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n    background: #ef4444;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 200px;\n    gap: 8px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    padding-bottom: 24px;\n}\n\n.bar-group[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n}\n\n.bar-wrapper[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 160px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n}\n\n.bar[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 32px;\n    border-radius: 4px 4px 0 0;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.bar.requests-bar[_ngcontent-%COMP%] {\n    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: #ef4444;\n    border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 10px;\n    color: #9ca3af;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 100%;\n}\n\n.chart-y-axis[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding-bottom: 24px;\n    font-size: 10px;\n    color: #9ca3af;\n    text-align: right;\n    min-width: 40px;\n}\n\n.empty-chart[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 200px;\n    color: #9ca3af;\n}\n\n.empty-chart[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n\n\n.breakdown-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n.breakdown-card[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.breakdown-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.breakdown-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.breakdown-content[_ngcontent-%COMP%] {\n    padding: 12px;\n    max-height: 280px;\n    overflow-y: auto;\n}\n\n\n\n.endpoint-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.endpoint-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.endpoint-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.method-get[_ngcontent-%COMP%] { background: #dbeafe; color: #2563eb; }\n.method-post[_ngcontent-%COMP%] { background: #d1fae5; color: #059669; }\n.method-put[_ngcontent-%COMP%] { background: #fef3c7; color: #d97706; }\n.method-delete[_ngcontent-%COMP%] { background: #fee2e2; color: #dc2626; }\n.method-other[_ngcontent-%COMP%] { background: #f3f4f6; color: #6b7280; }\n\n.endpoint-path[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: 'Fira Code', monospace;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.endpoint-stats[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.endpoint-requests[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #6366f1;\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n    color: #ef4444;\n    font-weight: 500;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.key-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-last-used[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.key-requests[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #6366f1;\n}\n\n\n\n.status-distribution[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.status-bar[_ngcontent-%COMP%] {\n    display: flex;\n    height: 24px;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #f3f4f6;\n}\n\n.status-segment[_ngcontent-%COMP%] {\n    transition: all 0.3s ease;\n}\n\n.status-segment[_ngcontent-%COMP%]:hover {\n    filter: brightness(1.1);\n}\n\n.status-legend[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.status-legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.status-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.status-label[_ngcontent-%COMP%] {\n    flex: 1;\n    color: #374151;\n}\n\n.status-count[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.logs-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.logs-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.logs-table[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.logs-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    background: #f3f4f6;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.logs-table-body[_ngcontent-%COMP%] {\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.logs-table-body.scrollable[_ngcontent-%COMP%] {\n    max-height: 380px;\n}\n\n.log-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n    background: #f9fafb;\n}\n\n.col-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n    color: #374151;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', monospace;\n    font-size: 12px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    font-weight: 600;\n    text-align: center;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] { color: #10b981; }\n.col-status.status-info[_ngcontent-%COMP%] { color: #3b82f6; }\n.col-status.status-warning[_ngcontent-%COMP%] { color: #f59e0b; }\n.col-status.status-error[_ngcontent-%COMP%] { color: #ef4444; }\n\n.col-duration[_ngcontent-%COMP%] {\n    color: #6b7280;\n    text-align: right;\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 20px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.empty-state.large[_ngcontent-%COMP%] {\n    padding: 48px 24px;\n}\n\n.empty-state.large[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n}\n\n\n\n.drilldown-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.drilldown-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    background: #e0e7ff;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #4f46e5;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    color: #9ca3af;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.drilldown-content[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: hidden;\n}\n\n.drilldown-logs[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n[_nghost-%COMP%]     kendo-window {\n    border-radius: 12px !important;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;\n}\n\n[_nghost-%COMP%]     kendo-window .k-window-content {\n    padding: 0 !important;\n}\n\n[_nghost-%COMP%]     kendo-window-titlebar {\n    padding: 16px 20px !important;\n    background: #f9fafb !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n\n\n@media (max-width: 1400px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n@media (max-width: 1200px) {\n    .breakdown-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 900px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .breakdown-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header[_ngcontent-%COMP%], \n   .log-row[_ngcontent-%COMP%] {\n        grid-template-columns: 80px 100px 60px 1fr 60px;\n    }\n\n    .col-duration[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .panel-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .time-filters[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header[_ngcontent-%COMP%], \n   .log-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 60px;\n    }\n\n    .col-key[_ngcontent-%COMP%], \n   .col-method[_ngcontent-%COMP%], \n   .col-endpoint[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"] });
+            i0.ɵɵconditional(ctx.ShowLogsPanel ? 3 : -1);
+        } }, dependencies: [i1.NgClass, i2.WindowComponent, i2.WindowTitleBarComponent, i3.ButtonComponent, i4.LoadingComponent], styles: [".usage-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: #f8fafc;\n    min-height: 100%;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    background: white;\n    padding: 4px;\n    border-radius: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.time-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 18px 20px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    font-size: 18px;\n}\n\n.kpi-icon.requests[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n    color: #2563eb;\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n    color: #059669;\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #dc2626;\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    color: #4f46e5;\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #d97706;\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n    color: #7c3aed;\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.requests[_ngcontent-%COMP%] {\n    background: #6366f1;\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n    background: #ef4444;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 200px;\n    gap: 8px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    padding-bottom: 24px;\n}\n\n.bar-group[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n}\n\n.bar-wrapper[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 160px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n}\n\n.bar[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 32px;\n    border-radius: 4px 4px 0 0;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.bar.requests-bar[_ngcontent-%COMP%] {\n    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: #ef4444;\n    border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 10px;\n    color: #9ca3af;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 100%;\n}\n\n.chart-y-axis[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding-bottom: 24px;\n    font-size: 10px;\n    color: #9ca3af;\n    text-align: right;\n    min-width: 40px;\n}\n\n.empty-chart[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 200px;\n    color: #9ca3af;\n}\n\n.empty-chart[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n\n\n.breakdown-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n.breakdown-card[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.breakdown-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.breakdown-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.breakdown-content[_ngcontent-%COMP%] {\n    padding: 12px;\n    max-height: 280px;\n    overflow-y: auto;\n}\n\n\n\n.endpoint-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.endpoint-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.endpoint-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.method-get[_ngcontent-%COMP%] { background: #dbeafe; color: #2563eb; }\n.method-post[_ngcontent-%COMP%] { background: #d1fae5; color: #059669; }\n.method-put[_ngcontent-%COMP%] { background: #fef3c7; color: #d97706; }\n.method-delete[_ngcontent-%COMP%] { background: #fee2e2; color: #dc2626; }\n.method-other[_ngcontent-%COMP%] { background: #f3f4f6; color: #6b7280; }\n\n.endpoint-path[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: 'Fira Code', monospace;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.endpoint-stats[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.endpoint-requests[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #6366f1;\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n    color: #ef4444;\n    font-weight: 500;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.key-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-last-used[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.key-requests[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #6366f1;\n}\n\n\n\n.status-distribution[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.status-bar[_ngcontent-%COMP%] {\n    display: flex;\n    height: 24px;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #f3f4f6;\n}\n\n.status-segment[_ngcontent-%COMP%] {\n    transition: all 0.3s ease;\n}\n\n.status-segment[_ngcontent-%COMP%]:hover {\n    filter: brightness(1.1);\n}\n\n.status-legend[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.status-legend-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.status-color[_ngcontent-%COMP%] {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.status-label[_ngcontent-%COMP%] {\n    flex: 1;\n    color: #374151;\n}\n\n.status-count[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.logs-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.logs-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.logs-table[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.logs-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    background: #f3f4f6;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.logs-table-body[_ngcontent-%COMP%] {\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.logs-table-body.scrollable[_ngcontent-%COMP%] {\n    max-height: 380px;\n}\n\n.log-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n    background: #f9fafb;\n}\n\n.col-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n    color: #374151;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', monospace;\n    font-size: 12px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    font-weight: 600;\n    text-align: center;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] { color: #10b981; }\n.col-status.status-info[_ngcontent-%COMP%] { color: #3b82f6; }\n.col-status.status-warning[_ngcontent-%COMP%] { color: #f59e0b; }\n.col-status.status-error[_ngcontent-%COMP%] { color: #ef4444; }\n\n.col-duration[_ngcontent-%COMP%] {\n    color: #6b7280;\n    text-align: right;\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 20px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.empty-state.large[_ngcontent-%COMP%] {\n    padding: 48px 24px;\n}\n\n.empty-state.large[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n}\n\n\n\n.drilldown-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.drilldown-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    background: #e0e7ff;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #4f46e5;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    color: #9ca3af;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.drilldown-content[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: hidden;\n}\n\n.drilldown-logs[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n[_nghost-%COMP%]     kendo-window {\n    border-radius: 12px !important;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;\n}\n\n[_nghost-%COMP%]     kendo-window .k-window-content {\n    padding: 0 !important;\n}\n\n[_nghost-%COMP%]     kendo-window-titlebar {\n    padding: 16px 20px !important;\n    background: #f9fafb !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n\n\n@media (max-width: 1400px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n@media (max-width: 1200px) {\n    .breakdown-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 900px) {\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .breakdown-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header[_ngcontent-%COMP%], \n   .log-row[_ngcontent-%COMP%] {\n        grid-template-columns: 80px 100px 60px 1fr 60px;\n    }\n\n    .col-duration[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .panel-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .time-filters[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header[_ngcontent-%COMP%], \n   .log-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 60px;\n    }\n\n    .col-key[_ngcontent-%COMP%], \n   .col-method[_ngcontent-%COMP%], \n   .col-endpoint[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIUsagePanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-usage-panel', template: "<div class=\"usage-panel\">\n    <mj-loading *ngIf=\"IsLoading\" text=\"Loading usage analytics...\"></mj-loading>\n\n    <ng-container *ngIf=\"!IsLoading\">\n        <!-- Header -->\n        <div class=\"panel-header\">\n            <div class=\"header-left\">\n                <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-chart-line\"></i>\n                    API Usage Analytics\n                </h3>\n                <p class=\"panel-subtitle\">Monitor API key usage, performance, and trends</p>\n            </div>\n            <div class=\"time-filters\">\n                <button class=\"time-btn\" [class.active]=\"TimeRange === 'day'\"\n                        (click)=\"setTimeRange('day')\">24 Hours</button>\n                <button class=\"time-btn\" [class.active]=\"TimeRange === 'week'\"\n                        (click)=\"setTimeRange('week')\">7 Days</button>\n                <button class=\"time-btn\" [class.active]=\"TimeRange === 'month'\"\n                        (click)=\"setTimeRange('month')\">30 Days</button>\n                <button class=\"time-btn\" [class.active]=\"TimeRange === 'all'\"\n                        (click)=\"setTimeRange('all')\">All Time</button>\n            </div>\n        </div>\n\n        <!-- Summary KPIs -->\n        <div class=\"kpi-grid\">\n            <div class=\"kpi-card\">\n                <div class=\"kpi-icon requests\">\n                    <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{formatNumber(TotalRequests)}}</div>\n                    <div class=\"kpi-label\">Total Requests</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\" [class.success]=\"SuccessRate >= 95\">\n                <div class=\"kpi-icon success-rate\">\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{SuccessRate}}%</div>\n                    <div class=\"kpi-label\">Success Rate</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\" [class.warning]=\"TotalErrors > 0\">\n                <div class=\"kpi-icon errors\">\n                    <i class=\"fa-solid fa-circle-exclamation\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{formatNumber(TotalErrors)}}</div>\n                    <div class=\"kpi-label\">Errors</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\">\n                <div class=\"kpi-icon response-time\">\n                    <i class=\"fa-solid fa-gauge-high\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{AvgResponseTime}}ms</div>\n                    <div class=\"kpi-label\">Avg Response Time</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\">\n                <div class=\"kpi-icon keys\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{UniqueKeys}}</div>\n                    <div class=\"kpi-label\">Active Keys</div>\n                </div>\n            </div>\n\n            <div class=\"kpi-card\">\n                <div class=\"kpi-icon endpoints\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                </div>\n                <div class=\"kpi-content\">\n                    <div class=\"kpi-value\">{{UniqueEndpoints}}</div>\n                    <div class=\"kpi-label\">Unique Endpoints</div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Usage Chart -->\n        <div class=\"chart-section\">\n            <div class=\"chart-header\">\n                <h4>Request Volume</h4>\n                <div class=\"chart-legend\">\n                    <span class=\"legend-item\">\n                        <span class=\"legend-color requests\"></span> Requests\n                    </span>\n                    <span class=\"legend-item\">\n                        <span class=\"legend-color errors\"></span> Errors\n                    </span>\n                </div>\n            </div>\n            <div class=\"chart-container\" *ngIf=\"TimeBuckets.length > 0\">\n                <div class=\"chart-bars\">\n                    <div class=\"bar-group\" *ngFor=\"let bucket of TimeBuckets\" [title]=\"bucket.requests + ' requests, ' + bucket.errors + ' errors'\">\n                        <div class=\"bar-wrapper\">\n                            <div class=\"bar requests-bar\"\n                                 [style.height.%]=\"getBarHeight(bucket.requests)\">\n                                <div class=\"bar errors-bar\"\n                                     [style.height.%]=\"getErrorBarHeight(bucket)\"\n                                     *ngIf=\"bucket.errors > 0\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"bar-label\">{{bucket.label}}</div>\n                    </div>\n                </div>\n                <div class=\"chart-y-axis\">\n                    <span>{{formatNumber(MaxRequests)}}</span>\n                    <span>{{formatNumber(Math.round(MaxRequests / 2))}}</span>\n                    <span>0</span>\n                </div>\n            </div>\n            <div class=\"empty-chart\" *ngIf=\"TimeBuckets.length === 0\">\n                <i class=\"fa-solid fa-chart-area\"></i>\n                <span>No usage data available</span>\n            </div>\n        </div>\n\n        <!-- Breakdown Grid -->\n        <div class=\"breakdown-grid\">\n            <!-- Top Endpoints -->\n            <div class=\"breakdown-card\">\n                <div class=\"breakdown-header\">\n                    <h4>\n                        <i class=\"fa-solid fa-code-branch\"></i>\n                        Top Endpoints\n                    </h4>\n                </div>\n                <div class=\"breakdown-content\">\n                    <div class=\"endpoint-list\" *ngIf=\"TopEndpoints.length > 0\">\n                        <div class=\"endpoint-item\" *ngFor=\"let ep of TopEndpoints\"\n                             (click)=\"drillDownEndpoint(ep)\">\n                            <div class=\"endpoint-info\">\n                                <span class=\"method-badge\" [ngClass]=\"getMethodClass(ep.method)\">\n                                    {{ep.method}}\n                                </span>\n                                <span class=\"endpoint-path\">{{ep.endpoint}}</span>\n                            </div>\n                            <div class=\"endpoint-stats\">\n                                <span class=\"endpoint-requests\">{{formatNumber(ep.requests)}}</span>\n                                <span class=\"endpoint-time\">{{ep.avgResponseTime}}ms</span>\n                                <span class=\"endpoint-error\" [class.has-errors]=\"ep.errorRate > 0\">\n                                    {{ep.errorRate}}% err\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"TopEndpoints.length === 0\">\n                        <i class=\"fa-solid fa-code-branch\"></i>\n                        <span>No endpoint data</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Top Keys -->\n            <div class=\"breakdown-card\">\n                <div class=\"breakdown-header\">\n                    <h4>\n                        <i class=\"fa-solid fa-key\"></i>\n                        Most Active Keys\n                    </h4>\n                </div>\n                <div class=\"breakdown-content\">\n                    <div class=\"key-list\" *ngIf=\"TopKeys.length > 0\">\n                        <div class=\"key-item\" *ngFor=\"let key of TopKeys\"\n                             (click)=\"drillDownKey(key)\">\n                            <div class=\"key-info\">\n                                <span class=\"key-label\">{{key.label}}</span>\n                                <span class=\"key-last-used\">{{formatDate(key.lastUsed)}}</span>\n                            </div>\n                            <div class=\"key-requests\">{{formatNumber(key.requests)}}</div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"TopKeys.length === 0\">\n                        <i class=\"fa-solid fa-key\"></i>\n                        <span>No key data</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Status Distribution -->\n            <div class=\"breakdown-card\">\n                <div class=\"breakdown-header\">\n                    <h4>\n                        <i class=\"fa-solid fa-circle-half-stroke\"></i>\n                        Status Distribution\n                    </h4>\n                </div>\n                <div class=\"breakdown-content\">\n                    <div class=\"status-distribution\" *ngIf=\"StatusGroups.length > 0\">\n                        <div class=\"status-bar\">\n                            <div class=\"status-segment\" *ngFor=\"let group of StatusGroups\"\n                                 [style.width.%]=\"group.percentage\"\n                                 [style.backgroundColor]=\"group.color\"\n                                 [title]=\"group.label + ': ' + group.count + ' (' + group.percentage + '%)'\">\n                            </div>\n                        </div>\n                        <div class=\"status-legend\">\n                            <div class=\"status-legend-item\" *ngFor=\"let group of StatusGroups\">\n                                <span class=\"status-color\" [style.backgroundColor]=\"group.color\"></span>\n                                <span class=\"status-label\">{{group.label}}</span>\n                                <span class=\"status-count\">{{formatNumber(group.count)}} ({{group.percentage}}%)</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"empty-state\" *ngIf=\"StatusGroups.length === 0\">\n                        <i class=\"fa-solid fa-circle-half-stroke\"></i>\n                        <span>No status data</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Recent Logs -->\n        <div class=\"logs-section\">\n            <div class=\"logs-header\">\n                <h4>\n                    <i class=\"fa-solid fa-list\"></i>\n                    Recent Requests\n                </h4>\n            </div>\n            <div class=\"logs-table\" *ngIf=\"RecentLogs.length > 0\">\n                <div class=\"logs-table-header\">\n                    <span class=\"col-time\">Time</span>\n                    <span class=\"col-key\">API Key</span>\n                    <span class=\"col-method\">Method</span>\n                    <span class=\"col-endpoint\">Endpoint</span>\n                    <span class=\"col-status\">Status</span>\n                    <span class=\"col-duration\">Duration</span>\n                </div>\n                <div class=\"logs-table-body\">\n                    <div class=\"log-row\" *ngFor=\"let log of RecentLogs\">\n                        <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                        <span class=\"col-key\">{{log.keyLabel}}</span>\n                        <span class=\"col-method\">\n                            <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                                {{log.method}}\n                            </span>\n                        </span>\n                        <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                        <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                            {{log.statusCode}}\n                        </span>\n                        <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"empty-state large\" *ngIf=\"RecentLogs.length === 0\">\n                <i class=\"fa-solid fa-inbox\"></i>\n                <span>No requests logged yet</span>\n                <p>API usage will appear here once keys are used</p>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- Drill-down Panel -->\n    <kendo-window *ngIf=\"ShowLogsPanel\"\n                  [width]=\"800\"\n                  [minWidth]=\"600\"\n                  [height]=\"500\"\n                  [minHeight]=\"400\"\n                  [resizable]=\"true\"\n                  [draggable]=\"true\"\n                  [top]=\"80\"\n                  (close)=\"closeLogsPanel()\">\n        <kendo-window-titlebar>\n            <div class=\"drilldown-title\">\n                <i class=\"fa-solid fa-magnifying-glass-chart\"></i>\n                <span>Request Details</span>\n                <span class=\"filter-badge\" *ngIf=\"LogsFilter.endpoint\">\n                    {{LogsFilter.endpoint}}\n                </span>\n                <span class=\"filter-badge\" *ngIf=\"LogsFilter.keyId\">\n                    Key: {{KeyMap.get(LogsFilter.keyId) || 'Unknown'}}\n                </span>\n            </div>\n            <button kendoButton fillMode=\"flat\" (click)=\"closeLogsPanel()\" class=\"window-close-btn\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </kendo-window-titlebar>\n\n        <div class=\"drilldown-content\">\n            <mj-loading *ngIf=\"IsLoadingLogs\" text=\"Loading requests...\"></mj-loading>\n            <div class=\"drilldown-logs\" *ngIf=\"!IsLoadingLogs\">\n                <div class=\"logs-table\">\n                    <div class=\"logs-table-header\">\n                        <span class=\"col-time\">Time</span>\n                        <span class=\"col-key\">API Key</span>\n                        <span class=\"col-method\">Method</span>\n                        <span class=\"col-endpoint\">Endpoint</span>\n                        <span class=\"col-status\">Status</span>\n                        <span class=\"col-duration\">Duration</span>\n                    </div>\n                    <div class=\"logs-table-body scrollable\">\n                        <div class=\"log-row\" *ngFor=\"let log of RecentLogs\">\n                            <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                            <span class=\"col-key\">{{log.keyLabel}}</span>\n                            <span class=\"col-method\">\n                                <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                                    {{log.method}}\n                                </span>\n                            </span>\n                            <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                            <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                                {{log.statusCode}}\n                            </span>\n                            <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </kendo-window>\n</div>\n", styles: [".usage-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: #f8fafc;\n    min-height: 100%;\n}\n\n/* Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.header-left {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.panel-title i {\n    color: #6366f1;\n}\n\n.panel-subtitle {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n/* Time Filters */\n.time-filters {\n    display: flex;\n    gap: 4px;\n    background: white;\n    padding: 4px;\n    border-radius: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.time-btn {\n    padding: 8px 16px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.time-btn:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.time-btn.active {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n/* KPI Grid */\n.kpi-grid {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 18px 20px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n.kpi-card.success {\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.kpi-card.warning {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n}\n\n.kpi-icon {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    font-size: 18px;\n}\n\n.kpi-icon.requests {\n    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n    color: #2563eb;\n}\n\n.kpi-icon.success-rate {\n    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n    color: #059669;\n}\n\n.kpi-icon.errors {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #dc2626;\n}\n\n.kpi-icon.response-time {\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    color: #4f46e5;\n}\n\n.kpi-icon.keys {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #d97706;\n}\n\n.kpi-icon.endpoints {\n    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n    color: #7c3aed;\n}\n\n.kpi-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.kpi-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n/* Chart Section */\n.chart-section {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.chart-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.chart-header h4 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.chart-legend {\n    display: flex;\n    gap: 16px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.requests {\n    background: #6366f1;\n}\n\n.legend-color.errors {\n    background: #ef4444;\n}\n\n.chart-container {\n    display: flex;\n    height: 200px;\n    gap: 8px;\n}\n\n.chart-bars {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    padding-bottom: 24px;\n}\n\n.bar-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n}\n\n.bar-wrapper {\n    width: 100%;\n    height: 160px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n}\n\n.bar {\n    width: 100%;\n    max-width: 32px;\n    border-radius: 4px 4px 0 0;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.bar.requests-bar {\n    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);\n}\n\n.bar.requests-bar:hover {\n    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);\n}\n\n.bar.errors-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: #ef4444;\n    border-radius: 0;\n}\n\n.bar-label {\n    margin-top: 8px;\n    font-size: 10px;\n    color: #9ca3af;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 100%;\n}\n\n.chart-y-axis {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding-bottom: 24px;\n    font-size: 10px;\n    color: #9ca3af;\n    text-align: right;\n    min-width: 40px;\n}\n\n.empty-chart {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 200px;\n    color: #9ca3af;\n}\n\n.empty-chart i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* Breakdown Grid */\n.breakdown-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n.breakdown-card {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.breakdown-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.breakdown-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.breakdown-header h4 i {\n    color: #6b7280;\n}\n\n.breakdown-content {\n    padding: 12px;\n    max-height: 280px;\n    overflow-y: auto;\n}\n\n/* Endpoint List */\n.endpoint-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.endpoint-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.endpoint-item:hover {\n    background: #f3f4f6;\n}\n\n.endpoint-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.method-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.method-get { background: #dbeafe; color: #2563eb; }\n.method-post { background: #d1fae5; color: #059669; }\n.method-put { background: #fef3c7; color: #d97706; }\n.method-delete { background: #fee2e2; color: #dc2626; }\n.method-other { background: #f3f4f6; color: #6b7280; }\n\n.endpoint-path {\n    font-size: 12px;\n    font-family: 'Fira Code', monospace;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.endpoint-stats {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.endpoint-requests {\n    font-weight: 600;\n    color: #6366f1;\n}\n\n.endpoint-time {\n    color: #6b7280;\n}\n\n.endpoint-error {\n    color: #10b981;\n}\n\n.endpoint-error.has-errors {\n    color: #ef4444;\n    font-weight: 500;\n}\n\n/* Key List */\n.key-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.key-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item:hover {\n    background: #f3f4f6;\n}\n\n.key-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.key-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-last-used {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.key-requests {\n    font-size: 14px;\n    font-weight: 600;\n    color: #6366f1;\n}\n\n/* Status Distribution */\n.status-distribution {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.status-bar {\n    display: flex;\n    height: 24px;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #f3f4f6;\n}\n\n.status-segment {\n    transition: all 0.3s ease;\n}\n\n.status-segment:hover {\n    filter: brightness(1.1);\n}\n\n.status-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.status-legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.status-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.status-label {\n    flex: 1;\n    color: #374151;\n}\n\n.status-count {\n    color: #6b7280;\n    font-weight: 500;\n}\n\n/* Logs Section */\n.logs-section {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.logs-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.logs-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.logs-header h4 i {\n    color: #6b7280;\n}\n\n.logs-table {\n    width: 100%;\n}\n\n.logs-table-header {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    background: #f3f4f6;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.logs-table-body {\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.logs-table-body.scrollable {\n    max-height: 380px;\n}\n\n.log-row {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.2s ease;\n}\n\n.log-row:hover {\n    background: #f9fafb;\n}\n\n.col-time {\n    color: #6b7280;\n    font-size: 12px;\n}\n\n.col-key {\n    color: #374151;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-endpoint {\n    font-family: 'Fira Code', monospace;\n    font-size: 12px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-status {\n    font-weight: 600;\n    text-align: center;\n}\n\n.col-status.status-success { color: #10b981; }\n.col-status.status-info { color: #3b82f6; }\n.col-status.status-warning { color: #f59e0b; }\n.col-status.status-error { color: #ef4444; }\n\n.col-duration {\n    color: #6b7280;\n    text-align: right;\n}\n\n/* Empty States */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 20px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.empty-state.large {\n    padding: 48px 24px;\n}\n\n.empty-state.large i {\n    font-size: 48px;\n}\n\n.empty-state p {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n}\n\n/* Drill-down Window */\n.drilldown-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.drilldown-title i {\n    color: #6366f1;\n}\n\n.filter-badge {\n    padding: 4px 10px;\n    background: #e0e7ff;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #4f46e5;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: #9ca3af;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.drilldown-content {\n    height: 100%;\n    overflow: hidden;\n}\n\n.drilldown-logs {\n    height: 100%;\n}\n\n/* Kendo Window Styling */\n:host ::ng-deep kendo-window {\n    border-radius: 12px !important;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    padding: 16px 20px !important;\n    background: #f9fafb !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n/* Responsive */\n@media (max-width: 1400px) {\n    .kpi-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n@media (max-width: 1200px) {\n    .breakdown-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 900px) {\n    .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .breakdown-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 80px 100px 60px 1fr 60px;\n    }\n\n    .col-duration {\n        display: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .panel-header {\n        flex-direction: column;\n    }\n\n    .time-filters {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .kpi-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 1fr 60px;\n    }\n\n    .col-key,\n    .col-method,\n    .col-endpoint {\n        display: none;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-usage-panel', template: "<div class=\"usage-panel\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading usage analytics...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <h3 class=\"panel-title\">\n          <i class=\"fa-solid fa-chart-line\"></i>\n          API Usage Analytics\n        </h3>\n        <p class=\"panel-subtitle\">Monitor API key usage, performance, and trends</p>\n      </div>\n      <div class=\"time-filters\">\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'day'\"\n        (click)=\"setTimeRange('day')\">24 Hours</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'week'\"\n        (click)=\"setTimeRange('week')\">7 Days</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'month'\"\n        (click)=\"setTimeRange('month')\">30 Days</button>\n        <button class=\"time-btn\" [class.active]=\"TimeRange === 'all'\"\n        (click)=\"setTimeRange('all')\">All Time</button>\n      </div>\n    </div>\n    <!-- Summary KPIs -->\n    <div class=\"kpi-grid\">\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon requests\">\n          <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{formatNumber(TotalRequests)}}</div>\n          <div class=\"kpi-label\">Total Requests</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\" [class.success]=\"SuccessRate >= 95\">\n        <div class=\"kpi-icon success-rate\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{SuccessRate}}%</div>\n          <div class=\"kpi-label\">Success Rate</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\" [class.warning]=\"TotalErrors > 0\">\n        <div class=\"kpi-icon errors\">\n          <i class=\"fa-solid fa-circle-exclamation\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{formatNumber(TotalErrors)}}</div>\n          <div class=\"kpi-label\">Errors</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon response-time\">\n          <i class=\"fa-solid fa-gauge-high\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{AvgResponseTime}}ms</div>\n          <div class=\"kpi-label\">Avg Response Time</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon keys\">\n          <i class=\"fa-solid fa-key\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{UniqueKeys}}</div>\n          <div class=\"kpi-label\">Active Keys</div>\n        </div>\n      </div>\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon endpoints\">\n          <i class=\"fa-solid fa-code-branch\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <div class=\"kpi-value\">{{UniqueEndpoints}}</div>\n          <div class=\"kpi-label\">Unique Endpoints</div>\n        </div>\n      </div>\n    </div>\n    <!-- Usage Chart -->\n    <div class=\"chart-section\">\n      <div class=\"chart-header\">\n        <h4>Request Volume</h4>\n        <div class=\"chart-legend\">\n          <span class=\"legend-item\">\n            <span class=\"legend-color requests\"></span> Requests\n          </span>\n          <span class=\"legend-item\">\n            <span class=\"legend-color errors\"></span> Errors\n          </span>\n        </div>\n      </div>\n      @if (TimeBuckets.length > 0) {\n        <div class=\"chart-container\">\n          <div class=\"chart-bars\">\n            @for (bucket of TimeBuckets; track bucket) {\n              <div class=\"bar-group\" [title]=\"bucket.requests + ' requests, ' + bucket.errors + ' errors'\">\n                <div class=\"bar-wrapper\">\n                  <div class=\"bar requests-bar\"\n                    [style.height.%]=\"getBarHeight(bucket.requests)\">\n                    @if (bucket.errors > 0) {\n                      <div class=\"bar errors-bar\"\n                        [style.height.%]=\"getErrorBarHeight(bucket)\"\n                        >\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"bar-label\">{{bucket.label}}</div>\n              </div>\n            }\n          </div>\n          <div class=\"chart-y-axis\">\n            <span>{{formatNumber(MaxRequests)}}</span>\n            <span>{{formatNumber(Math.round(MaxRequests / 2))}}</span>\n            <span>0</span>\n          </div>\n        </div>\n      }\n      @if (TimeBuckets.length === 0) {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <span>No usage data available</span>\n        </div>\n      }\n    </div>\n    <!-- Breakdown Grid -->\n    <div class=\"breakdown-grid\">\n      <!-- Top Endpoints -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-code-branch\"></i>\n            Top Endpoints\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (TopEndpoints.length > 0) {\n            <div class=\"endpoint-list\">\n              @for (ep of TopEndpoints; track ep) {\n                <div class=\"endpoint-item\"\n                  (click)=\"drillDownEndpoint(ep)\">\n                  <div class=\"endpoint-info\">\n                    <span class=\"method-badge\" [ngClass]=\"getMethodClass(ep.method)\">\n                      {{ep.method}}\n                    </span>\n                    <span class=\"endpoint-path\">{{ep.endpoint}}</span>\n                  </div>\n                  <div class=\"endpoint-stats\">\n                    <span class=\"endpoint-requests\">{{formatNumber(ep.requests)}}</span>\n                    <span class=\"endpoint-time\">{{ep.avgResponseTime}}ms</span>\n                    <span class=\"endpoint-error\" [class.has-errors]=\"ep.errorRate > 0\">\n                      {{ep.errorRate}}% err\n                    </span>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n          @if (TopEndpoints.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              <span>No endpoint data</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Top Keys -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-key\"></i>\n            Most Active Keys\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (TopKeys.length > 0) {\n            <div class=\"key-list\">\n              @for (key of TopKeys; track key) {\n                <div class=\"key-item\"\n                  (click)=\"drillDownKey(key)\">\n                  <div class=\"key-info\">\n                    <span class=\"key-label\">{{key.label}}</span>\n                    <span class=\"key-last-used\">{{formatDate(key.lastUsed)}}</span>\n                  </div>\n                  <div class=\"key-requests\">{{formatNumber(key.requests)}}</div>\n                </div>\n              }\n            </div>\n          }\n          @if (TopKeys.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-key\"></i>\n              <span>No key data</span>\n            </div>\n          }\n        </div>\n      </div>\n      <!-- Status Distribution -->\n      <div class=\"breakdown-card\">\n        <div class=\"breakdown-header\">\n          <h4>\n            <i class=\"fa-solid fa-circle-half-stroke\"></i>\n            Status Distribution\n          </h4>\n        </div>\n        <div class=\"breakdown-content\">\n          @if (StatusGroups.length > 0) {\n            <div class=\"status-distribution\">\n              <div class=\"status-bar\">\n                @for (group of StatusGroups; track group) {\n                  <div class=\"status-segment\"\n                    [style.width.%]=\"group.percentage\"\n                    [style.backgroundColor]=\"group.color\"\n                    [title]=\"group.label + ': ' + group.count + ' (' + group.percentage + '%)'\">\n                  </div>\n                }\n              </div>\n              <div class=\"status-legend\">\n                @for (group of StatusGroups; track group) {\n                  <div class=\"status-legend-item\">\n                    <span class=\"status-color\" [style.backgroundColor]=\"group.color\"></span>\n                    <span class=\"status-label\">{{group.label}}</span>\n                    <span class=\"status-count\">{{formatNumber(group.count)}} ({{group.percentage}}%)</span>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @if (StatusGroups.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-circle-half-stroke\"></i>\n              <span>No status data</span>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <!-- Recent Logs -->\n    <div class=\"logs-section\">\n      <div class=\"logs-header\">\n        <h4>\n          <i class=\"fa-solid fa-list\"></i>\n          Recent Requests\n        </h4>\n      </div>\n      @if (RecentLogs.length > 0) {\n        <div class=\"logs-table\">\n          <div class=\"logs-table-header\">\n            <span class=\"col-time\">Time</span>\n            <span class=\"col-key\">API Key</span>\n            <span class=\"col-method\">Method</span>\n            <span class=\"col-endpoint\">Endpoint</span>\n            <span class=\"col-status\">Status</span>\n            <span class=\"col-duration\">Duration</span>\n          </div>\n          <div class=\"logs-table-body\">\n            @for (log of RecentLogs; track log) {\n              <div class=\"log-row\">\n                <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                <span class=\"col-key\">{{log.keyLabel}}</span>\n                <span class=\"col-method\">\n                  <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                    {{log.method}}\n                  </span>\n                </span>\n                <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                  {{log.statusCode}}\n                </span>\n                <span class=\"col-duration\">{{log.responseTime}}ms</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @if (RecentLogs.length === 0) {\n        <div class=\"empty-state large\">\n          <i class=\"fa-solid fa-inbox\"></i>\n          <span>No requests logged yet</span>\n          <p>API usage will appear here once keys are used</p>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Drill-down Panel -->\n  @if (ShowLogsPanel) {\n    <kendo-window\n      [width]=\"800\"\n      [minWidth]=\"600\"\n      [height]=\"500\"\n      [minHeight]=\"400\"\n      [resizable]=\"true\"\n      [draggable]=\"true\"\n      [top]=\"80\"\n      (close)=\"closeLogsPanel()\">\n      <kendo-window-titlebar>\n        <div class=\"drilldown-title\">\n          <i class=\"fa-solid fa-magnifying-glass-chart\"></i>\n          <span>Request Details</span>\n          @if (LogsFilter.endpoint) {\n            <span class=\"filter-badge\">\n              {{LogsFilter.endpoint}}\n            </span>\n          }\n          @if (LogsFilter.keyId) {\n            <span class=\"filter-badge\">\n              Key: {{KeyMap.get(LogsFilter.keyId) || 'Unknown'}}\n            </span>\n          }\n        </div>\n        <button kendoButton fillMode=\"flat\" (click)=\"closeLogsPanel()\" class=\"window-close-btn\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </kendo-window-titlebar>\n      <div class=\"drilldown-content\">\n        @if (IsLoadingLogs) {\n          <mj-loading text=\"Loading requests...\"></mj-loading>\n        }\n        @if (!IsLoadingLogs) {\n          <div class=\"drilldown-logs\">\n            <div class=\"logs-table\">\n              <div class=\"logs-table-header\">\n                <span class=\"col-time\">Time</span>\n                <span class=\"col-key\">API Key</span>\n                <span class=\"col-method\">Method</span>\n                <span class=\"col-endpoint\">Endpoint</span>\n                <span class=\"col-status\">Status</span>\n                <span class=\"col-duration\">Duration</span>\n              </div>\n              <div class=\"logs-table-body scrollable\">\n                @for (log of RecentLogs; track log) {\n                  <div class=\"log-row\">\n                    <span class=\"col-time\">{{formatDate(log.timestamp)}}</span>\n                    <span class=\"col-key\">{{log.keyLabel}}</span>\n                    <span class=\"col-method\">\n                      <span class=\"method-badge\" [ngClass]=\"getMethodClass(log.method)\">\n                        {{log.method}}\n                      </span>\n                    </span>\n                    <span class=\"col-endpoint\">{{log.endpoint}}</span>\n                    <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                      {{log.statusCode}}\n                    </span>\n                    <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </kendo-window>\n  }\n</div>\n", styles: [".usage-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 24px;\n    background: #f8fafc;\n    min-height: 100%;\n}\n\n/* Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.header-left {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.panel-title i {\n    color: #6366f1;\n}\n\n.panel-subtitle {\n    margin: 0;\n    font-size: 14px;\n    color: #6b7280;\n}\n\n/* Time Filters */\n.time-filters {\n    display: flex;\n    gap: 4px;\n    background: white;\n    padding: 4px;\n    border-radius: 10px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.time-btn {\n    padding: 8px 16px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.time-btn:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.time-btn.active {\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n/* KPI Grid */\n.kpi-grid {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 16px;\n}\n\n.kpi-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 18px 20px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n.kpi-card.success {\n    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);\n}\n\n.kpi-card.warning {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n}\n\n.kpi-icon {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    font-size: 18px;\n}\n\n.kpi-icon.requests {\n    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n    color: #2563eb;\n}\n\n.kpi-icon.success-rate {\n    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);\n    color: #059669;\n}\n\n.kpi-icon.errors {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #dc2626;\n}\n\n.kpi-icon.response-time {\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    color: #4f46e5;\n}\n\n.kpi-icon.keys {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #d97706;\n}\n\n.kpi-icon.endpoints {\n    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n    color: #7c3aed;\n}\n\n.kpi-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.kpi-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: #1f2937;\n}\n\n.kpi-label {\n    font-size: 12px;\n    color: #6b7280;\n}\n\n/* Chart Section */\n.chart-section {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.chart-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.chart-header h4 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.chart-legend {\n    display: flex;\n    gap: 16px;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6b7280;\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.requests {\n    background: #6366f1;\n}\n\n.legend-color.errors {\n    background: #ef4444;\n}\n\n.chart-container {\n    display: flex;\n    height: 200px;\n    gap: 8px;\n}\n\n.chart-bars {\n    flex: 1;\n    display: flex;\n    align-items: flex-end;\n    gap: 4px;\n    padding-bottom: 24px;\n}\n\n.bar-group {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n}\n\n.bar-wrapper {\n    width: 100%;\n    height: 160px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n}\n\n.bar {\n    width: 100%;\n    max-width: 32px;\n    border-radius: 4px 4px 0 0;\n    transition: all 0.3s ease;\n    position: relative;\n}\n\n.bar.requests-bar {\n    background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);\n}\n\n.bar.requests-bar:hover {\n    background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);\n}\n\n.bar.errors-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: #ef4444;\n    border-radius: 0;\n}\n\n.bar-label {\n    margin-top: 8px;\n    font-size: 10px;\n    color: #9ca3af;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    max-width: 100%;\n}\n\n.chart-y-axis {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding-bottom: 24px;\n    font-size: 10px;\n    color: #9ca3af;\n    text-align: right;\n    min-width: 40px;\n}\n\n.empty-chart {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 200px;\n    color: #9ca3af;\n}\n\n.empty-chart i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n/* Breakdown Grid */\n.breakdown-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n.breakdown-card {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.breakdown-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.breakdown-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.breakdown-header h4 i {\n    color: #6b7280;\n}\n\n.breakdown-content {\n    padding: 12px;\n    max-height: 280px;\n    overflow-y: auto;\n}\n\n/* Endpoint List */\n.endpoint-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.endpoint-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.endpoint-item:hover {\n    background: #f3f4f6;\n}\n\n.endpoint-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.method-badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.method-get { background: #dbeafe; color: #2563eb; }\n.method-post { background: #d1fae5; color: #059669; }\n.method-put { background: #fef3c7; color: #d97706; }\n.method-delete { background: #fee2e2; color: #dc2626; }\n.method-other { background: #f3f4f6; color: #6b7280; }\n\n.endpoint-path {\n    font-size: 12px;\n    font-family: 'Fira Code', monospace;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.endpoint-stats {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n\n.endpoint-requests {\n    font-weight: 600;\n    color: #6366f1;\n}\n\n.endpoint-time {\n    color: #6b7280;\n}\n\n.endpoint-error {\n    color: #10b981;\n}\n\n.endpoint-error.has-errors {\n    color: #ef4444;\n    font-weight: 500;\n}\n\n/* Key List */\n.key-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.key-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 12px;\n    background: #f9fafb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.key-item:hover {\n    background: #f3f4f6;\n}\n\n.key-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.key-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-last-used {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.key-requests {\n    font-size: 14px;\n    font-weight: 600;\n    color: #6366f1;\n}\n\n/* Status Distribution */\n.status-distribution {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.status-bar {\n    display: flex;\n    height: 24px;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #f3f4f6;\n}\n\n.status-segment {\n    transition: all 0.3s ease;\n}\n\n.status-segment:hover {\n    filter: brightness(1.1);\n}\n\n.status-legend {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.status-legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n\n.status-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.status-label {\n    flex: 1;\n    color: #374151;\n}\n\n.status-count {\n    color: #6b7280;\n    font-weight: 500;\n}\n\n/* Logs Section */\n.logs-section {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n}\n\n.logs-header {\n    padding: 16px 20px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.logs-header h4 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #374151;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.logs-header h4 i {\n    color: #6b7280;\n}\n\n.logs-table {\n    width: 100%;\n}\n\n.logs-table-header {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    background: #f3f4f6;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.logs-table-body {\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.logs-table-body.scrollable {\n    max-height: 380px;\n}\n\n.log-row {\n    display: grid;\n    grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n    gap: 12px;\n    padding: 12px 20px;\n    border-bottom: 1px solid #f3f4f6;\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.2s ease;\n}\n\n.log-row:hover {\n    background: #f9fafb;\n}\n\n.col-time {\n    color: #6b7280;\n    font-size: 12px;\n}\n\n.col-key {\n    color: #374151;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-endpoint {\n    font-family: 'Fira Code', monospace;\n    font-size: 12px;\n    color: #374151;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.col-status {\n    font-weight: 600;\n    text-align: center;\n}\n\n.col-status.status-success { color: #10b981; }\n.col-status.status-info { color: #3b82f6; }\n.col-status.status-warning { color: #f59e0b; }\n.col-status.status-error { color: #ef4444; }\n\n.col-duration {\n    color: #6b7280;\n    text-align: right;\n}\n\n/* Empty States */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 20px;\n    color: #9ca3af;\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.empty-state.large {\n    padding: 48px 24px;\n}\n\n.empty-state.large i {\n    font-size: 48px;\n}\n\n.empty-state p {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n}\n\n/* Drill-down Window */\n.drilldown-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n    font-size: 15px;\n}\n\n.drilldown-title i {\n    color: #6366f1;\n}\n\n.filter-badge {\n    padding: 4px 10px;\n    background: #e0e7ff;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #4f46e5;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: #9ca3af;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.drilldown-content {\n    height: 100%;\n    overflow: hidden;\n}\n\n.drilldown-logs {\n    height: 100%;\n}\n\n/* Kendo Window Styling */\n:host ::ng-deep kendo-window {\n    border-radius: 12px !important;\n    overflow: hidden;\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    padding: 16px 20px !important;\n    background: #f9fafb !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n/* Responsive */\n@media (max-width: 1400px) {\n    .kpi-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n@media (max-width: 1200px) {\n    .breakdown-grid {\n        grid-template-columns: 1fr 1fr;\n    }\n}\n\n@media (max-width: 900px) {\n    .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .breakdown-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 80px 100px 60px 1fr 60px;\n    }\n\n    .col-duration {\n        display: none;\n    }\n}\n\n@media (max-width: 600px) {\n    .panel-header {\n        flex-direction: column;\n    }\n\n    .time-filters {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .kpi-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .logs-table-header,\n    .log-row {\n        grid-template-columns: 1fr 60px;\n    }\n\n    .col-key,\n    .col-method,\n    .col-endpoint {\n        display: none;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIUsagePanelComponent, { className: "APIUsagePanelComponent", filePath: "src/APIKeys/api-usage-panel.component.ts", lineNumber: 66 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIUsagePanelComponent, { className: "APIUsagePanelComponent", filePath: "src/apikeys/api-usage-panel.component.ts", lineNumber: 61 }); })();
 //# sourceMappingURL=api-usage-panel.component.js.map