Enrollment + almost all auth

app/(app)/layout.tsx

@@ -20,7 +20,9 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     include: { user: true, org: true },
   });
 
-  if (!session) redirect("/login?next=/machines");
+  if (!session || !session.user?.isActive || !session.user?.emailVerifiedAt) {
+    redirect("/login?next=/machines");
+  }
 
   return (
     <div className="min-h-screen bg-black text-white">

app/(app)/machines/page.tsx

@@ -41,6 +41,19 @@ function badgeClass(status?: string, offline?: boolean) {
 export default function MachinesPage() {
   const [machines, setMachines] = useState<MachineRow[]>([]);
   const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createCode, setCreateCode] = useState("");
+  const [createLocation, setCreateLocation] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [createdMachine, setCreatedMachine] = useState<{
+    id: string;
+    name: string;
+    pairingCode: string;
+    pairingExpiresAt: string;
+  } | null>(null);
+  const [copyStatus, setCopyStatus] = useState<string | null>(null);
 
   useEffect(() => {
     let alive = true;
@@ -67,6 +80,68 @@ export default function MachinesPage() {
     };
   }, []);
 
+  async function createMachine() {
+    if (!createName.trim()) {
+      setCreateError("Machine name is required");
+      return;
+    }
+
+    setCreating(true);
+    setCreateError(null);
+
+    try {
+      const res = await fetch("/api/machines", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: createName,
+          code: createCode,
+          location: createLocation,
+        }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || "Failed to create machine");
+      }
+
+      const nextMachine = {
+        ...data.machine,
+        latestHeartbeat: null,
+      };
+      setMachines((prev) => [nextMachine, ...prev]);
+      setCreatedMachine({
+        id: data.machine.id,
+        name: data.machine.name,
+        pairingCode: data.machine.pairingCode,
+        pairingExpiresAt: data.machine.pairingCodeExpiresAt,
+      });
+      setCreateName("");
+      setCreateCode("");
+      setCreateLocation("");
+      setShowCreate(false);
+    } catch (err: any) {
+      setCreateError(err?.message || "Failed to create machine");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function copyText(text: string) {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        setCopyStatus("Copied");
+      } else {
+        setCopyStatus("Copy not supported");
+      }
+    } catch {
+      setCopyStatus("Copy failed");
+    }
+    setTimeout(() => setCopyStatus(null), 2000);
+  }
+
+  const showCreateCard = showCreate || (!loading && machines.length === 0);
+
   return (
     <div className="p-6">
       <div className="mb-6 flex items-center justify-between">
@@ -75,14 +150,107 @@ export default function MachinesPage() {
           <p className="text-sm text-zinc-400">Select a machine to view live KPIs.</p>
         </div>
 
-        <Link
-          href="/overview"
-          className="rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white hover:bg-white/10"
-        >
-          Back to Overview
-        </Link>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setShowCreate((prev) => !prev)}
+            className="rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2 text-sm text-emerald-100 hover:bg-emerald-500/30"
+          >
+            {showCreate ? "Cancel" : "Add Machine"}
+          </button>
+          <Link
+            href="/overview"
+            className="rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white hover:bg-white/10"
+          >
+            Back to Overview
+          </Link>
+        </div>
       </div>
 
+      {showCreateCard && (
+        <div className="mb-6 rounded-2xl border border-white/10 bg-white/5 p-5">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <div className="text-sm font-semibold text-white">Add a machine</div>
+              <div className="text-xs text-zinc-400">
+                Generate the machine ID and API key for your Node-RED edge.
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+            <label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
+              Machine Name
+              <input
+                value={createName}
+                onChange={(event) => setCreateName(event.target.value)}
+                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">
+              Code (optional)
+              <input
+                value={createCode}
+                onChange={(event) => setCreateCode(event.target.value)}
+                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">
+              Location (optional)
+              <input
+                value={createLocation}
+                onChange={(event) => setCreateLocation(event.target.value)}
+                className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+              />
+            </label>
+          </div>
+
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              onClick={createMachine}
+              disabled={creating}
+              className="rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2 text-sm text-emerald-100 hover:bg-emerald-500/30 disabled:opacity-60"
+            >
+              {creating ? "Creating..." : "Create Machine"}
+            </button>
+            {createError && <div className="text-xs text-red-200">{createError}</div>}
+          </div>
+        </div>
+      )}
+
+      {createdMachine && (
+      <div className="mb-6 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-5">
+          <div className="text-sm font-semibold text-white">Edge pairing code</div>
+          <div className="mt-2 text-xs text-zinc-300">
+            Machine: <span className="text-white">{createdMachine.name}</span>
+          </div>
+          <div className="mt-3 rounded-xl border border-white/10 bg-black/30 p-4">
+            <div className="text-xs uppercase tracking-wide text-zinc-400">Pairing code</div>
+            <div className="mt-2 text-3xl font-semibold text-white">{createdMachine.pairingCode}</div>
+            <div className="mt-2 text-xs text-zinc-400">
+              Expires{" "}
+              {createdMachine.pairingExpiresAt
+                ? new Date(createdMachine.pairingExpiresAt).toLocaleString()
+                : "soon"}
+            </div>
+          </div>
+          <div className="mt-3 text-xs text-zinc-300">
+            Enter this code on the Node-RED Control Tower settings screen to link the edge device.
+          </div>
+          <div className="mt-3 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              onClick={() => copyText(createdMachine.pairingCode)}
+              className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white hover:bg-white/10"
+            >
+              Copy Code
+            </button>
+            {copyStatus && <div className="text-xs text-zinc-300">{copyStatus}</div>}
+          </div>
+        </div>
+      )}
+
       {loading && <div className="mb-4 text-sm text-zinc-400">Loading machines…</div>}
 
       {!loading && machines.length === 0 && (

app/(app)/settings/page.tsx

@@ -38,6 +38,31 @@ type SettingsPayload = {
   updatedBy?: string;
 };
 
+type OrgInfo = {
+  id: string;
+  name: string;
+  slug: string;
+};
+
+type MemberRow = {
+  id: string;
+  membershipId: string;
+  name?: string | null;
+  email: string;
+  role: string;
+  isActive: boolean;
+  joinedAt: string;
+};
+
+type InviteRow = {
+  id: string;
+  email: string;
+  role: string;
+  token: string;
+  createdAt: string;
+  expiresAt: string;
+};
+
 const DEFAULT_SHIFT: Shift = {
   name: "Shift 1",
   start: "06:00",
@@ -187,6 +212,15 @@ export default function SettingsPage() {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<string | null>(null);
+  const [orgInfo, setOrgInfo] = useState<OrgInfo | null>(null);
+  const [members, setMembers] = useState<MemberRow[]>([]);
+  const [invites, setInvites] = useState<InviteRow[]>([]);
+  const [teamLoading, setTeamLoading] = useState(true);
+  const [teamError, setTeamError] = useState<string | null>(null);
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState("MEMBER");
+  const [inviteStatus, setInviteStatus] = useState<string | null>(null);
+  const [inviteSubmitting, setInviteSubmitting] = useState(false);
 
   const loadSettings = useCallback(async () => {
     setLoading(true);
@@ -208,9 +242,36 @@ export default function SettingsPage() {
     }
   }, []);
 
+  const buildInviteUrl = useCallback((token: string) => {
+    if (typeof window === "undefined") return `/invite/${token}`;
+    return `${window.location.origin}/invite/${token}`;
+  }, []);
+
+  const loadTeam = useCallback(async () => {
+    setTeamLoading(true);
+    setTeamError(null);
+    try {
+      const response = await fetch("/api/org/members", { cache: "no-store" });
+      const { data, text } = await readResponse(response);
+      if (!response.ok || !data?.ok) {
+        const message =
+          data?.error || data?.message || text || `Failed to load team (${response.status})`;
+        throw new Error(message);
+      }
+      setOrgInfo(data.org ?? null);
+      setMembers(Array.isArray(data.members) ? data.members : []);
+      setInvites(Array.isArray(data.invites) ? data.invites : []);
+    } catch (err) {
+      setTeamError(err instanceof Error ? err.message : "Failed to load team");
+    } finally {
+      setTeamLoading(false);
+    }
+  }, []);
+
   useEffect(() => {
     loadSettings();
-  }, [loadSettings]);
+    loadTeam();
+  }, [loadSettings, loadTeam]);
 
   const updateShift = useCallback((index: number, patch: Partial<Shift>) => {
     setDraft((prev) => {
@@ -336,6 +397,77 @@ export default function SettingsPage() {
     []
   );
 
+  const copyInviteLink = useCallback(
+    async (token: string) => {
+      const url = buildInviteUrl(token);
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(url);
+          setInviteStatus("Invite link copied");
+        } else {
+          setInviteStatus(url);
+        }
+      } catch {
+        setInviteStatus(url);
+      }
+    },
+    [buildInviteUrl]
+  );
+
+  const revokeInvite = useCallback(async (inviteId: string) => {
+    setInviteStatus(null);
+    try {
+      const response = await fetch(`/api/org/invites/${inviteId}`, { method: "DELETE" });
+      const { data, text } = await readResponse(response);
+      if (!response.ok || !data?.ok) {
+        const message =
+          data?.error || data?.message || text || `Failed to revoke invite (${response.status})`;
+        throw new Error(message);
+      }
+      setInvites((prev) => prev.filter((invite) => invite.id !== inviteId));
+    } catch (err) {
+      setInviteStatus(err instanceof Error ? err.message : "Failed to revoke invite");
+    }
+  }, []);
+
+  const createInvite = useCallback(async () => {
+    if (!inviteEmail.trim()) {
+      setInviteStatus("Email is required");
+      return;
+    }
+    setInviteSubmitting(true);
+    setInviteStatus(null);
+    try {
+      const response = await fetch("/api/org/members", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
+      });
+      const { data, text } = await readResponse(response);
+      if (!response.ok || !data?.ok) {
+        const message =
+          data?.error || data?.message || text || `Failed to create invite (${response.status})`;
+        throw new Error(message);
+      }
+      const nextInvite = data.invite;
+      if (nextInvite) {
+        setInvites((prev) => [nextInvite, ...prev.filter((invite) => invite.id !== nextInvite.id)]);
+        const inviteUrl = buildInviteUrl(nextInvite.token);
+        if (data.emailSent === false) {
+          setInviteStatus(`Invite created, email failed: ${inviteUrl}`);
+        } else {
+          setInviteStatus("Invite email sent");
+        }
+      }
+      setInviteEmail("");
+      await loadTeam();
+    } catch (err) {
+      setInviteStatus(err instanceof Error ? err.message : "Failed to create invite");
+    } finally {
+      setInviteSubmitting(false);
+    }
+  }, [buildInviteUrl, inviteEmail, inviteRole, loadTeam]);
+
   const saveSettings = useCallback(async () => {
     if (!draft) return;
     setSaving(true);
@@ -436,7 +568,10 @@ export default function SettingsPage() {
           <div className="mt-4 space-y-3">
             <div className="rounded-xl border border-white/10 bg-black/20 p-3">
               <div className="text-xs text-zinc-400">Plant Name</div>
-              <div className="mt-1 text-sm text-zinc-300">MIS Plant</div>
+              <div className="mt-1 text-sm text-zinc-300">{orgInfo?.name || "Loading..."}</div>
+              {orgInfo?.slug ? (
+                <div className="mt-1 text-[11px] text-zinc-500">Slug: {orgInfo.slug}</div>
+              ) : null}
             </div>
             <label className="block rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
               Time Zone
@@ -688,6 +823,136 @@ export default function SettingsPage() {
           </div>
         </div>
       </div>
+
+      <div className="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-2">
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
+          <div className="mb-3 flex items-center justify-between">
+            <div className="text-sm font-semibold text-white">Team Members</div>
+            <div className="text-xs text-zinc-400">{members.length} total</div>
+          </div>
+
+          {teamLoading && <div className="text-sm text-zinc-400">Loading team...</div>}
+          {teamError && (
+            <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
+              {teamError}
+            </div>
+          )}
+
+          {!teamLoading && !teamError && members.length === 0 && (
+            <div className="text-sm text-zinc-400">No team members yet.</div>
+          )}
+
+          {!teamLoading && !teamError && members.length > 0 && (
+            <div className="space-y-2">
+              {members.map((member) => (
+                <div
+                  key={member.membershipId}
+                  className="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-black/20 p-3"
+                >
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-white">
+                      {member.name || member.email}
+                    </div>
+                    <div className="truncate text-xs text-zinc-400">{member.email}</div>
+                  </div>
+                  <div className="flex flex-col items-end gap-1 text-xs text-zinc-400">
+                    <span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white">
+                      {member.role}
+                    </span>
+                    {!member.isActive ? (
+                      <span className="rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-red-200">
+                        Inactive
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
+          <div className="mb-3 text-sm font-semibold text-white">Invitations</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">
+              Invite Email
+              <input
+                value={inviteEmail}
+                onChange={(event) => setInviteEmail(event.target.value)}
+                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">
+              Role
+              <select
+                value={inviteRole}
+                onChange={(event) => setInviteRole(event.target.value)}
+                className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
+              >
+                <option value="MEMBER">Member</option>
+                <option value="ADMIN">Admin</option>
+                <option value="OWNER">Owner</option>
+              </select>
+            </label>
+          </div>
+
+          <div className="mt-3 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              onClick={createInvite}
+              disabled={inviteSubmitting}
+              className="rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2 text-sm text-emerald-100 hover:bg-emerald-500/30 disabled:opacity-60"
+            >
+              {inviteSubmitting ? "Creating..." : "Create Invite"}
+            </button>
+            <button
+              type="button"
+              onClick={loadTeam}
+              className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white hover:bg-white/10"
+            >
+              Refresh
+            </button>
+            {inviteStatus && <div className="text-xs text-zinc-400">{inviteStatus}</div>}
+          </div>
+
+          <div className="mt-4 space-y-3">
+            {invites.length === 0 && (
+              <div className="text-sm text-zinc-400">No pending invites.</div>
+            )}
+            {invites.map((invite) => (
+              <div key={invite.id} className="rounded-xl border border-white/10 bg-black/20 p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-white">{invite.email}</div>
+                    <div className="text-xs text-zinc-400">
+                      {invite.role} - Expires {new Date(invite.expiresAt).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => copyInviteLink(invite.token)}
+                      className="rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-white hover:bg-white/10"
+                    >
+                      Copy Link
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => revokeInvite(invite.id)}
+                      className="rounded-lg border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-200 hover:bg-red-500/20"
+                    >
+                      Revoke
+                    </button>
+                  </div>
+                </div>
+                <div className="mt-2 rounded-lg border border-white/10 bg-black/30 px-2 py-1 text-xs text-zinc-400">
+                  {buildInviteUrl(invite.token)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }