Alert system

app/(app)/alerts/page.tsx

@@ -0,0 +1,796 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useI18n } from "@/lib/i18n/useI18n";
+
+type RoleName = "MEMBER" | "ADMIN" | "OWNER";
+type Channel = "email" | "sms";
+
+type RoleRule = {
+  enabled: boolean;
+  afterMinutes: number;
+  channels: Channel[];
+};
+
+type AlertRule = {
+  id: string;
+  eventType: string;
+  roles: Record<RoleName, RoleRule>;
+  repeatMinutes?: number;
+};
+
+type AlertPolicy = {
+  version: number;
+  defaults: Record<RoleName, RoleRule>;
+  rules: AlertRule[];
+};
+
+type AlertContact = {
+  id: string;
+  name: string;
+  roleScope: string;
+  email?: string | null;
+  phone?: string | null;
+  eventTypes?: string[] | null;
+  isActive: boolean;
+  userId?: string | null;
+};
+
+type ContactDraft = {
+  name: string;
+  roleScope: string;
+  email: string;
+  phone: string;
+  eventTypes: string[];
+  isActive: boolean;
+};
+
+const ROLE_ORDER: RoleName[] = ["MEMBER", "ADMIN", "OWNER"];
+const CHANNELS: Channel[] = ["email", "sms"];
+const EVENT_TYPES = [
+  { value: "macrostop", labelKey: "alerts.event.macrostop" },
+  { value: "microstop", labelKey: "alerts.event.microstop" },
+  { value: "slow-cycle", labelKey: "alerts.event.slow-cycle" },
+  { value: "offline", labelKey: "alerts.event.offline" },
+  { value: "error", labelKey: "alerts.event.error" },
+] as const;
+
+function normalizeContactDraft(contact: AlertContact): ContactDraft {
+  return {
+    name: contact.name,
+    roleScope: contact.roleScope,
+    email: contact.email ?? "",
+    phone: contact.phone ?? "",
+    eventTypes: Array.isArray(contact.eventTypes) ? contact.eventTypes : [],
+    isActive: contact.isActive,
+  };
+}
+
+export default function AlertsPage() {
+  const { t } = useI18n();
+  const [policy, setPolicy] = useState<AlertPolicy | null>(null);
+  const [policyDraft, setPolicyDraft] = useState<AlertPolicy | null>(null);
+  const [contacts, setContacts] = useState<AlertContact[]>([]);
+  const [contactEdits, setContactEdits] = useState<Record<string, ContactDraft>>({});
+  const [loading, setLoading] = useState(true);
+  const [role, setRole] = useState<RoleName>("MEMBER");
+  const [savingPolicy, setSavingPolicy] = useState(false);
+  const [policyError, setPolicyError] = useState<string | null>(null);
+  const [contactsError, setContactsError] = useState<string | null>(null);
+  const [savingContactId, setSavingContactId] = useState<string | null>(null);
+  const [deletingContactId, setDeletingContactId] = useState<string | null>(null);
+  const [selectedEventType, setSelectedEventType] = useState<string>("");
+
+  const [newContact, setNewContact] = useState<ContactDraft>({
+    name: "",
+    roleScope: "CUSTOM",
+    email: "",
+    phone: "",
+    eventTypes: [],
+    isActive: true,
+  });
+  const [creatingContact, setCreatingContact] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+
+    async function load() {
+      setLoading(true);
+      setPolicyError(null);
+      setContactsError(null);
+      try {
+        const [policyRes, contactsRes, meRes] = await Promise.all([
+          fetch("/api/alerts/policy", { cache: "no-store" }),
+          fetch("/api/alerts/contacts", { cache: "no-store" }),
+          fetch("/api/me", { cache: "no-store" }),
+        ]);
+        const policyJson = await policyRes.json().catch(() => ({}));
+        const contactsJson = await contactsRes.json().catch(() => ({}));
+        const meJson = await meRes.json().catch(() => ({}));
+
+        if (!alive) return;
+
+        if (!policyRes.ok || !policyJson?.ok) {
+          setPolicyError(policyJson?.error || t("alerts.error.loadPolicy"));
+        } else {
+          setPolicy(policyJson.policy);
+          setPolicyDraft(policyJson.policy);
+          if (!selectedEventType && policyJson.policy?.rules?.length) {
+            setSelectedEventType(policyJson.policy.rules[0].eventType);
+          }
+        }
+
+        if (!contactsRes.ok || !contactsJson?.ok) {
+          setContactsError(contactsJson?.error || t("alerts.error.loadContacts"));
+        } else {
+          setContacts(contactsJson.contacts ?? []);
+          const nextEdits: Record<string, ContactDraft> = {};
+          for (const contact of contactsJson.contacts ?? []) {
+            nextEdits[contact.id] = normalizeContactDraft(contact);
+          }
+          setContactEdits(nextEdits);
+        }
+
+        if (meRes.ok && meJson?.ok && meJson?.membership?.role) {
+          setRole(String(meJson.membership.role).toUpperCase() as RoleName);
+        }
+      } catch {
+        if (!alive) return;
+        setPolicyError(t("alerts.error.loadPolicy"));
+        setContactsError(t("alerts.error.loadContacts"));
+      } finally {
+        if (alive) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      alive = false;
+    };
+  }, [t]);
+
+  useEffect(() => {
+    if (!policyDraft?.rules?.length) return;
+    setSelectedEventType((prev) => {
+      if (prev && policyDraft.rules.some((rule) => rule.eventType === prev)) {
+        return prev;
+      }
+      return policyDraft.rules[0].eventType;
+    });
+  }, [policyDraft]);
+
+  function updatePolicyDefaults(role: RoleName, patch: Partial<RoleRule>) {
+    setPolicyDraft((prev) => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        defaults: {
+          ...prev.defaults,
+          [role]: {
+            ...prev.defaults[role],
+            ...patch,
+          },
+        },
+      };
+    });
+  }
+
+  function updateRule(eventType: string, patch: Partial<AlertRule>) {
+    setPolicyDraft((prev) => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        rules: prev.rules.map((rule) =>
+          rule.eventType === eventType ? { ...rule, ...patch } : rule
+        ),
+      };
+    });
+  }
+
+  function updateRuleRole(eventType: string, role: RoleName, patch: Partial<RoleRule>) {
+    setPolicyDraft((prev) => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        rules: prev.rules.map((rule) => {
+          if (rule.eventType !== eventType) return rule;
+          return {
+            ...rule,
+            roles: {
+              ...rule.roles,
+              [role]: {
+                ...rule.roles[role],
+                ...patch,
+              },
+            },
+          };
+        }),
+      };
+    });
+  }
+
+  function applyDefaultsToEvent(eventType: string) {
+    setPolicyDraft((prev) => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        rules: prev.rules.map((rule) => {
+          if (rule.eventType !== eventType) return rule;
+          return {
+            ...rule,
+            roles: {
+              MEMBER: { ...prev.defaults.MEMBER },
+              ADMIN: { ...prev.defaults.ADMIN },
+              OWNER: { ...prev.defaults.OWNER },
+            },
+          };
+        }),
+      };
+    });
+  }
+  async function savePolicy() {
+    if (!policyDraft) return;
+    setSavingPolicy(true);
+    setPolicyError(null);
+    try {
+      const res = await fetch("/api/alerts/policy", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ policy: policyDraft }),
+      });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json?.ok) {
+        setPolicyError(json?.error || t("alerts.error.savePolicy"));
+        return;
+      }
+      setPolicy(policyDraft);
+    } catch {
+      setPolicyError(t("alerts.error.savePolicy"));
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  function updateContactDraft(id: string, patch: Partial<ContactDraft>) {
+    setContactEdits((prev) => ({
+      ...prev,
+      [id]: {
+        ...(prev[id] ?? normalizeContactDraft(contacts.find((c) => c.id === id)!)),
+        ...patch,
+      },
+    }));
+  }
+
+  async function saveContact(id: string) {
+    const draft = contactEdits[id];
+    if (!draft) return;
+    setSavingContactId(id);
+    try {
+      const eventTypes = draft.eventTypes.length ? draft.eventTypes : null;
+      const res = await fetch(`/api/alerts/contacts/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: draft.name,
+          roleScope: draft.roleScope,
+          email: draft.email || null,
+          phone: draft.phone || null,
+          eventTypes,
+          isActive: draft.isActive,
+        }),
+      });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json?.ok) {
+        setContactsError(json?.error || t("alerts.error.saveContacts"));
+        return;
+      }
+      const updated = json.contact as AlertContact;
+      setContacts((prev) => prev.map((c) => (c.id === id ? updated : c)));
+      setContactEdits((prev) => ({ ...prev, [id]: normalizeContactDraft(updated) }));
+    } catch {
+      setContactsError(t("alerts.error.saveContacts"));
+    } finally {
+      setSavingContactId(null);
+    }
+  }
+
+  async function deleteContact(id: string) {
+    setDeletingContactId(id);
+    try {
+      const res = await fetch(`/api/alerts/contacts/${id}`, { method: "DELETE" });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json?.ok) {
+        setContactsError(json?.error || t("alerts.error.deleteContact"));
+        return;
+      }
+      setContacts((prev) => prev.filter((c) => c.id !== id));
+      setContactEdits((prev) => {
+        const next = { ...prev };
+        delete next[id];
+        return next;
+      });
+    } catch {
+      setContactsError(t("alerts.error.deleteContact"));
+    } finally {
+      setDeletingContactId(null);
+    }
+  }
+
+  async function createContact() {
+    setCreatingContact(true);
+    setCreateError(null);
+    try {
+      const eventTypes = newContact.eventTypes.length ? newContact.eventTypes : null;
+      const res = await fetch("/api/alerts/contacts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: newContact.name,
+          roleScope: newContact.roleScope,
+          email: newContact.email || null,
+          phone: newContact.phone || null,
+          eventTypes,
+        }),
+      });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json?.ok) {
+        setCreateError(json?.error || t("alerts.error.createContact"));
+        return;
+      }
+      const contact = json.contact as AlertContact;
+      setContacts((prev) => [contact, ...prev]);
+      setContactEdits((prev) => ({ ...prev, [contact.id]: normalizeContactDraft(contact) }));
+      setNewContact({
+        name: "",
+        roleScope: "CUSTOM",
+        email: "",
+        phone: "",
+        eventTypes: [],
+        isActive: true,
+      });
+    } catch {
+      setCreateError(t("alerts.error.createContact"));
+    } finally {
+      setCreatingContact(false);
+    }
+  }
+
+  const policyDirty = useMemo(
+    () => JSON.stringify(policy) !== JSON.stringify(policyDraft),
+    [policy, policyDraft]
+  );
+  const canEdit = role === "OWNER";
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-8">
+      <div>
+        <h1 className="text-2xl font-semibold text-white">{t("alerts.title")}</h1>
+        <p className="mt-2 text-sm text-zinc-400">{t("alerts.subtitle")}</p>
+      </div>
+
+      {loading && (
+        <div className="text-sm text-zinc-400">{t("alerts.loading")}</div>
+      )}
+
+      {!loading && policyError && (
+        <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
+          {policyError}
+        </div>
+      )}
+
+      {!loading && policyDraft && (
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
+          <div className="mb-4 flex items-center justify-between gap-4">
+            <div>
+              <div className="text-sm font-semibold text-white">{t("alerts.policy.title")}</div>
+              <div className="text-xs text-zinc-400">{t("alerts.policy.subtitle")}</div>
+            </div>
+            <button
+              type="button"
+              onClick={savePolicy}
+              disabled={!canEdit || !policyDirty || savingPolicy}
+              className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-sm text-white disabled:opacity-40"
+            >
+              {savingPolicy ? t("alerts.policy.saving") : t("alerts.policy.save")}
+            </button>
+          </div>
+
+          {!canEdit && (
+            <div className="mb-4 rounded-xl border border-white/10 bg-black/20 p-3 text-sm text-zinc-300">
+              {t("alerts.policy.readOnly")}
+            </div>
+          )}
+
+          <div className="rounded-xl border border-white/10 bg-black/20 p-4">
+            <div className="mb-3 text-xs text-zinc-400">{t("alerts.policy.defaults")}</div>
+            <div className="mb-4 text-xs text-zinc-500">{t("alerts.policy.defaultsHelp")}</div>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+              {ROLE_ORDER.map((role) => {
+                const rule = policyDraft.defaults[role];
+                return (
+                  <div key={role} className="rounded-xl border border-white/10 bg-black/20 p-3">
+                    <div className="text-sm font-semibold text-white">{role}</div>
+                    <label className="mt-3 flex items-center gap-2 text-xs text-zinc-400">
+                      <input
+                        type="checkbox"
+                        checked={rule.enabled}
+                        onChange={(event) => updatePolicyDefaults(role, { enabled: event.target.checked })}
+                        disabled={!canEdit}
+                        className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                      />
+                      {t("alerts.policy.enabled")}
+                    </label>
+                    <label className="mt-3 block text-xs text-zinc-400">
+                      {t("alerts.policy.afterMinutes")}
+                      <input
+                        type="number"
+                        min={0}
+                        value={rule.afterMinutes}
+                        onChange={(event) =>
+                          updatePolicyDefaults(role, { afterMinutes: Number(event.target.value) })
+                        }
+                        disabled={!canEdit}
+                        className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+                      />
+                    </label>
+                    <div className="mt-3 text-xs text-zinc-400">{t("alerts.policy.channels")}</div>
+                    <div className="mt-2 flex flex-wrap gap-3">
+                      {CHANNELS.map((channel) => (
+                        <label key={channel} className="flex items-center gap-2 text-xs text-zinc-400">
+                          <input
+                            type="checkbox"
+                            checked={rule.channels.includes(channel)}
+                            onChange={(event) => {
+                              const next = event.target.checked
+                                ? [...rule.channels, channel]
+                                : rule.channels.filter((c) => c !== channel);
+                              updatePolicyDefaults(role, { channels: next });
+                            }}
+                            disabled={!canEdit}
+                            className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                          />
+                          {channel.toUpperCase()}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="mt-5 grid grid-cols-1 gap-4">
+            <div className="rounded-xl border border-white/10 bg-black/20 p-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <div className="text-sm font-semibold text-white">{t("alerts.policy.eventSelectLabel")}</div>
+                  <div className="text-xs text-zinc-400">{t("alerts.policy.eventSelectHelper")}</div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <select
+                    value={selectedEventType}
+                    onChange={(event) => setSelectedEventType(event.target.value)}
+                    disabled={!canEdit}
+                    className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+                  >
+                    {policyDraft.rules.map((rule) => (
+                      <option key={rule.eventType} value={rule.eventType}>
+                        {t(`alerts.event.${rule.eventType}`)}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    type="button"
+                    onClick={() => applyDefaultsToEvent(selectedEventType)}
+                    disabled={!canEdit || !selectedEventType}
+                    className="rounded-lg border border-white/10 bg-white/10 px-3 py-2 text-xs text-white disabled:opacity-40"
+                  >
+                    {t("alerts.policy.applyDefaults")}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {policyDraft.rules
+              .filter((rule) => rule.eventType === selectedEventType)
+              .map((rule) => (
+                <div key={rule.eventType} className="rounded-xl border border-white/10 bg-black/20 p-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="text-sm font-semibold text-white">
+                      {t(`alerts.event.${rule.eventType}`)}
+                    </div>
+                    <label className="text-xs text-zinc-400">
+                      {t("alerts.policy.repeatMinutes")}
+                      <input
+                        type="number"
+                        min={0}
+                        value={rule.repeatMinutes ?? 0}
+                        onChange={(event) =>
+                          updateRule(rule.eventType, { repeatMinutes: Number(event.target.value) })
+                        }
+                        disabled={!canEdit}
+                        className="ml-2 w-20 rounded-lg border border-white/10 bg-black/30 px-2 py-1 text-xs text-white"
+                      />
+                    </label>
+                  </div>
+
+                  <div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
+                    {ROLE_ORDER.map((role) => {
+                      const roleRule = rule.roles[role];
+                      return (
+                        <div key={role} className="rounded-xl border border-white/10 bg-black/20 p-3">
+                          <div className="text-sm font-semibold text-white">{role}</div>
+                          <label className="mt-2 flex items-center gap-2 text-xs text-zinc-400">
+                            <input
+                              type="checkbox"
+                              checked={roleRule.enabled}
+                              onChange={(event) =>
+                                updateRuleRole(rule.eventType, role, { enabled: event.target.checked })
+                              }
+                              disabled={!canEdit}
+                              className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                            />
+                            {t("alerts.policy.enabled")}
+                          </label>
+                          <label className="mt-3 block text-xs text-zinc-400">
+                            {t("alerts.policy.afterMinutes")}
+                            <input
+                              type="number"
+                              min={0}
+                              value={roleRule.afterMinutes}
+                              onChange={(event) =>
+                                updateRuleRole(rule.eventType, role, { afterMinutes: Number(event.target.value) })
+                              }
+                              disabled={!canEdit}
+                              className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+                            />
+                          </label>
+                          <div className="mt-3 text-xs text-zinc-400">{t("alerts.policy.channels")}</div>
+                          <div className="mt-2 flex flex-wrap gap-3">
+                            {CHANNELS.map((channel) => (
+                              <label key={channel} className="flex items-center gap-2 text-xs text-zinc-400">
+                                <input
+                                  type="checkbox"
+                                  checked={roleRule.channels.includes(channel)}
+                                  onChange={(event) => {
+                                    const next = event.target.checked
+                                      ? [...roleRule.channels, channel]
+                                      : roleRule.channels.filter((c) => c !== channel);
+                                    updateRuleRole(rule.eventType, role, { channels: next });
+                                  }}
+                                  disabled={!canEdit}
+                                  className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                                />
+                                {channel.toUpperCase()}
+                              </label>
+                            ))}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+
+      <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
+        <div className="mb-4 flex items-center justify-between gap-4">
+          <div>
+            <div className="text-sm font-semibold text-white">{t("alerts.contacts.title")}</div>
+            <div className="text-xs text-zinc-400">{t("alerts.contacts.subtitle")}</div>
+          </div>
+        </div>
+
+        {!canEdit && (
+          <div className="mb-4 rounded-xl border border-white/10 bg-black/20 p-3 text-sm text-zinc-300">
+            {t("alerts.contacts.readOnly")}
+          </div>
+        )}
+
+        {contactsError && (
+          <div className="mb-3 rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
+            {contactsError}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
+            {t("alerts.contacts.name")}
+            <input
+              value={newContact.name}
+              onChange={(event) => setNewContact((prev) => ({ ...prev, name: event.target.value }))}
+              disabled={!canEdit}
+              className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+            />
+          </label>
+          <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
+            {t("alerts.contacts.roleScope")}
+            <select
+              value={newContact.roleScope}
+              onChange={(event) => setNewContact((prev) => ({ ...prev, roleScope: event.target.value }))}
+              disabled={!canEdit}
+              className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+            >
+              <option value="CUSTOM">{t("alerts.contacts.role.custom")}</option>
+              <option value="MEMBER">{t("alerts.contacts.role.member")}</option>
+              <option value="ADMIN">{t("alerts.contacts.role.admin")}</option>
+              <option value="OWNER">{t("alerts.contacts.role.owner")}</option>
+            </select>
+          </label>
+          <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
+            {t("alerts.contacts.email")}
+            <input
+              value={newContact.email}
+              onChange={(event) => setNewContact((prev) => ({ ...prev, email: event.target.value }))}
+              disabled={!canEdit}
+              className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+            />
+          </label>
+          <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
+            {t("alerts.contacts.phone")}
+            <input
+              value={newContact.phone}
+              onChange={(event) => setNewContact((prev) => ({ ...prev, phone: event.target.value }))}
+              disabled={!canEdit}
+              className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+            />
+          </label>
+          <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400 md:col-span-2">
+            {t("alerts.contacts.eventTypes")}
+            <div className="mt-2 flex flex-wrap gap-3">
+              {EVENT_TYPES.map((eventType) => (
+                <label key={eventType.value} className="flex items-center gap-2 text-xs text-zinc-400">
+                  <input
+                    type="checkbox"
+                    checked={newContact.eventTypes.includes(eventType.value)}
+                    onChange={(event) => {
+                      const next = event.target.checked
+                        ? [...newContact.eventTypes, eventType.value]
+                        : newContact.eventTypes.filter((value) => value !== eventType.value);
+                      setNewContact((prev) => ({ ...prev, eventTypes: next }));
+                    }}
+                    disabled={!canEdit}
+                    className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                  />
+                  {t(eventType.labelKey)}
+                </label>
+              ))}
+            </div>
+            <div className="mt-2 text-xs text-zinc-500">{t("alerts.contacts.eventTypesHelper")}</div>
+          </label>
+        </div>
+
+        {createError && (
+          <div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
+            {createError}
+          </div>
+        )}
+
+        <div className="mt-3">
+          <button
+            type="button"
+            onClick={createContact}
+            disabled={!canEdit || creatingContact}
+            className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-sm text-white disabled:opacity-40"
+          >
+            {creatingContact ? t("alerts.contacts.creating") : t("alerts.contacts.add")}
+          </button>
+        </div>
+
+        <div className="mt-6 space-y-3">
+          {contacts.length === 0 && (
+            <div className="text-sm text-zinc-400">{t("alerts.contacts.empty")}</div>
+          )}
+          {contacts.map((contact) => {
+            const draft = contactEdits[contact.id] ?? normalizeContactDraft(contact);
+            const locked = !!contact.userId;
+            return (
+              <div key={contact.id} className="rounded-xl border border-white/10 bg-black/20 p-3">
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  <label className="text-xs text-zinc-400">
+                    {t("alerts.contacts.name")}
+                    <input
+                      value={draft.name}
+                      onChange={(event) => updateContactDraft(contact.id, { name: event.target.value })}
+                      disabled={!canEdit || locked}
+                      className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
+                    />
+                  </label>
+                  <label className="text-xs text-zinc-400">
+                    {t("alerts.contacts.roleScope")}
+                    <select
+                      value={draft.roleScope}
+                      onChange={(event) => updateContactDraft(contact.id, { roleScope: event.target.value })}
+                      disabled={!canEdit}
+                      className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+                    >
+                      <option value="CUSTOM">{t("alerts.contacts.role.custom")}</option>
+                      <option value="MEMBER">{t("alerts.contacts.role.member")}</option>
+                      <option value="ADMIN">{t("alerts.contacts.role.admin")}</option>
+                      <option value="OWNER">{t("alerts.contacts.role.owner")}</option>
+                    </select>
+                  </label>
+                  <label className="text-xs text-zinc-400">
+                    {t("alerts.contacts.email")}
+                    <input
+                      value={draft.email}
+                      onChange={(event) => updateContactDraft(contact.id, { email: event.target.value })}
+                      disabled={!canEdit || locked}
+                      className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
+                    />
+                  </label>
+                  <label className="text-xs text-zinc-400">
+                    {t("alerts.contacts.phone")}
+                    <input
+                      value={draft.phone}
+                      onChange={(event) => updateContactDraft(contact.id, { phone: event.target.value })}
+                      disabled={!canEdit || locked}
+                      className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
+                    />
+                  </label>
+                  <label className="text-xs text-zinc-400 md:col-span-2">
+                    {t("alerts.contacts.eventTypes")}
+                    <div className="mt-2 flex flex-wrap gap-3">
+                      {EVENT_TYPES.map((eventType) => (
+                        <label key={eventType.value} className="flex items-center gap-2 text-xs text-zinc-400">
+                          <input
+                            type="checkbox"
+                            checked={draft.eventTypes.includes(eventType.value)}
+                            onChange={(event) => {
+                              const next = event.target.checked
+                                ? [...draft.eventTypes, eventType.value]
+                                : draft.eventTypes.filter((value) => value !== eventType.value);
+                              updateContactDraft(contact.id, { eventTypes: next });
+                            }}
+                            disabled={!canEdit}
+                            className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                          />
+                          {t(eventType.labelKey)}
+                        </label>
+                      ))}
+                    </div>
+                    <div className="mt-2 text-xs text-zinc-500">{t("alerts.contacts.eventTypesHelper")}</div>
+                  </label>
+                  <label className="flex items-center gap-2 text-xs text-zinc-400">
+                    <input
+                      type="checkbox"
+                      checked={draft.isActive}
+                      onChange={(event) => updateContactDraft(contact.id, { isActive: event.target.checked })}
+                      disabled={!canEdit}
+                      className="h-4 w-4 rounded border border-white/20 bg-black/20"
+                    />
+                    {t("alerts.contacts.active")}
+                  </label>
+                </div>
+                <div className="mt-3 flex flex-wrap gap-3">
+                  <button
+                    type="button"
+                    onClick={() => saveContact(contact.id)}
+                    disabled={!canEdit || savingContactId === contact.id}
+                    className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-xs text-white disabled:opacity-40"
+                  >
+                    {savingContactId === contact.id ? t("alerts.contacts.saving") : t("alerts.contacts.save")}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => deleteContact(contact.id)}
+                    disabled={!canEdit || deletingContactId === contact.id}
+                    className="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-2 text-xs text-red-200 disabled:opacity-40"
+                  >
+                    {deletingContactId === contact.id ? t("alerts.contacts.deleting") : t("alerts.contacts.delete")}
+                  </button>
+                  {locked && (
+                    <span className="text-xs text-zinc-500">{t("alerts.contacts.linkedUser")}</span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}