+
+
+
Email Server
+
Manage email domains, accounts, and mail services
+
+
+ {!isInstalled ? (
+
+ ) : (
+ <>
+
+
+ )}
+
+
+
+ {!isInstalled ? (
+
+
email
+
No Email Server Installed
+
Install an email server to manage domains, accounts, and mail delivery.
+
+
+ ) : (
+ <>
+
+
+
+ {status?.postfix?.running ? 'check_circle' : 'pause_circle'}
+
+
+ Postfix
+ {status?.postfix?.running ? 'Running' : 'Stopped'}
+
+
+
+
+ {status?.dovecot?.running ? 'check_circle' : 'pause_circle'}
+
+
+ Dovecot
+ {status?.dovecot?.running ? 'Running' : 'Stopped'}
+
+
+
+
+ domain
+
+
+ Domains
+ {totalDomains}
+
+
+
+
+ people
+
+
+ Accounts
+ {totalAccounts}
+
+
+
+
+
+ {['overview', 'domains', 'accounts', 'aliases', 'dns', 'spam', 'webmail'].map((tab) => (
+
+ ))}
+
+
+
+ {/* ===== OVERVIEW TAB ===== */}
+ {activeTab === 'overview' && (
+
+
Service Status
+
+ {services.map((svc) => (
+
+
+
{svc.label}
+
+ {svc.data?.installed ? 'Installed' : 'Not Installed'}
+
+
+
+
+ Status:
+
+ {svc.data?.running ? 'Running' : 'Stopped'}
+
+
+ {svc.data?.version && (
+
+ Version:
+ {svc.data.version}
+
+ )}
+ {svc.data?.installed && (
+
+ {svc.data?.running ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ ))}
+
+
+
Statistics
+
+
+
+ Total Domains
+ {totalDomains}
+
+
+
+
+ Total Accounts
+ {totalAccounts}
+
+
+
+
+ )}
+
+ {/* ===== DOMAINS TAB ===== */}
+ {activeTab === 'domains' && (
+
+
+
Email Domains
+
+
+ {domains.length === 0 ? (
+
+
domain
+
No email domains configured
+
+
+ ) : (
+
+ {domains.map((domain) => (
+
+
+
{domain.domain || domain.name}
+
+
+
+ Accounts: {domain.accounts_count || 0}
+ Aliases: {domain.aliases_count || 0}
+
+
+
+ DKIM {domain.dkim_valid ? '\u2713' : '\u2717'}
+
+
+ SPF {domain.spf_valid ? '\u2713' : '\u2717'}
+
+
+ DMARC {domain.dmarc_valid ? '\u2713' : '\u2717'}
+
+
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* ===== ACCOUNTS TAB ===== */}
+ {activeTab === 'accounts' && (
+
+
+
Email Accounts
+
+
+
+
+
+ {!selectedDomainId ? (
+
+
domain
+
Select a domain to view accounts
+
+ ) : accounts.length === 0 ? (
+
+
person_add
+
No accounts for this domain
+
+
+ ) : (
+
+
+
+
+ | Email |
+ Quota Usage |
+ Status |
+ Created |
+ Actions |
+
+
+
+ {accounts.map((account) => {
+ const usedMB = account.quota_used || 0;
+ const totalMB = account.quota || 1024;
+ const pct = totalMB > 0 ? Math.min(100, Math.round((usedMB / totalMB) * 100)) : 0;
+ return (
+
+ |
+ {account.email || account.username}
+ |
+
+
+
+ 90 ? 'var(--color-danger, #ef4444)' : pct > 70 ? 'var(--color-warning, #f59e0b)' : 'var(--color-success, #22c55e)',
+ borderRadius: '4px',
+ transition: 'width 0.3s ease'
+ }} />
+
+
+ {usedMB} / {totalMB} MB ({pct}%)
+
+
+ |
+
+
+ {account.active !== false ? 'Active' : 'Inactive'}
+
+ |
+ {account.created_at ? new Date(account.created_at).toLocaleDateString() : '-'} |
+
+
+
+
+ |
+
+ );
+ })}
+
+
+
+ )}
+
+ )}
+
+ {/* ===== ALIASES & FORWARDING TAB ===== */}
+ {activeTab === 'aliases' && (
+
+
+
+
+
+
+ {!selectedDomainId ? (
+
+
domain
+
Select a domain to manage aliases and forwarding
+
+ ) : (
+
+ {/* Aliases Section */}
+
+
+
Aliases
+
+
+
+ {aliases.length === 0 ? (
+
+
No aliases configured
+
+ ) : (
+
+ {aliases.map((alias) => (
+
+
+ {alias.source}
+ →
+ {alias.destination}
+
+
+
+ ))}
+
+ )}
+
+
+
+ {/* Forwarding Section */}
+
+
+
Forwarding
+
+
+
+
+
+
+
+ {!selectedForwardingAccount ? (
+
+
Select an account to view forwarding rules
+
+ ) : forwarding.length === 0 ? (
+
+ ) : (
+
+ {forwarding.map((rule) => (
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ )}
+
+ {/* ===== DNS & AUTHENTICATION TAB ===== */}
+ {activeTab === 'dns' && (
+
+ {/* DNS Providers */}
+
+
DNS Providers
+
+
+ {dnsProviders.length === 0 ? (
+
+
No DNS providers configured
+
+
+ ) : (
+
+ {dnsProviders.map((provider) => (
+
+
+
{provider.name}
+ {provider.type}
+
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ {/* DKIM Records */}
+
DKIM Records
+ {domains.length === 0 ? (
+
No domains configured
+ ) : (
+
+ {domains.map((domain) => (
+
+
+
{domain.domain || domain.name} - DKIM
+
+
+ {domain.dkim_record ? (
+
+
+ {domain.dkim_record}
+
+
+
+ ) : (
+
DKIM record not available
+ )}
+
+
+ ))}
+
+ )}
+
+ {/* SPF / DMARC Records */}
+
SPF & DMARC Records
+ {domains.length === 0 ? (
+
No domains configured
+ ) : (
+
+ {domains.map((domain) => (
+
+
+
{domain.domain || domain.name}
+
+
+
+
+
+
+ {domain.spf_record || `v=spf1 mx a ~all`}
+
+
+
+
+
+
+
+
+ {domain.dmarc_record || `v=DMARC1; p=quarantine; rua=mailto:dmarc@${domain.domain || domain.name}`}
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* ===== SPAM FILTER TAB ===== */}
+ {activeTab === 'spam' && (
+
+
SpamAssassin Configuration
+ {status?.spamassassin?.installed && (
+
+
+ {status.spamassassin.installed ? 'Installed' : 'Not Installed'}
+
+
+ {status.spamassassin.running ? 'Running' : 'Stopped'}
+
+ {status.spamassassin.version && (
+ v{status.spamassassin.version}
+ )}
+
+ )}
+
+
+
+ )}
+
+ {/* ===== WEBMAIL TAB ===== */}
+ {activeTab === 'webmail' && (
+
+
Roundcube Webmail
+
+
+
+
Status
+
+
+
+
+ {webmailStatus?.installed ? 'Installed' : 'Not Installed'}
+
+ {webmailStatus?.installed && (
+
+ {webmailStatus?.running ? 'Running' : 'Stopped'}
+
+ )}
+ {webmailStatus?.port && (
+ Port: {webmailStatus.port}
+ )}
+
+
+ {!webmailStatus?.installed ? (
+
+ ) : (
+
+ {webmailStatus?.running ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+ {webmailStatus?.url && (
+
+ Open Roundcube
+
+ )}
+
+ )}
+
+
+
+ {webmailStatus?.installed && (
+
+
+
Configure Nginx Proxy
+
+
+
+
+
+ setWebmailProxyDomain(e.target.value)}
+ placeholder="mail.example.com"
+ style={{ flex: 1 }}
+ />
+
+
+
Set up Nginx reverse proxy for Roundcube on this domain
+
+
+
+ )}
+
+ {webmailStatus?.installed && webmailStatus?.port && (
+
+ )}
+
+ )}
+
+
+ )}
+
+ {/* ===== MODALS ===== */}
+
+ {/* Install Email Server Modal */}
+ {showInstallModal && (
+
setShowInstallModal(false)}>
+
e.stopPropagation()}>
+
+
Install Email Server
+
+
+
+
This will install and configure Postfix, Dovecot, OpenDKIM, and SpamAssassin.
+
+
+ setInstallHostname(e.target.value)}
+ placeholder="mail.example.com"
+ />
+ The fully qualified domain name for your mail server
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Add Domain Modal */}
+ {showAddDomainModal && (
+
setShowAddDomainModal(false)}>
+
e.stopPropagation()}>
+
+
Add Email Domain
+
+
+
+
+
+ setNewDomain({ ...newDomain, domain: e.target.value })}
+ placeholder="example.com"
+ />
+
+
+
+
+ Select a DNS provider for automatic DNS record management
+
+ {newDomain.dns_provider_id && (
+
+
+ {zonesLoading ? (
+
Loading zones...
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {/* Create Account Modal */}
+ {showCreateAccountModal && (
+
setShowCreateAccountModal(false)}>
+
e.stopPropagation()}>
+
+
Create Email Account
+
+
+
+
+
+ setNewAccount({ ...newAccount, username: e.target.value })}
+ placeholder="user"
+ />
+ The local part of the email address (before @)
+
+
+
+
+ setNewAccount({ ...newAccount, password: e.target.value })}
+ placeholder="Enter password"
+ style={{ flex: 1 }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Change Password Modal */}
+ {showChangePasswordModal && (
+
setShowChangePasswordModal(false)}>
+
e.stopPropagation()}>
+
+
Change Password
+
+
+
+
+
+
+ setNewPassword(e.target.value)}
+ placeholder="Enter new password"
+ style={{ flex: 1 }}
+ />
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Edit Quota Modal */}
+ {showEditQuotaModal && (
+
setShowEditQuotaModal(false)}>
+
e.stopPropagation()}>
+
+
Edit Quota
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Add Alias Modal */}
+ {showAddAliasModal && (
+
setShowAddAliasModal(false)}>
+
e.stopPropagation()}>
+
+
Add Alias
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Add Forwarding Modal */}
+ {showAddForwardingModal && (
+
setShowAddForwardingModal(false)}>
+
e.stopPropagation()}>
+
+
Add Forwarding Rule
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Add DNS Provider Modal */}
+ {showAddProviderModal && (
+
setShowAddProviderModal(false)}>
+
e.stopPropagation()}>
+
+
Add DNS Provider
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Confirm Dialog */}
+ {confirmDialog && (
+
+ )}
+