@serve.zone/dcrouter 2.12.4 → 5.0.3

package/ts_web/elements/ops-view-emails.ts

@@ -0,0 +1,818 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
+import * as appstate from '../appstate.js';
+import * as shared from './shared/index.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { appRouter } from '../router.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-emails': OpsViewEmails;
+  }
+}
+
+type TEmailFolder = 'queued' | 'sent' | 'failed' | 'received' | 'security';
+
+@customElement('ops-view-emails')
+export class OpsViewEmails extends DeesElement {
+  @state()
+  accessor selectedFolder: TEmailFolder = 'queued';
+
+  @state()
+  accessor queuedEmails: interfaces.requests.IEmailQueueItem[] = [];
+
+  @state()
+  accessor sentEmails: interfaces.requests.IEmailQueueItem[] = [];
+
+  @state()
+  accessor failedEmails: interfaces.requests.IEmailQueueItem[] = [];
+
+  @state()
+  accessor securityIncidents: interfaces.requests.ISecurityIncident[] = [];
+
+  @state()
+  accessor selectedEmail: interfaces.requests.IEmailQueueItem | null = null;
+
+  @state()
+  accessor selectedIncident: interfaces.requests.ISecurityIncident | null = null;
+
+  @state()
+  accessor showCompose = false;
+
+  @state()
+  accessor isLoading = false;
+
+  @state()
+  accessor searchTerm = '';
+
+  @state()
+  accessor emailDomains: string[] = [];
+
+  private stateSubscription: any;
+
+  constructor() {
+    super();
+    this.loadData();
+    this.loadEmailDomains();
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    // Subscribe to state changes
+    this.stateSubscription = appstate.emailOpsStatePart.state.subscribe((state) => {
+      this.queuedEmails = state.queuedEmails;
+      this.sentEmails = state.sentEmails;
+      this.failedEmails = state.failedEmails;
+      this.securityIncidents = state.securityIncidents;
+      this.isLoading = state.isLoading;
+
+      // Sync folder from state (e.g., when URL changes)
+      if (state.currentView !== this.selectedFolder) {
+        this.selectedFolder = state.currentView as TEmailFolder;
+        this.loadFolderData(state.currentView as TEmailFolder);
+      }
+    });
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    if (this.stateSubscription) {
+      this.stateSubscription.unsubscribe();
+    }
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .emailLayout {
+        display: flex;
+        gap: 16px;
+        height: 100%;
+        min-height: 600px;
+      }
+
+      .sidebar {
+        flex-shrink: 0;
+        width: 280px;
+      }
+
+      .mainArea {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        overflow: hidden;
+      }
+
+      .emailToolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+
+      .searchBox {
+        flex: 1;
+        min-width: 200px;
+        max-width: 400px;
+      }
+
+      .emailList {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .emailPreview {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .emailHeader {
+        padding: 24px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+      }
+
+      .emailSubject {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .emailMeta {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      .emailMetaRow {
+        display: flex;
+        gap: 8px;
+      }
+
+      .emailMetaLabel {
+        font-weight: 600;
+        min-width: 80px;
+      }
+
+      .emailBody {
+        flex: 1;
+        padding: 24px;
+        overflow-y: auto;
+        font-size: 15px;
+        line-height: 1.6;
+      }
+
+      .emailActions {
+        display: flex;
+        gap: 8px;
+        padding: 16px 24px;
+        border-top: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
+      }
+
+      .emptyState {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 400px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+      }
+
+      .emptyIcon {
+        font-size: 64px;
+        margin-bottom: 16px;
+        opacity: 0.3;
+      }
+
+      .emptyText {
+        font-size: 18px;
+      }
+
+      .status-pending {
+        color: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
+      }
+
+      .status-processing {
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .status-delivered {
+        color: ${cssManager.bdTheme('#10b981', '#34d399')};
+      }
+
+      .status-failed {
+        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+      }
+
+      .status-deferred {
+        color: ${cssManager.bdTheme('#f97316', '#fb923c')};
+      }
+
+      .severity-info {
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .severity-warn {
+        color: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
+      }
+
+      .severity-error {
+        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+      }
+
+      .severity-critical {
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+        font-weight: bold;
+      }
+
+      .incidentDetails {
+        padding: 24px;
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+        border-radius: 8px;
+      }
+
+      .incidentHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 16px;
+      }
+
+      .incidentTitle {
+        font-size: 20px;
+        font-weight: 600;
+      }
+
+      .incidentMeta {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 12px;
+        margin-top: 16px;
+      }
+
+      .incidentField {
+        padding: 12px;
+        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
+        border-radius: 6px;
+      }
+
+      .incidentFieldLabel {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-bottom: 4px;
+      }
+
+      .incidentFieldValue {
+        font-size: 14px;
+        word-break: break-all;
+      }
+    `,
+  ];
+
+  public render() {
+    if (this.selectedEmail) {
+      return this.renderEmailDetail();
+    }
+
+    if (this.selectedIncident) {
+      return this.renderIncidentDetail();
+    }
+
+    return html`
+      <ops-sectionheading>Email Operations</ops-sectionheading>
+
+      <!-- Toolbar -->
+      <div class="emailToolbar" style="margin-bottom: 16px;">
+        <dees-button @click=${() => this.openComposeModal()} type="highlighted">
+          <dees-icon icon="lucide:penLine" slot="iconSlot"></dees-icon>
+          Compose
+        </dees-button>
+
+        <dees-input-text
+          class="searchBox"
+          placeholder="Search..."
+          .value=${this.searchTerm}
+          @input=${(e: Event) => this.searchTerm = (e.target as any).value}
+        >
+          <dees-icon icon="lucide:search" slot="iconSlot"></dees-icon>
+        </dees-input-text>
+
+        <dees-button @click=${() => this.refreshData()}>
+          ${this.isLoading ? html`<dees-spinner slot="iconSlot" size="small"></dees-spinner>` : html`<dees-icon slot="iconSlot" icon="lucide:refreshCw"></dees-icon>`}
+          Refresh
+        </dees-button>
+
+        <div style="margin-left: auto; display: flex; gap: 8px;">
+          <dees-button-group>
+            <dees-button
+              @click=${() => this.selectFolder('queued')}
+              .type=${this.selectedFolder === 'queued' ? 'highlighted' : 'normal'}
+            >
+              Queued ${this.queuedEmails.length > 0 ? `(${this.queuedEmails.length})` : ''}
+            </dees-button>
+            <dees-button
+              @click=${() => this.selectFolder('sent')}
+              .type=${this.selectedFolder === 'sent' ? 'highlighted' : 'normal'}
+            >
+              Sent
+            </dees-button>
+            <dees-button
+              @click=${() => this.selectFolder('failed')}
+              .type=${this.selectedFolder === 'failed' ? 'highlighted' : 'normal'}
+            >
+              Failed ${this.failedEmails.length > 0 ? `(${this.failedEmails.length})` : ''}
+            </dees-button>
+            <dees-button
+              @click=${() => this.selectFolder('security')}
+              .type=${this.selectedFolder === 'security' ? 'highlighted' : 'normal'}
+            >
+              Security ${this.securityIncidents.length > 0 ? `(${this.securityIncidents.length})` : ''}
+            </dees-button>
+          </dees-button-group>
+        </div>
+      </div>
+
+      ${this.renderContent()}
+    `;
+  }
+
+  private renderContent() {
+    switch (this.selectedFolder) {
+      case 'queued':
+        return this.renderEmailTable(this.queuedEmails, 'Queued Emails', 'Emails waiting to be delivered');
+      case 'sent':
+        return this.renderEmailTable(this.sentEmails, 'Sent Emails', 'Successfully delivered emails');
+      case 'failed':
+        return this.renderEmailTable(this.failedEmails, 'Failed Emails', 'Emails that failed to deliver', true);
+      case 'security':
+        return this.renderSecurityIncidents();
+      default:
+        return this.renderEmptyState('Select a folder');
+    }
+  }
+
+  private renderEmailTable(
+    emails: interfaces.requests.IEmailQueueItem[],
+    heading1: string,
+    heading2: string,
+    showResend = false
+  ) {
+    const filteredEmails = this.filterEmails(emails);
+
+    if (filteredEmails.length === 0) {
+      return this.renderEmptyState(`No emails in ${this.selectedFolder}`);
+    }
+
+    const actions = [
+      {
+        name: 'View Details',
+        iconName: 'lucide:eye',
+        type: ['doubleClick', 'inRow'] as any,
+        actionFunc: async (actionData: any) => {
+          this.selectedEmail = actionData.item;
+        }
+      }
+    ];
+
+    if (showResend) {
+      actions.push({
+        name: 'Resend',
+        iconName: 'lucide:send',
+        type: ['inRow'] as any,
+        actionFunc: async (actionData: any) => {
+          await this.resendEmail(actionData.item.id);
+        }
+      });
+    }
+
+    return html`
+      <dees-table
+        .data=${filteredEmails}
+        .displayFunction=${(email: interfaces.requests.IEmailQueueItem) => ({
+          'Status': html`<span class="status-${email.status}">${email.status}</span>`,
+          'From': email.from || 'N/A',
+          'To': email.to?.join(', ') || 'N/A',
+          'Subject': email.subject || 'No subject',
+          'Attempts': email.attempts,
+          'Created': this.formatDate(email.createdAt),
+        })}
+        .dataActions=${actions}
+        .selectionMode=${'single'}
+        heading1=${heading1}
+        heading2=${`${filteredEmails.length} emails - ${heading2}`}
+      ></dees-table>
+    `;
+  }
+
+  private renderSecurityIncidents() {
+    const incidents = this.securityIncidents;
+
+    if (incidents.length === 0) {
+      return this.renderEmptyState('No security incidents');
+    }
+
+    return html`
+      <dees-table
+        .data=${incidents}
+        .displayFunction=${(incident: interfaces.requests.ISecurityIncident) => ({
+          'Severity': html`<span class="severity-${incident.level}">${incident.level.toUpperCase()}</span>`,
+          'Type': incident.type,
+          'Message': incident.message,
+          'IP': incident.ipAddress || 'N/A',
+          'Domain': incident.domain || 'N/A',
+          'Time': this.formatDate(incident.timestamp),
+        })}
+        .dataActions=${[
+          {
+            name: 'View Details',
+            iconName: 'lucide:eye',
+            type: ['doubleClick', 'inRow'],
+            actionFunc: async (actionData: any) => {
+              this.selectedIncident = actionData.item;
+            }
+          }
+        ]}
+        .selectionMode=${'single'}
+        heading1="Security Incidents"
+        heading2=${`${incidents.length} incidents`}
+      ></dees-table>
+    `;
+  }
+
+  private renderEmailDetail() {
+    if (!this.selectedEmail) return '';
+
+    return html`
+      <ops-sectionheading>Email Details</ops-sectionheading>
+      <div class="emailLayout">
+        <div class="sidebar">
+          <dees-windowbox>
+            <dees-button @click=${() => this.selectedEmail = null} type="secondary" style="width: 100%;">
+              <dees-icon icon="lucide:arrowLeft" slot="iconSlot"></dees-icon>
+              Back to List
+            </dees-button>
+          </dees-windowbox>
+        </div>
+        <div class="mainArea">
+          <div class="emailPreview">
+            <div class="emailHeader">
+              <div class="emailSubject">${this.selectedEmail.subject || 'No subject'}</div>
+              <div class="emailMeta">
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">Status:</span>
+                  <span class="status-${this.selectedEmail.status}">${this.selectedEmail.status}</span>
+                </div>
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">From:</span>
+                  <span>${this.selectedEmail.from || 'N/A'}</span>
+                </div>
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">To:</span>
+                  <span>${this.selectedEmail.to?.join(', ') || 'N/A'}</span>
+                </div>
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">Mode:</span>
+                  <span>${this.selectedEmail.processingMode}</span>
+                </div>
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">Attempts:</span>
+                  <span>${this.selectedEmail.attempts}</span>
+                </div>
+                <div class="emailMetaRow">
+                  <span class="emailMetaLabel">Created:</span>
+                  <span>${new Date(this.selectedEmail.createdAt).toLocaleString()}</span>
+                </div>
+                ${this.selectedEmail.deliveredAt ? html`
+                  <div class="emailMetaRow">
+                    <span class="emailMetaLabel">Delivered:</span>
+                    <span>${new Date(this.selectedEmail.deliveredAt).toLocaleString()}</span>
+                  </div>
+                ` : ''}
+                ${this.selectedEmail.lastError ? html`
+                  <div class="emailMetaRow">
+                    <span class="emailMetaLabel">Last Error:</span>
+                    <span style="color: #ef4444;">${this.selectedEmail.lastError}</span>
+                  </div>
+                ` : ''}
+              </div>
+            </div>
+
+            <div class="emailActions">
+              ${this.selectedEmail.status === 'failed' ? html`
+                <dees-button @click=${() => this.resendEmail(this.selectedEmail!.id)} type="highlighted">
+                  <dees-icon icon="lucide:send" slot="iconSlot"></dees-icon>
+                  Resend
+                </dees-button>
+              ` : ''}
+              <dees-button @click=${() => this.selectedEmail = null}>
+                <dees-icon icon="lucide:x" slot="iconSlot"></dees-icon>
+                Close
+              </dees-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderIncidentDetail() {
+    if (!this.selectedIncident) return '';
+
+    const incident = this.selectedIncident;
+
+    return html`
+      <ops-sectionheading>Security Incident Details</ops-sectionheading>
+      <div style="margin-bottom: 16px;">
+        <dees-button @click=${() => this.selectedIncident = null} type="secondary">
+          <dees-icon icon="lucide:arrowLeft" slot="iconSlot"></dees-icon>
+          Back to List
+        </dees-button>
+      </div>
+      <div class="incidentDetails">
+        <div class="incidentHeader">
+          <div>
+            <div class="incidentTitle">${incident.message}</div>
+            <div style="margin-top: 8px; color: #666;">
+              ${new Date(incident.timestamp).toLocaleString()}
+            </div>
+          </div>
+          <span class="severity-${incident.level}" style="font-size: 16px; padding: 4px 12px; background: rgba(0,0,0,0.1); border-radius: 4px;">
+            ${incident.level.toUpperCase()}
+          </span>
+        </div>
+
+        <div class="incidentMeta">
+          <div class="incidentField">
+            <div class="incidentFieldLabel">Type</div>
+            <div class="incidentFieldValue">${incident.type}</div>
+          </div>
+          ${incident.ipAddress ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">IP Address</div>
+              <div class="incidentFieldValue">${incident.ipAddress}</div>
+            </div>
+          ` : ''}
+          ${incident.domain ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">Domain</div>
+              <div class="incidentFieldValue">${incident.domain}</div>
+            </div>
+          ` : ''}
+          ${incident.emailId ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">Email ID</div>
+              <div class="incidentFieldValue">${incident.emailId}</div>
+            </div>
+          ` : ''}
+          ${incident.userId ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">User ID</div>
+              <div class="incidentFieldValue">${incident.userId}</div>
+            </div>
+          ` : ''}
+          ${incident.action ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">Action</div>
+              <div class="incidentFieldValue">${incident.action}</div>
+            </div>
+          ` : ''}
+          ${incident.result ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">Result</div>
+              <div class="incidentFieldValue">${incident.result}</div>
+            </div>
+          ` : ''}
+          ${incident.success !== undefined ? html`
+            <div class="incidentField">
+              <div class="incidentFieldLabel">Success</div>
+              <div class="incidentFieldValue">${incident.success ? 'Yes' : 'No'}</div>
+            </div>
+          ` : ''}
+        </div>
+
+        ${incident.details ? html`
+          <div style="margin-top: 24px;">
+            <div class="incidentFieldLabel" style="margin-bottom: 8px;">Details</div>
+            <pre style="background: #1a1a1a; color: #e5e5e5; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 13px;">
+${JSON.stringify(incident.details, null, 2)}
+            </pre>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private renderEmptyState(message: string) {
+    return html`
+      <div class="emptyState">
+        <dees-icon class="emptyIcon" icon="lucide:inbox"></dees-icon>
+        <div class="emptyText">${message}</div>
+      </div>
+    `;
+  }
+
+  private async openComposeModal() {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    // Ensure domains are loaded before opening modal
+    if (this.emailDomains.length === 0) {
+      await this.loadEmailDomains();
+    }
+
+    await DeesModal.createAndShow({
+      heading: 'New Email',
+      width: 'large',
+      content: html`
+        <div>
+          <dees-form @formData=${async (e: CustomEvent) => {
+            await this.sendEmail(e.detail);
+            const modals = document.querySelectorAll('dees-modal');
+            modals.forEach(m => (m as any).destroy?.());
+          }}>
+            <div style="display: flex; gap: 8px; align-items: flex-end;">
+              <dees-input-text
+                key="fromUsername"
+                label="From"
+                placeholder="username"
+                .value=${'admin'}
+                required
+                style="flex: 1;"
+              ></dees-input-text>
+              <span style="padding-bottom: 12px; font-size: 18px; color: #666;">@</span>
+              <dees-input-dropdown
+                key="fromDomain"
+                label=" "
+                .options=${this.emailDomains.length > 0
+                  ? this.emailDomains.map(domain => ({ key: domain, value: domain }))
+                  : [{ key: 'dcrouter.local', value: 'dcrouter.local' }]}
+                .selectedKey=${this.emailDomains[0] || 'dcrouter.local'}
+                required
+                style="flex: 1;"
+              ></dees-input-dropdown>
+            </div>
+
+            <dees-input-tags
+              key="to"
+              label="To"
+              placeholder="Enter recipient email addresses..."
+              required
+            ></dees-input-tags>
+
+            <dees-input-tags
+              key="cc"
+              label="CC"
+              placeholder="Enter CC recipients..."
+            ></dees-input-tags>
+
+            <dees-input-text
+              key="subject"
+              label="Subject"
+              placeholder="Enter email subject..."
+              required
+            ></dees-input-text>
+
+            <dees-input-wysiwyg
+              key="body"
+              label="Message"
+              outputFormat="html"
+            ></dees-input-wysiwyg>
+          </dees-form>
+        </div>
+      `,
+      menuOptions: [
+        {
+          name: 'Send',
+          iconName: 'lucide:send',
+          action: async (modalArg) => {
+            const form = modalArg.shadowRoot?.querySelector('dees-form') as any;
+            form?.submit();
+          }
+        },
+        {
+          name: 'Cancel',
+          iconName: 'lucide:x',
+          action: async (modalArg) => await modalArg.destroy()
+        }
+      ]
+    });
+  }
+
+  private filterEmails(emails: interfaces.requests.IEmailQueueItem[]): interfaces.requests.IEmailQueueItem[] {
+    if (!this.searchTerm) {
+      return emails;
+    }
+
+    const search = this.searchTerm.toLowerCase();
+    return emails.filter(e =>
+      (e.subject?.toLowerCase().includes(search)) ||
+      (e.from?.toLowerCase().includes(search)) ||
+      (e.to?.some(t => t.toLowerCase().includes(search)))
+    );
+  }
+
+  private selectFolder(folder: TEmailFolder) {
+    // Use router for navigation to update URL
+    appRouter.navigateToEmailFolder(folder);
+    // Clear selections
+    this.selectedEmail = null;
+    this.selectedIncident = null;
+  }
+
+  private formatDate(timestamp: number): string {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const hours = diff / (1000 * 60 * 60);
+
+    if (hours < 24) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else if (hours < 168) { // 7 days
+      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+  }
+
+  private async loadData() {
+    this.isLoading = true;
+    await this.loadFolderData(this.selectedFolder);
+    this.isLoading = false;
+  }
+
+  private async loadFolderData(folder: TEmailFolder) {
+    switch (folder) {
+      case 'queued':
+        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchQueuedEmailsAction, null);
+        break;
+      case 'sent':
+        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchSentEmailsAction, null);
+        break;
+      case 'failed':
+        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchFailedEmailsAction, null);
+        break;
+      case 'security':
+        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchSecurityIncidentsAction, null);
+        break;
+    }
+  }
+
+  private async loadEmailDomains() {
+    try {
+      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+      const config = appstate.configStatePart.getState().config;
+
+      if (config?.email?.domains && Array.isArray(config.email.domains) && config.email.domains.length > 0) {
+        this.emailDomains = config.email.domains;
+      } else {
+        this.emailDomains = ['dcrouter.local'];
+      }
+    } catch (error) {
+      console.error('Failed to load email domains:', error);
+      this.emailDomains = ['dcrouter.local'];
+    }
+  }
+
+  private async refreshData() {
+    this.isLoading = true;
+    await this.loadFolderData(this.selectedFolder);
+    this.isLoading = false;
+  }
+
+  private async sendEmail(formData: any) {
+    try {
+      console.log('Sending email:', formData);
+      // TODO: Implement actual email sending via API
+      // For now, just log the data
+      const fromEmail = `${formData.fromUsername || 'admin'}@${formData.fromDomain || this.emailDomains[0] || 'dcrouter.local'}`;
+      console.log('From:', fromEmail);
+      console.log('To:', formData.to);
+      console.log('Subject:', formData.subject);
+    } catch (error: any) {
+      console.error('Failed to send email', error);
+    }
+  }
+
+  private async resendEmail(emailId: string) {
+    try {
+      await appstate.emailOpsStatePart.dispatchAction(appstate.resendEmailAction, emailId);
+      this.selectedEmail = null;
+    } catch (error) {
+      console.error('Failed to resend email:', error);
+    }
+  }
+}