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>
+  );
+}

app/(app)/machines/[machineId]/MachineDetailClient.tsx

@@ -21,6 +21,7 @@ import { useI18n } from "@/lib/i18n/useI18n";
 
 type Heartbeat = {
   ts: string;
+  tsServer?: string | null;
   status: string;
   message?: string | null;
   ip?: string | null;
@@ -250,6 +251,9 @@ export default function MachineDetailClient() {
   const [loading, setLoading] = useState(true);
   const [machine, setMachine] = useState<MachineDetail | null>(null);
   const [events, setEvents] = useState<EventRow[]>([]);
+  const [detectedEvents, setDetectedEvents] = useState<EventRow[]>([]);
+  const [eventsCountAll, setEventsCountAll] = useState<number | null>(null);
+  const [detectedEventsLoading, setDetectedEventsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [cycles, setCycles] = useState<CycleRow[]>([]);
   const [thresholds, setThresholds] = useState<Thresholds | null>(null);
@@ -300,7 +304,7 @@ export default function MachineDetailClient() {
 
     async function load() {
       try {
-        const res = await fetch(`/api/machines/${machineId}?windowSec=10800`, {
+        const res = await fetch(`/api/machines/${machineId}?windowSec=3600&events=critical`, {
           cache: "no-store",
           credentials: "include",
         });
@@ -316,6 +320,7 @@ export default function MachineDetailClient() {
 
         setMachine(json.machine ?? null);
         setEvents(json.events ?? []);
+        setEventsCountAll(typeof json.eventsCountAll === "number" ? json.eventsCountAll : null);
         setCycles(json.cycles ?? []);
         setThresholds(json.thresholds ?? null);
         setActiveStoppage(json.activeStoppage ?? null);
@@ -341,6 +346,32 @@ export default function MachineDetailClient() {
     return () => clearInterval(timer);
   }, []);
 
+  useEffect(() => {
+    if (open !== "events" || !machineId) return;
+
+    let alive = true;
+    setDetectedEventsLoading(true);
+
+    fetch(`/api/machines/${machineId}?events=all&eventsOnly=1&eventsWindowSec=21600`, {
+      cache: "no-store",
+      credentials: "include",
+    })
+      .then((res) => res.json())
+      .then((json) => {
+        if (!alive) return;
+        setDetectedEvents(json.events ?? []);
+        setEventsCountAll(typeof json.eventsCountAll === "number" ? json.eventsCountAll : eventsCountAll);
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (alive) setDetectedEventsLoading(false);
+      });
+
+    return () => {
+      alive = false;
+    };
+  }, [machineId, open, eventsCountAll]);
+
   async function parseWorkOrdersFile(file: File) {
     const name = file.name.toLowerCase();
     if (name.endsWith(".csv")) {
@@ -512,7 +543,8 @@ export default function MachineDetailClient() {
 
   const hb = machine?.latestHeartbeat ?? null;
   const kpi = machine?.latestKpi ?? null;
-  const offline = useMemo(() => isOffline(hb?.ts), [hb?.ts]);
+  const hbTs = hb?.tsServer ?? hb?.ts;
+  const offline = useMemo(() => isOffline(hbTs), [hbTs]);
   const normalizedStatus = normalizeStatus(hb?.status);
   const statusLabel = offline
     ? t("machine.detail.status.offline")
@@ -526,7 +558,7 @@ export default function MachineDetailClient() {
   const machineCode = machine?.code ?? t("common.na");
   const machineLocation = machine?.location ?? t("common.na");
   const lastSeenLabel = t("machine.detail.lastSeen", {
-    time: hb?.ts ? timeAgo(hb.ts) : t("common.never"),
+    time: hbTs ? timeAgo(hbTs) : t("common.never"),
   });
 
   const ActiveRing = (props: any) => {
@@ -814,7 +846,7 @@ export default function MachineDetailClient() {
       };
     }
 
-    const windowSec = 10800;
+    const windowSec = 3600;
     const end = rows[rows.length - 1].t;
     const start = end - windowSec * 1000;
 
@@ -1027,7 +1059,7 @@ export default function MachineDetailClient() {
             <MiniCard
               title={t("machine.detail.mini.events")}
               subtitle={t("machine.detail.mini.events.subtitle")}
-              value={`${cycleDerived.counts.slow + cycleDerived.counts.microstop + cycleDerived.counts.macrostop}`}
+              value={`${eventsCountAll ?? detectedEvents.length ?? events.length}`}
               onClick={() => setOpen("events")}
             />
             <MiniCard
@@ -1046,16 +1078,25 @@ export default function MachineDetailClient() {
 
           <Modal open={open === "events"} onClose={() => setOpen(null)} title={t("machine.detail.modal.events")}>
             <div className="max-h-[60vh] space-y-2 overflow-y-auto no-scrollbar">
-              {cycleDerived.mapped
-                .filter((row) => row.bucket !== "normal" && row.bucket !== "unknown")
-                .slice()
-                .reverse()
-                .map((row, idx) => {
-                  const meta = BUCKET[row.bucket as keyof typeof BUCKET];
+              {detectedEventsLoading ? (
+                <div className="text-sm text-zinc-400">{t("machine.detail.loading")}</div>
+              ) : detectedEvents.length === 0 ? (
+                <div className="text-sm text-zinc-400">{t("machine.detail.noEvents")}</div>
+              ) : (
+                detectedEvents.map((event) => {
+                  const bucket =
+                    event.eventType === "macrostop"
+                      ? "macrostop"
+                      : event.eventType === "microstop"
+                      ? "microstop"
+                      : event.eventType === "slow-cycle"
+                      ? "slow"
+                      : "unknown";
+                  const meta = BUCKET[bucket as keyof typeof BUCKET] ?? BUCKET.unknown;
 
                   return (
                     <div
-                      key={row.t ?? row.ts ?? idx}
+                      key={event.id}
                       className="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 p-3"
                     >
                       <div className="flex min-w-0 items-center gap-3">
@@ -1066,20 +1107,20 @@ export default function MachineDetailClient() {
                         <div className="min-w-0">
                           <div className="flex items-center gap-2">
                             <span className={`rounded-full border px-2 py-0.5 text-xs ${meta.chip}`}>
-                              {t(meta.labelKey)}
-                            </span>
-                            <span className="truncate text-sm text-white">
-                              {row.actual?.toFixed(2)}s
-                              {row.ideal != null ? ` (${t("machine.detail.modal.standardCycle")} ${row.ideal.toFixed(2)}s)` : ""}
+                              {formatEventType(event.eventType)}
                             </span>
+                            <span className="truncate text-sm text-white">{event.title}</span>
                           </div>
+                          {event.description ? (
+                            <div className="mt-1 text-xs text-zinc-300">{event.description}</div>
+                          ) : null}
                         </div>
                       </div>
-
-                      <div className="shrink-0 text-xs text-zinc-400">{timeAgo(row.ts)}</div>
+                      <div className="shrink-0 text-xs text-zinc-400">{timeAgo(event.ts)}</div>
                     </div>
                   );
-                })}
+                })
+              )}
             </div>
           </Modal>
 

app/(app)/machines/page.tsx

@@ -11,6 +11,7 @@ type MachineRow = {
   location?: string | null;
   latestHeartbeat: null | {
     ts: string;
+    tsServer?: string | null;
     status: string;
     message?: string | null;
     ip?: string | null;
@@ -267,10 +268,11 @@ export default function MachinesPage() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
         {(!loading ? machines : []).map((m) => {
           const hb = m.latestHeartbeat;
-          const offline = isOffline(hb?.ts);
+          const hbTs = hb?.tsServer ?? hb?.ts;
+          const offline = isOffline(hbTs);
           const normalizedStatus = normalizeStatus(hb?.status);
           const statusLabel = offline ? t("machines.status.offline") : (normalizedStatus || t("machines.status.unknown"));
-          const lastSeen = secondsAgo(hb?.ts, locale, t("common.never"));
+          const lastSeen = secondsAgo(hbTs, locale, t("common.never"));
 
           return (
             <Link
@@ -320,5 +322,3 @@ export default function MachinesPage() {
     </div>
   );
 }
-
-

app/(app)/overview/page.tsx

@@ -6,6 +6,7 @@ import { useI18n } from "@/lib/i18n/useI18n";
 
 type Heartbeat = {
   ts: string;
+  tsServer?: string | null;
   status: string;
   message?: string | null;
   ip?: string | null;
@@ -35,11 +36,6 @@ type MachineRow = {
   latestKpi?: Kpi | null;
 };
 
-type Thresholds = {
-  stoppageMultiplier: number;
-  macroStoppageMultiplier: number;
-};
-
 type EventRow = {
   id: string;
   ts: string;
@@ -51,31 +47,11 @@ type EventRow = {
   requiresAck: boolean;
   machineId?: string;
   machineName?: string;
-  source: "ingested" | "derived";
-};
-
-type CycleRow = {
-  ts: string;
-  t: number;
-  cycleCount: number | null;
-  actual: number;
-  ideal: number | null;
+  source: "ingested";
 };
 
 const OFFLINE_MS = 30000;
-const EVENT_WINDOW_SEC = 1800;
 const MAX_EVENT_MACHINES = 6;
-const DEFAULT_MICRO_MULT = 1.5;
-const DEFAULT_MACRO_MULT = 5;
-
-function resolveMultipliers(thresholds?: Thresholds | null) {
-  const micro = Number(thresholds?.stoppageMultiplier ?? DEFAULT_MICRO_MULT);
-  const macro = Math.max(
-    micro,
-    Number(thresholds?.macroStoppageMultiplier ?? DEFAULT_MACRO_MULT)
-  );
-  return { micro, macro };
-}
 
 function secondsAgo(ts: string | undefined, locale: string, fallback: string) {
   if (!ts) return fallback;
@@ -97,6 +73,10 @@ function normalizeStatus(status?: string) {
   return s;
 }
 
+function heartbeatTime(hb?: Heartbeat | null) {
+  return hb?.tsServer ?? hb?.ts;
+}
+
 function fmtPct(v?: number | null) {
   if (v === null || v === undefined || Number.isNaN(v)) return "--";
   return `${v.toFixed(1)}%`;
@@ -115,41 +95,8 @@ function severityClass(sev?: string) {
   return "bg-white/10 text-zinc-200";
 }
 
-function sourceClass(src: EventRow["source"]) {
-  return src === "ingested"
-    ? "bg-white/10 text-zinc-200"
-    : "bg-emerald-500/15 text-emerald-300";
-}
-
-function classifyDerivedEvent(c: CycleRow, thresholds?: Thresholds | null) {
-  if (c.ideal == null || c.ideal <= 0 || c.actual <= 0) return null;
-  if (c.actual <= c.ideal) return null;
-  const { micro, macro } = resolveMultipliers(thresholds);
-  const extra = c.actual - c.ideal;
-  let eventType = "slow-cycle";
-  let severity = "warning";
-  if (c.actual < c.ideal * micro) {
-    eventType = "slow-cycle";
-    severity = "warning";
-  } else if (c.actual < c.ideal * macro) {
-    eventType = "microstop";
-    severity = "warning";
-  } else {
-    eventType = "macrostop";
-    severity = "critical";
-  }
-
-  return {
-    eventType,
-    severity,
-    title:
-      eventType === "macrostop"
-        ? "Macrostop Detected"
-        : eventType === "microstop"
-        ? "Microstop Detected"
-        : "Slow Cycle Detected",
-    description: `Cycle ${c.actual.toFixed(2)}s (ideal ${c.ideal.toFixed(2)}s)`,
-  };
+function sourceClass(_src: EventRow["source"]) {
+  return "bg-white/10 text-zinc-200";
 }
 
 export default function OverviewPage() {
@@ -196,9 +143,11 @@ export default function OverviewPage() {
       setEventsLoading(true);
 
       const sorted = [...machines].sort((a, b) => {
-        const at = a.latestHeartbeat?.ts ? new Date(a.latestHeartbeat.ts).getTime() : 0;
-        const bt = b.latestHeartbeat?.ts ? new Date(b.latestHeartbeat.ts).getTime() : 0;
-        return bt - at;
+        const at = heartbeatTime(a.latestHeartbeat);
+        const bt = heartbeatTime(b.latestHeartbeat);
+        const atMs = at ? new Date(at).getTime() : 0;
+        const btMs = bt ? new Date(bt).getTime() : 0;
+        return btMs - atMs;
       });
 
       const targets = sorted.slice(0, MAX_EVENT_MACHINES);
@@ -206,7 +155,7 @@ export default function OverviewPage() {
       try {
         const results = await Promise.all(
           targets.map(async (m) => {
-            const res = await fetch(`/api/machines/${m.id}?windowSec=${EVENT_WINDOW_SEC}`, {
+            const res = await fetch(`/api/machines/${m.id}?events=critical&eventsOnly=1`, {
               cache: "no-store",
               signal: controller.signal,
             });
@@ -230,24 +179,6 @@ export default function OverviewPage() {
             });
           }
 
-          const cycles: CycleRow[] = Array.isArray(payload?.cycles) ? payload.cycles : [];
-          for (const c of cycles.slice(-120)) {
-            const derived = classifyDerivedEvent(c, payload?.thresholds);
-            if (!derived) continue;
-            combined.push({
-              id: `derived-${machine.id}-${c.t}`,
-              ts: c.ts,
-              topic: derived.eventType,
-              eventType: derived.eventType,
-              severity: derived.severity,
-              title: derived.title,
-              description: derived.description,
-              requiresAck: false,
-              machineId: machine.id,
-              machineName: machine.name,
-              source: "derived",
-            });
-          }
         }
 
         const seen = new Set<string>();
@@ -295,7 +226,7 @@ export default function OverviewPage() {
 
     for (const m of machines) {
       const hb = m.latestHeartbeat;
-      const offline = isOffline(hb?.ts);
+      const offline = isOffline(heartbeatTime(hb));
       if (!offline) online += 1;
 
       const status = normalizeStatus(hb?.status);
@@ -348,7 +279,7 @@ export default function OverviewPage() {
     const list = machines
       .map((m) => {
         const hb = m.latestHeartbeat;
-        const offline = isOffline(hb?.ts);
+        const offline = isOffline(heartbeatTime(hb));
         const k = m.latestKpi;
         const oee = k?.oee ?? null;
         let score = 0;
@@ -512,7 +443,7 @@ export default function OverviewPage() {
                       </div>
                     </div>
                     <div className="text-xs text-zinc-400">
-                      {secondsAgo(machine.latestHeartbeat?.ts, locale, t("common.never"))}
+                      {secondsAgo(heartbeatTime(machine.latestHeartbeat), locale, t("common.never"))}
                     </div>
                   </div>
                   <div className="mt-2 flex items-center gap-2 text-xs">