feat: Add operations view components for logs, overview, security, and stats

- Implemented `ops-view-logs` for displaying and filtering logs with streaming capabilities.
- Created `ops-view-overview` to show server, email, DNS statistics, and charts.
- Developed `ops-view-security` for monitoring security metrics, blocked IPs, and authentication attempts.
- Added `ops-view-stats` to present comprehensive statistics on server, email, DNS, and security metrics.
- Introduced shared styles and components including `ops-sectionheading` for consistent UI.

ts_web/elements/ops-dashboard.ts

@@ -1,3 +1,6 @@
+import * as plugins from '../plugins.js';
+import * as appstate from '../appstate.js';
+
 import {
   DeesElement,
   css,
@@ -8,11 +11,114 @@ import {
   type TemplateResult
 } from '@design.estate/dees-element';
 
+// Import view components
+import { OpsViewOverview } from './ops-view-overview.js';
+import { OpsViewStats } from './ops-view-stats.js';
+import { OpsViewLogs } from './ops-view-logs.js';
+import { OpsViewConfig } from './ops-view-config.js';
+import { OpsViewSecurity } from './ops-view-security.js';
+
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
+  @state() private loginState: appstate.ILoginState = {
+    identity: null,
+    isLoggedIn: false,
+  };
+  
+  @state() private uiState: appstate.IUiState = {
+    activeView: 'dashboard',
+    sidebarCollapsed: false,
+    autoRefresh: true,
+    refreshInterval: 30000,
+    theme: 'light',
+  };
+
+  constructor() {
+    super();
+    document.title = 'DCRouter OpsServer';
+    
+    // Subscribe to login state
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((loginState) => {
+        this.loginState = loginState;
+        // Trigger data fetch when logged in
+        if (loginState.isLoggedIn) {
+          appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
+          appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+        }
+      });
+    this.rxSubscriptions.push(loginSubscription);
+    
+    // Subscribe to UI state
+    const uiSubscription = appstate.uiStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((uiState) => {
+        this.uiState = uiState;
+      });
+    this.rxSubscriptions.push(uiSubscription);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .maincontainer {
+        position: relative;
+        width: 100vw;
+        height: 100vh;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      hello
+      <div class="maincontainer">
+        <dees-simple-login 
+          name="DCRouter OpsServer"
+          .loginAction=${async (username: string, password: string) => {
+            await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
+              username,
+              password,
+            });
+            return this.loginState.isLoggedIn;
+          }}
+        >
+          <dees-simple-appdash 
+            name="DCRouter OpsServer"
+            .viewTabs=${[
+              {
+                name: 'Overview',
+                element: OpsViewOverview,
+              },
+              {
+                name: 'Statistics',
+                element: OpsViewStats,
+              },
+              {
+                name: 'Logs',
+                element: OpsViewLogs,
+              },
+              {
+                name: 'Configuration',
+                element: OpsViewConfig,
+              },
+              {
+                name: 'Security',
+                element: OpsViewSecurity,
+              },
+            ]}
+            .userMenuItems=${[
+              {
+                name: 'Logout',
+                action: async () => {
+                  await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+                },
+              },
+            ]}
+          >
+          </dees-simple-appdash>
+        </dees-simple-login>
+      </div>
     `;
   }
 }