221 lines
9.8 KiB
TypeScript
221 lines
9.8 KiB
TypeScript
import { auth } from "@/auth";
|
||
import { getDomains } from "@/lib/mailcow";
|
||
import { canAccessDomain } from "@/lib/users";
|
||
import { formatBytes } from "@/lib/format";
|
||
import { getDictionary, Locale } from "@/app/dictionaries";
|
||
|
||
export default async function DashboardPage(
|
||
props: {
|
||
params: Promise<{ lang: string }>;
|
||
}
|
||
) {
|
||
const params = await props.params;
|
||
|
||
const session = await auth();
|
||
const role = session?.user?.role;
|
||
const userDomains = session?.user?.domains ?? [];
|
||
const lang = params.lang as Locale;
|
||
const dict = await getDictionary(lang);
|
||
|
||
const allDomains = await getDomains();
|
||
const visibleDomains = allDomains.filter((d) => canAccessDomain(userDomains, d.domain_name));
|
||
|
||
const totalMailboxes = visibleDomains.reduce((sum, d) => sum + d.mboxes_in_domain, 0);
|
||
const totalAliases = visibleDomains.reduce((sum, d) => sum + d.aliases_in_domain, 0);
|
||
|
||
return (
|
||
<>
|
||
<div className="page-header">
|
||
<div>
|
||
<h1 className="page-title">{dict.dashboard.title || "Dashboard"}</h1>
|
||
<p className="page-subtitle">{dict.dashboard.welcome || "Hoş geldiniz"}, {session?.user?.name} 👋</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="page-body">
|
||
<div className="stats-grid">
|
||
<StatCard
|
||
label={dict.dashboard.totalDomains || "Toplam Domain"}
|
||
value={visibleDomains.length}
|
||
color="var(--accent)"
|
||
icon={<GlobeIcon />}
|
||
/>
|
||
<StatCard
|
||
label={dict.dashboard.mailboxes || "Mail Kutuları"}
|
||
value={totalMailboxes}
|
||
color="var(--success)"
|
||
icon={<MailIcon />}
|
||
/>
|
||
<StatCard
|
||
label={dict.dashboard.aliases || "Alias"}
|
||
value={totalAliases}
|
||
color="var(--warning)"
|
||
icon={<AtIcon />}
|
||
/>
|
||
{role === "SUPER_ADMIN" && (
|
||
<StatCard
|
||
label={dict.dashboard.users || "Tanımlı Kullanıcı"}
|
||
value={"—"}
|
||
sub={dict.dashboard.usersSub || "Kullanıcılar .env'den yönetilir"}
|
||
color="var(--text-muted)"
|
||
icon={<UsersIcon />}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Domain durum tablosu */}
|
||
{visibleDomains.length > 0 && (
|
||
<div className="card" style={{ padding: 0, overflow: "hidden" }}>
|
||
<div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
|
||
<h2 style={{ fontSize: 14, fontWeight: 700, color: "var(--text-primary)" }}>
|
||
{dict.dashboard.domainStatus || "Domain Durumu"}
|
||
</h2>
|
||
</div>
|
||
<div className="table-wrap" style={{ border: "none", borderRadius: 0 }}>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>{dict.dashboard.domain || "Domain"}</th>
|
||
<th>{dict.dashboard.mailboxes || "Mail Kutuları"}</th>
|
||
<th>{dict.dashboard.quotaUsage || "Kota Kullanımı"}</th>
|
||
<th>{dict.dashboard.status || "Durum"}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{visibleDomains.map((d) => {
|
||
const quotaUsed = Number(d.quota_used_in_domain);
|
||
const quotaTotal = d.max_quota_for_domain;
|
||
const pct = quotaTotal > 0 ? Math.min((quotaUsed / quotaTotal) * 100, 100) : 0;
|
||
return (
|
||
<tr key={d.domain_name}>
|
||
<td>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||
<div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--accent-dim)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent-hover)", flexShrink: 0 }}>
|
||
<GlobeIcon />
|
||
</div>
|
||
<span style={{ fontWeight: 500 }}>{d.domain_name}</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span>{d.mboxes_in_domain}</span>
|
||
<span style={{ color: "var(--text-muted)", fontSize: 12 }}> / {d.max_num_mboxes_for_domain}</span>
|
||
</td>
|
||
<td style={{ minWidth: 160 }}>
|
||
<div style={{ fontSize: 11, color: "var(--text-secondary)", marginBottom: 4 }}>
|
||
{formatBytes(quotaUsed)} / {formatBytes(quotaTotal)}
|
||
</div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||
<div className="progress-bar">
|
||
<div className={`progress-fill ${pct > 80 ? "danger" : ""}`} style={{ width: `${pct}%` }} />
|
||
</div>
|
||
<span style={{ fontSize: 11, color: "var(--text-muted)", flexShrink: 0 }}>{Math.round(pct)}%</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<span className={`badge ${String(d.active) === "1" ? "badge-green" : "badge-red"}`}>
|
||
{String(d.active) === "1" ? `● ${dict.dashboard.active || "Aktif"}` : `● ${dict.dashboard.inactive || "Pasif"}`}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Quick actions */}
|
||
<div className="card">
|
||
<h2 style={{ fontSize: 14, fontWeight: 700, marginBottom: 16, color: "var(--text-primary)" }}>
|
||
{dict.dashboard.quickActions || "Hızlı İşlemler"}
|
||
</h2>
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
||
{role === "SUPER_ADMIN" && (
|
||
<QuickItem
|
||
href={`/${lang}/dashboard/domains`}
|
||
icon={<GlobeIcon />}
|
||
title={dict.dashboard.manageDomains || "Domain Yönetimi"}
|
||
desc={dict.dashboard.manageDomainsDesc || "Domain ekle, sil, yönet"}
|
||
color="var(--accent)"
|
||
/>
|
||
)}
|
||
<QuickItem
|
||
href={`/${lang}/dashboard/mailboxes`}
|
||
icon={<MailIcon />}
|
||
title={dict.dashboard.manageMailboxes || "Mail Hesapları"}
|
||
desc={dict.dashboard.manageMailboxesDesc || "Yeni hesap oluştur, şifre değiştir, sil"}
|
||
color="var(--success)"
|
||
/>
|
||
{role === "SUPER_ADMIN" && (
|
||
<QuickItem
|
||
href={`/${lang}/dashboard/users`}
|
||
icon={<UsersIcon />}
|
||
title={dict.dashboard.manageUsers || "Kullanıcılar"}
|
||
desc={dict.dashboard.manageUsersDesc || ".env'den tanımlı panel kullanıcılarını görüntüle"}
|
||
color="var(--warning)"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function StatCard({ label, value, sub, color, icon }: {
|
||
label: string;
|
||
value: number | string;
|
||
sub?: string;
|
||
color: string;
|
||
icon: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="stat-card">
|
||
<div className="stat-icon" style={{ background: `${color}20`, color }}>
|
||
{icon}
|
||
</div>
|
||
<div className="stat-label">{label}</div>
|
||
<div className="stat-value">{value}</div>
|
||
{sub && <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{sub}</div>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function QuickItem({ href, icon, title, desc, color }: {
|
||
href: string;
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
desc: string;
|
||
color: string;
|
||
}) {
|
||
return (
|
||
<a
|
||
href={href}
|
||
style={{
|
||
display: "flex", alignItems: "center", gap: 14, padding: 14,
|
||
borderRadius: "var(--radius)", border: "1px solid var(--border)",
|
||
background: "var(--bg)", textDecoration: "none",
|
||
transition: "all 0.15s ease",
|
||
}}
|
||
>
|
||
<div style={{ width: 36, height: 36, borderRadius: 8, background: `${color}20`, color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
|
||
{icon}
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 600, color: "var(--text-primary)" }}>{title}</div>
|
||
<div style={{ fontSize: 12, color: "var(--text-secondary)", marginTop: 2 }}>{desc}</div>
|
||
</div>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="m9 18 6-6-6-6" />
|
||
</svg>
|
||
</a>
|
||
);
|
||
}
|
||
|
||
// Icons
|
||
function GlobeIcon() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>; }
|
||
function MailIcon() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>; }
|
||
function AtIcon() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>; }
|
||
function UsersIcon() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>; }
|