@memberjunction/ng-dashboards 5.10.1 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (231) hide show
  1. package/dist/AI/components/agents/agent-configuration.component.d.ts +34 -2
  2. package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
  3. package/dist/AI/components/agents/agent-configuration.component.js +586 -223
  4. package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
  5. package/dist/AI/components/agents/agent-editor.component.js +2 -2
  6. package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
  7. package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
  8. package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
  9. package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
  10. package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
  11. package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
  12. package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
  13. package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
  14. package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
  15. package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
  16. package/dist/AI/components/charts/time-series-chart.component.js +23 -8
  17. package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
  18. package/dist/AI/components/execution-monitoring.component.js +2 -2
  19. package/dist/AI/components/execution-monitoring.component.js.map +1 -1
  20. package/dist/AI/components/models/model-management.component.js +2 -2
  21. package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
  22. package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
  23. package/dist/AI/components/prompts/prompt-management.component.js +3 -3
  24. package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
  25. package/dist/AI/components/prompts/prompt-version-control.component.js +2 -2
  26. package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
  27. package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
  28. package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
  29. package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
  30. package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
  31. package/dist/AI/components/system/system-configuration.component.js +2 -2
  32. package/dist/AI/components/widgets/kpi-card.component.js +7 -7
  33. package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
  34. package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
  35. package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
  36. package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
  37. package/dist/AI/index.d.ts +1 -0
  38. package/dist/AI/index.d.ts.map +1 -1
  39. package/dist/AI/index.js +2 -0
  40. package/dist/AI/index.js.map +1 -1
  41. package/dist/APIKeys/api-applications-panel.component.js +3 -3
  42. package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
  43. package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
  44. package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
  45. package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
  46. package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
  47. package/dist/APIKeys/api-key-list.component.js +3 -3
  48. package/dist/APIKeys/api-key-list.component.js.map +1 -1
  49. package/dist/APIKeys/api-keys-resource.component.js +1 -1
  50. package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
  51. package/dist/APIKeys/api-scopes-panel.component.js +2 -2
  52. package/dist/APIKeys/api-usage-panel.component.js +2 -2
  53. package/dist/Actions/components/actions-overview.component.js +2 -2
  54. package/dist/Actions/components/execution-monitoring.component.js +2 -2
  55. package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
  56. package/dist/Actions/components/explorer/action-card.component.js +2 -2
  57. package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
  58. package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
  59. package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
  60. package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
  61. package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
  62. package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
  63. package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
  64. package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
  65. package/dist/Communication/communication-dashboard.component.js +2 -2
  66. package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
  67. package/dist/Communication/communication-logs-resource.component.js +3 -3
  68. package/dist/Communication/communication-logs-resource.component.js.map +1 -1
  69. package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
  70. package/dist/Communication/communication-monitor-resource.component.js +5 -5
  71. package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
  72. package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
  73. package/dist/Communication/communication-providers-resource.component.js +3 -3
  74. package/dist/Communication/communication-providers-resource.component.js.map +1 -1
  75. package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
  76. package/dist/Communication/communication-runs-resource.component.js +3 -3
  77. package/dist/Communication/communication-runs-resource.component.js.map +1 -1
  78. package/dist/Communication/communication-templates-resource.component.js +2 -2
  79. package/dist/Communication/communication-templates-resource.component.js.map +1 -1
  80. package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
  81. package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
  82. package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
  83. package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
  84. package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
  85. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
  86. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
  87. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
  88. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
  89. package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
  90. package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
  91. package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
  92. package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
  93. package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
  94. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
  95. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
  96. package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
  97. package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
  98. package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
  99. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
  100. package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
  101. package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
  102. package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
  103. package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
  104. package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
  105. package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
  106. package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
  107. package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
  108. package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
  109. package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
  110. package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
  111. package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
  112. package/dist/Credentials/credentials-dashboard.component.js +2 -2
  113. package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
  114. package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
  115. package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
  116. package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
  117. package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
  118. package/dist/DataExplorer/data-explorer-dashboard.component.d.ts +6 -2
  119. package/dist/DataExplorer/data-explorer-dashboard.component.d.ts.map +1 -1
  120. package/dist/DataExplorer/data-explorer-dashboard.component.js +26 -8
  121. package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
  122. package/dist/Home/home-dashboard.component.js +2 -2
  123. package/dist/Integration/components/activity/activity.component.d.ts +1 -1
  124. package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
  125. package/dist/Integration/components/activity/activity.component.js +5 -5
  126. package/dist/Integration/components/activity/activity.component.js.map +1 -1
  127. package/dist/Integration/components/connections/connections.component.d.ts +31 -2
  128. package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
  129. package/dist/Integration/components/connections/connections.component.js +753 -412
  130. package/dist/Integration/components/connections/connections.component.js.map +1 -1
  131. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
  132. package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
  133. package/dist/Integration/components/overview/overview.component.d.ts +0 -1
  134. package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
  135. package/dist/Integration/components/overview/overview.component.js +3 -6
  136. package/dist/Integration/components/overview/overview.component.js.map +1 -1
  137. package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
  138. package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
  139. package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
  140. package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
  141. package/dist/Integration/components/schedules/schedules.component.js +97 -5
  142. package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
  143. package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
  144. package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
  145. package/dist/Integration/components/widgets/integration-card.component.js +5 -1
  146. package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
  147. package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
  148. package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
  149. package/dist/Integration/integration.module.d.ts +2 -1
  150. package/dist/Integration/integration.module.d.ts.map +1 -1
  151. package/dist/Integration/integration.module.js +7 -3
  152. package/dist/Integration/integration.module.js.map +1 -1
  153. package/dist/Integration/services/integration-data.service.d.ts +27 -2
  154. package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
  155. package/dist/Integration/services/integration-data.service.js +107 -4
  156. package/dist/Integration/services/integration-data.service.js.map +1 -1
  157. package/dist/Lists/components/lists-browse-resource.component.js +2 -2
  158. package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
  159. package/dist/Lists/components/lists-categories-resource.component.js +2 -2
  160. package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
  161. package/dist/Lists/components/lists-my-lists-resource.component.js +2 -2
  162. package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
  163. package/dist/Lists/components/lists-operations-resource.component.js +2 -2
  164. package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
  165. package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
  166. package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
  167. package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
  168. package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
  169. package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
  170. package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
  171. package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
  172. package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
  173. package/dist/MCP/mcp-dashboard.component.js +2 -2
  174. package/dist/MCP/mcp-filter-panel.component.js +2 -2
  175. package/dist/QueryBrowser/query-browser-resource.component.d.ts +55 -1
  176. package/dist/QueryBrowser/query-browser-resource.component.d.ts.map +1 -1
  177. package/dist/QueryBrowser/query-browser-resource.component.js +664 -199
  178. package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
  179. package/dist/Scheduling/components/index.d.ts +0 -1
  180. package/dist/Scheduling/components/index.d.ts.map +1 -1
  181. package/dist/Scheduling/components/index.js +0 -1
  182. package/dist/Scheduling/components/index.js.map +1 -1
  183. package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
  184. package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
  185. package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
  186. package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
  187. package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
  188. package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
  189. package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
  190. package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
  191. package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
  192. package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
  193. package/dist/Testing/components/testing-analytics.component.js +2 -2
  194. package/dist/Testing/components/testing-analytics.component.js.map +1 -1
  195. package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
  196. package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
  197. package/dist/Testing/components/testing-explorer.component.js +2 -2
  198. package/dist/Testing/components/testing-explorer.component.js.map +1 -1
  199. package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
  200. package/dist/Testing/components/testing-review.component.js +5 -5
  201. package/dist/Testing/components/testing-review.component.js.map +1 -1
  202. package/dist/Testing/components/testing-runs.component.js +2 -2
  203. package/dist/Testing/components/testing-runs.component.js.map +1 -1
  204. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
  205. package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
  206. package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
  207. package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
  208. package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
  209. package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
  210. package/dist/Testing/testing-dashboard.component.js +2 -2
  211. package/dist/VersionHistory/components/diff-resource.component.js +2 -2
  212. package/dist/VersionHistory/components/graph-resource.component.js +2 -2
  213. package/dist/VersionHistory/components/labels-resource.component.js +3 -3
  214. package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
  215. package/dist/VersionHistory/components/restore-resource.component.js +3 -3
  216. package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
  217. package/dist/__tests__/integration-data-service.test.js +1 -0
  218. package/dist/__tests__/integration-data-service.test.js.map +1 -1
  219. package/dist/module.d.ts +52 -49
  220. package/dist/module.d.ts.map +1 -1
  221. package/dist/module.js +25 -6
  222. package/dist/module.js.map +1 -1
  223. package/dist/public-api.d.ts +1 -1
  224. package/dist/public-api.d.ts.map +1 -1
  225. package/dist/public-api.js +1 -1
  226. package/dist/public-api.js.map +1 -1
  227. package/package.json +42 -40
  228. package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
  229. package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
  230. package/dist/Scheduling/components/job-slideout.component.js +0 -459
  231. package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
