Add i18n support with Next.js App Router and Dictionaries

app/[lang]/dashboard/domains/page.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useState, useEffect, useTransition } from "react";
+import { formatBytes } from "@/lib/format";
+
+interface Domain {
+  domain_name: string;
+  description: string;
+  active: string;
+  mboxes_in_domain: number;
+  mboxes_left: number;
+  max_num_mboxes_for_domain: number;
+  aliases_in_domain: number;
+  quota_used_in_domain: string;
+  max_quota_for_domain: number;
+}
+
+export default function DomainsPage() {
+  const [domains, setDomains] = useState<Domain[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [search, setSearch] = useState("");
+  const [form, setForm] = useState({ domain: "", description: "", mailboxes: "10", quota: "10240", maxquota: "10240" });
+  const [formError, setFormError] = useState("");
+
+  const fetchDomains = async () => {
+    setLoading(true);
+    const res = await fetch("/api/domains");
+    if (res.ok) setDomains(await res.json());
+    setLoading(false);
+  };
+
+  useEffect(() => { fetchDomains(); }, []);
+
+  const handleCreate = (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError("");
+    startTransition(async () => {
+      const res = await fetch("/api/domains", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          domain: form.domain,
+          description: form.description,
+          mailboxes: parseInt(form.mailboxes),
+          quota: parseInt(form.quota),
+          maxquota: parseInt(form.maxquota),
+        }),
+      });
+      if (res.ok) {
+        setShowModal(false);
+        setForm({ domain: "", description: "", mailboxes: "10", quota: "10240", maxquota: "10240" });
+        fetchDomains();
+      } else {
+        const data = await res.json();
+        const msg = Array.isArray(data) ? data.map((d: { msg?: string }) => d.msg).join(", ") : (data?.error ?? "Bir hata oluştu");
+        setFormError(String(msg));
+      }
+    });
+  };
+
+  const handleDelete = (domain: string) => {
+    if (!confirm(`"${domain}" domainini Mailcow'dan silmek istediğinizden emin misiniz?\n\nBu işlem geri alınamaz!`)) return;
+    startTransition(async () => {
+      await fetch(`/api/domains/${encodeURIComponent(domain)}`, { method: "DELETE" });
+      fetchDomains();
+    });
+  };
+
+  const filtered = domains.filter(
+    (d) =>
+      d.domain_name.toLowerCase().includes(search.toLowerCase()) ||
+      d.description?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <>
+      <div className="page-header">
+        <div>
+          <h1 className="page-title">Domainler</h1>
+          <p className="page-subtitle">Mailcow üzerindeki tüm domainleri yönetin</p>
+        </div>
+        <button className="btn btn-primary" onClick={() => setShowModal(true)}>
+          <PlusIcon /> Domain Ekle
+        </button>
+      </div>
+
+      <div className="page-body">
+        <div className="search-bar">
+          <div className="search-input-wrap">
+            <span className="search-icon"><SearchIcon /></span>
+            <input
+              type="text"
+              className="input search-input"
+              placeholder="Domain veya açıklama ara..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <button className="btn btn-ghost" onClick={fetchDomains}>
+            <RefreshIcon /> Yenile
+          </button>
+        </div>
+
+        <div className="table-wrap">
+          {loading ? (
+            <div className="empty-state"><span className="spinner" style={{ width: 24, height: 24 }} /></div>
+          ) : filtered.length === 0 ? (
+            <div className="empty-state">
+              <div className="empty-icon"><GlobeIcon size={24} /></div>
+              <div style={{ fontWeight: 600 }}>Domain bulunamadı</div>
+              <div style={{ fontSize: 12 }}>Mailcow&apos;a domain eklemek için &quot;Domain Ekle&quot; butonuna tıklayın.</div>
+            </div>
+          ) : (
+            <table>
+              <thead>
+                <tr>
+                  <th>Domain</th>
+                  <th>Mail Kutuları</th>
+                  <th>Alias</th>
+                  <th>Kota</th>
+                  <th>Durum</th>
+                  <th>İşlemler</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.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>
+                          <div>
+                            <div style={{ fontWeight: 500 }}>{d.domain_name}</div>
+                            {d.description && <div style={{ fontSize: 11, color: "var(--text-secondary)" }}>{d.description}</div>}
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        {d.mboxes_in_domain}
+                        <span style={{ color: "var(--text-muted)", fontSize: 12 }}> / {d.max_num_mboxes_for_domain}</span>
+                      </td>
+                      <td>{d.aliases_in_domain}</td>
+                      <td style={{ minWidth: 140 }}>
+                        <div style={{ fontSize: 11, color: "var(--text-secondary)", marginBottom: 4 }}>
+                          {formatBytes(quotaUsed)} / {formatBytes(quotaTotal)}
+                        </div>
+                        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                          <div className="progress-bar">
+                            <div className={`progress-fill ${pct > 80 ? "danger" : ""}`} style={{ width: `${pct}%` }} />
+                          </div>
+                          <span style={{ fontSize: 11, color: "var(--text-muted)" }}>{Math.round(pct)}%</span>
+                        </div>
+                      </td>
+                      <td>
+                        <span className={`badge ${String(d.active) === "1" ? "badge-green" : "badge-red"}`}>
+                          {String(d.active) === "1" ? "● Aktif" : "● Pasif"}
+                        </span>
+                      </td>
+                      <td>
+                        <button className="btn btn-danger btn-sm" onClick={() => handleDelete(d.domain_name)} disabled={isPending}>
+                          <TrashIcon /> Sil
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      {showModal && (
+        <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && setShowModal(false)}>
+          <div className="modal">
+            <div className="modal-header">
+              <h2 className="modal-title">Mailcow&apos;a Domain Ekle</h2>
+              <button className="modal-close" onClick={() => setShowModal(false)}><XIcon /></button>
+            </div>
+            <form onSubmit={handleCreate}>
+              <div className="modal-body form-group">
+                {formError && <div className="error-msg">{formError}</div>}
+                <div>
+                  <label className="label">Domain Adı</label>
+                  <input type="text" className="input" placeholder="ornek.com" value={form.domain}
+                    onChange={(e) => setForm({ ...form, domain: e.target.value })} required />
+                </div>
+                <div>
+                  <label className="label">Açıklama (isteğe bağlı)</label>
+                  <input type="text" className="input" placeholder="Bu domain hakkında..." value={form.description}
+                    onChange={(e) => setForm({ ...form, description: e.target.value })} />
+                </div>
+                <div className="form-row">
+                  <div>
+                    <label className="label">Maks. Mailbox</label>
+                    <input type="number" className="input" value={form.mailboxes} min={1}
+                      onChange={(e) => setForm({ ...form, mailboxes: e.target.value })} />
+                  </div>
+                  <div>
+                    <label className="label">Toplam Kota (MB)</label>
+                    <input type="number" className="input" value={form.quota} min={1}
+                      onChange={(e) => setForm({ ...form, quota: e.target.value })} />
+                  </div>
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-ghost" onClick={() => setShowModal(false)}>İptal</button>
+                <button type="submit" className="btn btn-primary" disabled={isPending}>
+                  {isPending ? <span className="spinner" /> : <PlusIcon />} Ekle
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function PlusIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>; }
+function SearchIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>; }
+function RefreshIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>; }
+function GlobeIcon({ size = 13 }: { size?: number }) { return <svg width={size} height={size} 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 TrashIcon() { return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>; }
+function XIcon() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>; }