package/dist/APIKeys/api-usage-panel.component.js CHANGED
@@ -1006,11 +1006,11 @@ export class APIUsagePanelComponent {
1006
1006
  i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
1007
1007
  i0.ɵɵadvance();
1008
1008
  i0.ɵɵconditional(ctx.ShowLogsPanel ? 3 : -1);
1009
- } }, 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: var(--mj-bg-page);\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: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 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, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-color-violet-600);\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: var(--mj-text-primary);\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\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, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-neutral-700);\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: var(--mj-text-secondary);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put[_ngcontent-%COMP%] { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-color-neutral-700);\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: var(--mj-color-indigo-500);\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-color-neutral-700);\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: var(--mj-text-muted);\n}\n\n.key-requests[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\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: var(--mj-bg-surface-sunken);\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: var(--mj-color-neutral-700);\n}\n\n.status-count[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-neutral-700);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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 var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n color: var(--mj-color-neutral-700);\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: var(--mj-color-neutral-700);\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: var(--mj-status-success); }\n.col-status.status-info[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n.col-status.status-warning[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.col-status.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\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: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface-hover);\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: var(--mj-shadow-2xl) !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: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !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}"] });
1009
+ } }, 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: var(--mj-bg-page);\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: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 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, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\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, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put[_ngcontent-%COMP%] { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-muted);\n}\n\n.key-requests[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\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: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n}\n\n.status-count[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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 var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\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: var(--mj-status-success); }\n.col-status.status-info[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n.col-status.status-warning[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.col-status.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n background: var(--mj-bg-surface-hover);\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: var(--mj-shadow-2xl) !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: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !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}"] });
1010
1010
  }
1011
1011
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIUsagePanelComponent, [{
1012
1012
  type: Component,
1013
- 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: var(--mj-bg-page);\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: var(--mj-text-primary);\n}\n\n.panel-title i {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n/* Time Filters */\n.time-filters {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.time-btn:hover {\n color: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 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, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-color-violet-600);\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: var(--mj-text-primary);\n}\n\n.kpi-label {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n/* Chart Section */\n.chart-section {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\n}\n\n.legend-color {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.legend-color.requests {\n background: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors {\n background: var(--mj-status-error);\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, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-neutral-700);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.breakdown-header h4 i {\n color: var(--mj-text-secondary);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-color-neutral-700);\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: var(--mj-color-indigo-500);\n}\n\n.endpoint-time {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors {\n color: var(--mj-status-error);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-color-neutral-700);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.key-last-used {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.key-requests {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\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: var(--mj-bg-surface-sunken);\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: var(--mj-color-neutral-700);\n}\n\n.status-count {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n/* Logs Section */\n.logs-section {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-neutral-700);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.logs-header h4 i {\n color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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 var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key {\n color: var(--mj-color-neutral-700);\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: var(--mj-color-neutral-700);\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: var(--mj-status-success); }\n.col-status.status-info { color: var(--mj-status-info); }\n.col-status.status-warning { color: var(--mj-color-warning-500); }\n.col-status.status-error { color: var(--mj-status-error); }\n\n.col-duration {\n color: var(--mj-text-secondary);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.filter-badge {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn {\n margin-left: auto;\n color: var(--mj-text-muted);\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: var(--mj-color-neutral-700);\n background: var(--mj-bg-surface-hover);\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: var(--mj-shadow-2xl) !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: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !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"] }]
1013
+ 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: var(--mj-bg-page);\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: var(--mj-text-primary);\n}\n\n.panel-title i {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n/* Time Filters */\n.time-filters {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.time-btn:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 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, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n}\n\n.kpi-label {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n/* Chart Section */\n.chart-section {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\n}\n\n.legend-color {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.legend-color.requests {\n background: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors {\n background: var(--mj-status-error);\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, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.breakdown-header h4 i {\n color: var(--mj-text-secondary);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.endpoint-time {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors {\n color: var(--mj-status-error);\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: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item:hover {\n background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.key-last-used {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.key-requests {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\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: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n}\n\n.status-count {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n/* Logs Section */\n.logs-section {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.logs-header h4 i {\n color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\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 var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key {\n color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\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: var(--mj-status-success); }\n.col-status.status-info { color: var(--mj-status-info); }\n.col-status.status-warning { color: var(--mj-color-warning-500); }\n.col-status.status-error { color: var(--mj-status-error); }\n\n.col-duration {\n color: var(--mj-text-secondary);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-color-indigo-500);\n}\n\n.filter-badge {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn {\n margin-left: auto;\n color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n background: var(--mj-bg-surface-hover);\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: var(--mj-shadow-2xl) !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: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !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"] }]
1014
1014
  }], () => [{ type: i0.ChangeDetectorRef }], null); })();
1015
1015
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIUsagePanelComponent, { className: "APIUsagePanelComponent", filePath: "src/APIKeys/api-usage-panel.component.ts", lineNumber: 61 }); })();
1016
1016
  //# sourceMappingURL=api-usage-panel.component.js.map
package/dist/Actions/components/actions-overview.component.js CHANGED
@@ -619,7 +619,7 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
619
619
  i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 95 : 96);
620
620
  i0.ɵɵadvance(2);
621
621
  i0.ɵɵconditional(ctx.isLoading ? 97 : -1);
622
- } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.CodeEditorComponent, i6.ButtonComponent, i6.ChipComponent, i7.LoadingComponent, i8.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: 0.75rem;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 0.5rem;\n font-size: 1.25rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--kendo-color-subtle);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: var(--kendo-color-subtle);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.active[_ngcontent-%COMP%] {\n color: var(--kendo-color-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.pending[_ngcontent-%COMP%] {\n color: var(--kendo-color-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.disabled[_ngcontent-%COMP%] {\n color: var(--kendo-color-error);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.recent[_ngcontent-%COMP%] {\n color: var(--kendo-color-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.success-rate[_ngcontent-%COMP%] {\n color: var(--kendo-color-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.custom[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.primary[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.info[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.warning[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.gallery[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--kendo-color-primary), var(--kendo-color-secondary));\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n background: var(--kendo-color-app-surface);\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] .metric.success-rate[_ngcontent-%COMP%] {\n color: var(--kendo-color-success);\n font-weight: 600;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] {\n width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] {\n height: 6px;\n background: var(--kendo-color-border);\n border-radius: 3px;\n overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] .progress-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--kendo-color-success);\n transition: width 0.3s ease;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.375rem;\n background: var(--kendo-color-primary-subtle);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n font-size: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n line-height: 1.3;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--kendo-color-primary);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n font-weight: 600;\n min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n font-size: 0.875rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-expand-icon[_ngcontent-%COMP%] {\n color: var(--kendo-color-subtle);\n font-size: 0.75rem;\n margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--kendo-color-base-subtle);\n border-top: 1px solid var(--kendo-color-border);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] {\n margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 0.875rem;\n color: var(--kendo-color-subtle);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--kendo-color-subtle);\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.actions-overview[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: unset;\n }\n}"] });
622
+ } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.CodeEditorComponent, i6.ButtonComponent, i6.ChipComponent, i7.LoadingComponent, i8.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-xl);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: var(--mj-font-bold);\n line-height: var(--mj-leading-none);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.pending[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.disabled[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.recent[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.custom[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.primary[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.info[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.warning[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.gallery[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] .metric.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-weight: var(--mj-font-semibold);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] {\n width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] {\n height: 6px;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] .progress-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-status-success);\n transition: width var(--mj-transition-slow);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: var(--mj-radius-sm);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] {\n margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: unset;\n }\n}"] });
623
623
  };
624
624
  ActionsOverviewComponent = __decorate([
625
625
  RegisterClass(BaseResourceComponent, 'ActionsOverviewResource')
@@ -627,7 +627,7 @@ ActionsOverviewComponent = __decorate([
627
627
  export { ActionsOverviewComponent };
628
628
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsOverviewComponent, [{
629
629
  type: Component,
630
- args: [{ standalone: false, selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" >\n <!-- Header with search and filters -->\n <div class=\"overview-header\">\n <div class=\"filters-row\">\n <div class=\"search-container\">\n <kendo-textbox \n placeholder=\"Search actions...\" \n [value]=\"searchTerm$.value\"\n (valueChange)=\"onSearchChange($event)\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-search\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n \n <div class=\"filter-container\">\n <kendo-dropdownlist \n [data]=\"[\n { text: 'All Statuses', value: 'all' },\n { text: 'Active', value: 'Active' },\n { text: 'Pending', value: 'Pending' },\n { text: 'Disabled', value: 'Disabled' }\n ]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedStatus$.value\"\n (valueChange)=\"onStatusFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n \n <div class=\"filter-container\">\n <kendo-dropdownlist \n [data]=\"[\n { text: 'All Types', value: 'all' },\n { text: 'AI Generated', value: 'Generated' },\n { text: 'Custom', value: 'Custom' }\n ]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedType$.value\"\n (valueChange)=\"onTypeFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n\n <!-- Metrics Cards -->\n <div class=\"metrics-grid\">\n <div class=\"metric-card primary clickable\" (click)=\"onTotalActionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-cogs\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalActions }}</div>\n <div class=\"metric-label\">Total Actions</div>\n <div class=\"metric-breakdown\">\n <span class=\"active\">{{ metrics.activeActions }} Active</span>\n <span class=\"pending\">{{ metrics.pendingActions }} Pending</span>\n <span class=\"disabled\">{{ metrics.disabledActions }} Disabled</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card success clickable\" (click)=\"onExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-play-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n <div class=\"metric-label\">Total Executions</div>\n <div class=\"metric-breakdown\">\n <span class=\"recent\">{{ metrics.recentExecutions }} in last 24h</span>\n <span class=\"success-rate\">{{ metrics.successRate }}% success rate</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card info clickable\" (click)=\"onCategoriesClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalCategories }}</div>\n <div class=\"metric-label\">Categories</div>\n <div class=\"metric-breakdown\">\n <span>Organized structure</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card warning clickable\" (click)=\"onAIGeneratedClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-robot\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.aiGeneratedActions }}</div>\n <div class=\"metric-label\">AI Generated</div>\n <div class=\"metric-breakdown\">\n <span class=\"custom\">{{ metrics.customActions }} Custom</span>\n </div>\n </div>\n </div>\n \n <div class=\"metric-card gallery clickable\" (click)=\"onActionGalleryClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-th\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">\n <i class=\"fa-solid fa-sparkles\"></i>\n </div>\n <div class=\"metric-label\">Action Gallery</div>\n <div class=\"metric-breakdown\">\n <span>Visual action browser</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Content Grid -->\n <div class=\"content-grid\">\n <!-- Category Statistics -->\n <div class=\"panel category-stats\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-chart-bar\"></i> Category Performance</h3>\n </div>\n <div class=\"panel-content\">\n @if (categoryStats.length > 0) {\n <div class=\"category-list\">\n @for (category of categoryStats; track category.categoryId) {\n <div class=\"category-item\" (click)=\"openCategory(category.categoryId)\">\n <div class=\"category-info\">\n <div class=\"category-name\">{{ category.categoryName }}</div>\n <div class=\"category-metrics\">\n <span class=\"metric\">{{ category.actionCount }} actions</span>\n <span class=\"metric\">{{ category.executionCount }} executions</span>\n <span class=\"metric success-rate\">{{ category.successRate }}% success</span>\n </div>\n </div>\n <div class=\"category-chart\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"category.successRate\"></div>\n </div>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-chart-bar\"></i>\n <p>No category statistics available</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Recent Actions -->\n <div class=\"panel recent-actions\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-clock\"></i> Recent Actions</h3>\n </div>\n <div class=\"panel-content\">\n @if (recentActions.length > 0) {\n <div class=\"actions-list\">\n @for (action of recentActions; track action.ID) {\n <div class=\"action-item\" (click)=\"openAction(action)\">\n <div class=\"action-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"action-info\">\n <div class=\"action-name\">{{ action.Name }}</div>\n <div class=\"action-description\">{{ action.Description || 'No description' }}</div>\n </div>\n <div class=\"action-status\">\n <kendo-chip \n [themeColor]=\"getStatusColor(action.Status)\"\n [size]=\"'small'\">\n {{ action.Status }}\n </kendo-chip>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-cogs\"></i>\n <p>No recent actions found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Recent Executions -->\n <div class=\"panel recent-executions\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-history\"></i> Recent Executions</h3>\n </div>\n <div class=\"panel-content\">\n @if (recentExecutions.length > 0) {\n <div class=\"executions-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-item\" [class.expanded]=\"execution.isExpanded\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution)\">\n <div class=\"execution-time\">\n {{ execution.StartedAt | date:'MMM d, HH:mm' }}\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-action\">{{ execution.Action || 'Action ID: ' + execution.ActionID }}</div>\n <div class=\"execution-user\">{{ execution.User || 'User ID: ' + execution.UserID }}</div>\n </div>\n <div class=\"execution-result\">\n <kendo-chip \n [themeColor]=\"isExecutionSuccess(execution) ? 'success' : 'error'\"\n [size]=\"'small'\">\n {{ execution.ResultCode || 'Unknown' }}\n </kendo-chip>\n </div>\n <div class=\"execution-expand-icon\">\n <i [class]=\"execution.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </div>\n </div>\n @if (execution.isExpanded) {\n <div class=\"execution-details\">\n <div class=\"params-section\">\n <h5><i class=\"fa-solid fa-sliders\"></i> Parameters</h5>\n <mj-code-editor \n [ngModel]=\"formatJsonParams(execution.Params)\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 150px; width: 100%;\">\n </mj-code-editor>\n </div>\n <div class=\"execution-actions\">\n <button kendoButton \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openExecution(execution)\">\n <i class=\"fa-solid fa-external-link\"></i> Open Details\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <p>No recent executions found</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"loading-overlay\">\n <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>", styles: [".actions-overview {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; /* Required for scoped loading overlay */\n}\n.actions-overview .overview-header .filters-row {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview .overview-header .filters-row .search-container {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview .overview-header .filters-row .search-container kendo-textbox {\n width: 100%;\n}\n.actions-overview .overview-header .filters-row .filter-container {\n min-width: 150px;\n}\n.actions-overview .overview-header .filters-row .filter-container kendo-dropdownlist {\n width: 100%;\n}\n.actions-overview .metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview .metrics-grid .metric-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: 0.75rem;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n}\n.actions-overview .metrics-grid .metric-card.clickable {\n cursor: pointer;\n}\n.actions-overview .metrics-grid .metric-card.clickable:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 0.5rem;\n font-size: 1.25rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-icon i {\n color: white;\n}\n.actions-overview .metrics-grid .metric-card .metric-content {\n flex: 1;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-value {\n font-size: 1.75rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-label {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--kendo-color-subtle);\n margin-bottom: 0.5rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: 0.75rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span {\n color: var(--kendo-color-subtle);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.active {\n color: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.pending {\n color: var(--kendo-color-warning);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.disabled {\n color: var(--kendo-color-error);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.recent {\n color: var(--kendo-color-info);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.success-rate {\n color: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.custom {\n color: var(--kendo-color-primary);\n}\n.actions-overview .metrics-grid .metric-card.primary .metric-icon {\n background: var(--kendo-color-primary);\n}\n.actions-overview .metrics-grid .metric-card.success .metric-icon {\n background: var(--kendo-color-success);\n}\n.actions-overview .metrics-grid .metric-card.info .metric-icon {\n background: var(--kendo-color-info);\n}\n.actions-overview .metrics-grid .metric-card.warning .metric-icon {\n background: var(--kendo-color-warning);\n}\n.actions-overview .metrics-grid .metric-card.gallery .metric-icon {\n background: linear-gradient(135deg, var(--kendo-color-primary), var(--kendo-color-secondary));\n}\n.actions-overview .content-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview .content-grid .panel {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview .content-grid .panel .panel-header {\n padding: 1rem 1.5rem;\n background: var(--kendo-color-app-surface);\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-overview .content-grid .panel .panel-header h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview .content-grid .panel .panel-header h3 i {\n color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .panel .panel-content {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview .content-grid .category-stats .category-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info {\n flex: 1;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-name {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics .metric.success-rate {\n color: var(--kendo-color-success);\n font-weight: 600;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart {\n width: 60px;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar {\n height: 6px;\n background: var(--kendo-color-border);\n border-radius: 3px;\n overflow: hidden;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar .progress-fill {\n height: 100%;\n background: var(--kendo-color-success);\n transition: width 0.3s ease;\n}\n.actions-overview .content-grid .recent-actions .actions-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.375rem;\n background: var(--kendo-color-primary-subtle);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon i {\n color: var(--kendo-color-primary);\n font-size: 1rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info {\n flex: 1;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-name {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-description {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n line-height: 1.3;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-status {\n flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions {\n grid-column: 1/-1;\n}\n.actions-overview .content-grid .recent-executions .executions-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item {\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n margin-bottom: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item.expanded {\n border-color: var(--kendo-color-primary);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header:hover {\n background: var(--kendo-color-base-hover);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-time {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n font-weight: 600;\n min-width: 80px;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info {\n flex: 1;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-action {\n font-weight: 600;\n margin-bottom: 0.25rem;\n font-size: 0.875rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-user {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-result {\n flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-expand-icon {\n color: var(--kendo-color-subtle);\n font-size: 0.75rem;\n margin-left: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details {\n padding: 1rem;\n background: var(--kendo-color-base-subtle);\n border-top: 1px solid var(--kendo-color-border);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section {\n margin-bottom: 1rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 {\n margin: 0 0 0.5rem 0;\n font-size: 0.875rem;\n color: var(--kendo-color-subtle);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 i {\n font-size: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .execution-actions {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--kendo-color-subtle);\n}\n.actions-overview .empty-state i {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview .empty-state p {\n margin: 0;\n font-size: 0.875rem;\n}\n.actions-overview .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview .content-grid {\n grid-template-columns: 1fr;\n }\n .actions-overview .content-grid .recent-executions {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview .metrics-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview .overview-header .filters-row {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview .overview-header .filters-row .search-container,\n .actions-overview .overview-header .filters-row .filter-container {\n min-width: unset;\n }\n}\n"] }]
630
+ args: [{ standalone: false, selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" >\n <!-- Header with search and filters -->\n <div class=\"overview-header\">\n <div class=\"filters-row\">\n <div class=\"search-container\">\n <kendo-textbox \n placeholder=\"Search actions...\" \n [value]=\"searchTerm$.value\"\n (valueChange)=\"onSearchChange($event)\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-search\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n \n <div class=\"filter-container\">\n <kendo-dropdownlist \n [data]=\"[\n { text: 'All Statuses', value: 'all' },\n { text: 'Active', value: 'Active' },\n { text: 'Pending', value: 'Pending' },\n { text: 'Disabled', value: 'Disabled' }\n ]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedStatus$.value\"\n (valueChange)=\"onStatusFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n \n <div class=\"filter-container\">\n <kendo-dropdownlist \n [data]=\"[\n { text: 'All Types', value: 'all' },\n { text: 'AI Generated', value: 'Generated' },\n { text: 'Custom', value: 'Custom' }\n ]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedType$.value\"\n (valueChange)=\"onTypeFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n\n <!-- Metrics Cards -->\n <div class=\"metrics-grid\">\n <div class=\"metric-card primary clickable\" (click)=\"onTotalActionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-cogs\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalActions }}</div>\n <div class=\"metric-label\">Total Actions</div>\n <div class=\"metric-breakdown\">\n <span class=\"active\">{{ metrics.activeActions }} Active</span>\n <span class=\"pending\">{{ metrics.pendingActions }} Pending</span>\n <span class=\"disabled\">{{ metrics.disabledActions }} Disabled</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card success clickable\" (click)=\"onExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-play-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n <div class=\"metric-label\">Total Executions</div>\n <div class=\"metric-breakdown\">\n <span class=\"recent\">{{ metrics.recentExecutions }} in last 24h</span>\n <span class=\"success-rate\">{{ metrics.successRate }}% success rate</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card info clickable\" (click)=\"onCategoriesClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalCategories }}</div>\n <div class=\"metric-label\">Categories</div>\n <div class=\"metric-breakdown\">\n <span>Organized structure</span>\n </div>\n </div>\n </div>\n\n <div class=\"metric-card warning clickable\" (click)=\"onAIGeneratedClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-robot\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.aiGeneratedActions }}</div>\n <div class=\"metric-label\">AI Generated</div>\n <div class=\"metric-breakdown\">\n <span class=\"custom\">{{ metrics.customActions }} Custom</span>\n </div>\n </div>\n </div>\n \n <div class=\"metric-card gallery clickable\" (click)=\"onActionGalleryClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-th\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">\n <i class=\"fa-solid fa-sparkles\"></i>\n </div>\n <div class=\"metric-label\">Action Gallery</div>\n <div class=\"metric-breakdown\">\n <span>Visual action browser</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Content Grid -->\n <div class=\"content-grid\">\n <!-- Category Statistics -->\n <div class=\"panel category-stats\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-chart-bar\"></i> Category Performance</h3>\n </div>\n <div class=\"panel-content\">\n @if (categoryStats.length > 0) {\n <div class=\"category-list\">\n @for (category of categoryStats; track category.categoryId) {\n <div class=\"category-item\" (click)=\"openCategory(category.categoryId)\">\n <div class=\"category-info\">\n <div class=\"category-name\">{{ category.categoryName }}</div>\n <div class=\"category-metrics\">\n <span class=\"metric\">{{ category.actionCount }} actions</span>\n <span class=\"metric\">{{ category.executionCount }} executions</span>\n <span class=\"metric success-rate\">{{ category.successRate }}% success</span>\n </div>\n </div>\n <div class=\"category-chart\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"category.successRate\"></div>\n </div>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-chart-bar\"></i>\n <p>No category statistics available</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Recent Actions -->\n <div class=\"panel recent-actions\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-clock\"></i> Recent Actions</h3>\n </div>\n <div class=\"panel-content\">\n @if (recentActions.length > 0) {\n <div class=\"actions-list\">\n @for (action of recentActions; track action.ID) {\n <div class=\"action-item\" (click)=\"openAction(action)\">\n <div class=\"action-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"action-info\">\n <div class=\"action-name\">{{ action.Name }}</div>\n <div class=\"action-description\">{{ action.Description || 'No description' }}</div>\n </div>\n <div class=\"action-status\">\n <kendo-chip \n [themeColor]=\"getStatusColor(action.Status)\"\n [size]=\"'small'\">\n {{ action.Status }}\n </kendo-chip>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-cogs\"></i>\n <p>No recent actions found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Recent Executions -->\n <div class=\"panel recent-executions\">\n <div class=\"panel-header\">\n <h3><i class=\"fa-solid fa-history\"></i> Recent Executions</h3>\n </div>\n <div class=\"panel-content\">\n @if (recentExecutions.length > 0) {\n <div class=\"executions-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-item\" [class.expanded]=\"execution.isExpanded\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution)\">\n <div class=\"execution-time\">\n {{ execution.StartedAt | date:'MMM d, HH:mm' }}\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-action\">{{ execution.Action || 'Action ID: ' + execution.ActionID }}</div>\n <div class=\"execution-user\">{{ execution.User || 'User ID: ' + execution.UserID }}</div>\n </div>\n <div class=\"execution-result\">\n <kendo-chip \n [themeColor]=\"isExecutionSuccess(execution) ? 'success' : 'error'\"\n [size]=\"'small'\">\n {{ execution.ResultCode || 'Unknown' }}\n </kendo-chip>\n </div>\n <div class=\"execution-expand-icon\">\n <i [class]=\"execution.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </div>\n </div>\n @if (execution.isExpanded) {\n <div class=\"execution-details\">\n <div class=\"params-section\">\n <h5><i class=\"fa-solid fa-sliders\"></i> Parameters</h5>\n <mj-code-editor \n [ngModel]=\"formatJsonParams(execution.Params)\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 150px; width: 100%;\">\n </mj-code-editor>\n </div>\n <div class=\"execution-actions\">\n <button kendoButton \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openExecution(execution)\">\n <i class=\"fa-solid fa-external-link\"></i> Open Details\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <p>No recent executions found</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"loading-overlay\">\n <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>", styles: [".actions-overview {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; /* Required for scoped loading overlay */\n}\n.actions-overview .overview-header .filters-row {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview .overview-header .filters-row .search-container {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview .overview-header .filters-row .search-container kendo-textbox {\n width: 100%;\n}\n.actions-overview .overview-header .filters-row .filter-container {\n min-width: 150px;\n}\n.actions-overview .overview-header .filters-row .filter-container kendo-dropdownlist {\n width: 100%;\n}\n.actions-overview .metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview .metrics-grid .metric-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n transition: all var(--mj-transition-base);\n}\n.actions-overview .metrics-grid .metric-card.clickable {\n cursor: pointer;\n}\n.actions-overview .metrics-grid .metric-card.clickable:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-xl);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon i {\n color: var(--mj-text-inverse);\n}\n.actions-overview .metrics-grid .metric-card .metric-content {\n flex: 1;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-value {\n font-size: 1.75rem;\n font-weight: var(--mj-font-bold);\n line-height: var(--mj-leading-none);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-label {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n margin-bottom: 0.5rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: var(--mj-text-xs);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span {\n color: var(--mj-text-muted);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.active {\n color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.pending {\n color: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.disabled {\n color: var(--mj-status-error);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.recent {\n color: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.success-rate {\n color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.custom {\n color: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.primary .metric-icon {\n background: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.success .metric-icon {\n background: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card.info .metric-icon {\n background: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card.warning .metric-icon {\n background: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card.gallery .metric-icon {\n background: var(--mj-brand-primary);\n}\n.actions-overview .content-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview .content-grid .panel {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .panel .panel-header {\n padding: 1rem 1.5rem;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .panel .panel-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview .content-grid .panel .panel-header h3 i {\n color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .panel .panel-content {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview .content-grid .category-stats .category-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info {\n flex: 1;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-name {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics {\n display: flex;\n gap: 1rem;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics .metric.success-rate {\n color: var(--mj-status-success);\n font-weight: var(--mj-font-semibold);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart {\n width: 60px;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar {\n height: 6px;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n overflow: hidden;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar .progress-fill {\n height: 100%;\n background: var(--mj-status-success);\n transition: width var(--mj-transition-slow);\n}\n.actions-overview .content-grid .recent-actions .actions-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: var(--mj-radius-sm);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info {\n flex: 1;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-name {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-description {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-status {\n flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions {\n grid-column: 1/-1;\n}\n.actions-overview .content-grid .recent-executions .executions-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n margin-bottom: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item.expanded {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header:hover {\n background: var(--mj-bg-surface-hover);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-time {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n min-width: 80px;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info {\n flex: 1;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-action {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-user {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-result {\n flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-expand-icon {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n margin-left: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details {\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section {\n margin-bottom: 1rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 {\n margin: 0 0 0.5rem 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 i {\n font-size: var(--mj-text-xs);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .execution-actions {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.actions-overview .empty-state i {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview .empty-state p {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n.actions-overview .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview .content-grid {\n grid-template-columns: 1fr;\n }\n .actions-overview .content-grid .recent-executions {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview .metrics-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview .overview-header .filters-row {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview .overview-header .filters-row .search-container,\n .actions-overview .overview-header .filters-row .filter-container {\n min-width: unset;\n }\n}\n"] }]
631
631
  }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
632
632
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/Actions/components/actions-overview.component.ts", lineNumber: 43 }); })();
633
633
  //# sourceMappingURL=actions-overview.component.js.map