Initial working state: CL3.5 complete (Plesk sync + suspend/unsuspend)

components/auth/login-form.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+
+import { createSupabaseBrowserClient } from "@/lib/supabase/browser";
+
+export function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      const supabase = createSupabaseBrowserClient();
+      const { error } = await supabase.auth.signInWithOtp({
+        email,
+        options: {
+          emailRedirectTo: `${window.location.origin}/auth/callback`,
+        },
+      });
+
+      if (error) {
+        setMessage(error.message);
+      } else {
+        setMessage("Check your email for the sign-in link.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div>
+        <label htmlFor="email" className="mb-1 block text-sm font-medium text-slate-700">
+          Work email
+        </label>
+        <input
+          id="email"
+          type="email"
+          required
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-500"
+          placeholder="you@agency.com"
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-70"
+      >
+        {loading ? "Sending..." : "Send magic link"}
+      </button>
+
+      {message ? <p className="text-sm text-slate-600">{message}</p> : null}
+    </form>
+  );
+}

components/auth/sign-out-button.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { createSupabaseBrowserClient } from "@/lib/supabase/browser";
+
+export function SignOutButton() {
+  const router = useRouter();
+
+  async function onSignOut() {
+    const supabase = createSupabaseBrowserClient();
+    await supabase.auth.signOut();
+    router.push("/login");
+    router.refresh();
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onSignOut}
+      className="rounded-lg border border-slate-300 px-3 py-1.5 text-sm text-slate-700"
+    >
+      Sign out
+    </button>
+  );
+}

components/dashboard/dashboard-controls.tsx

@@ -0,0 +1,472 @@
+"use client";
+
+import { useState } from "react";
+import type { ChangeEvent } from "react";
+import type { FormEvent } from "react";
+
+type Instance = {
+  id: string;
+  name: string;
+  base_url: string;
+  auth_type: "api_key" | "basic";
+  status: string;
+  error_message: string | null;
+  last_connected_at: string | null;
+  last_sync_at: string | null;
+  last_sync_status: string | null;
+  last_sync_error: string | null;
+  last_sync_subscriptions: number;
+  last_sync_domains: number;
+};
+
+type Subscription = {
+  id: string;
+  name: string | null;
+  status: string | null;
+  plesk_subscription_id: string;
+  plesk_instance_id: string;
+};
+
+type Domain = {
+  id: string;
+  plesk_instance_id: string;
+  domain_name: string;
+  status: string | null;
+  hosting_type: string | null;
+  source_created_at: string | null;
+  aliases_count: number | null;
+  updated_at: string;
+};
+
+type Props = {
+  instances: Instance[];
+  subscriptions: Subscription[];
+  domains: Domain[];
+  autoSyncByInstance: Record<
+    string,
+    { status: string; created_at: string; error_message: string | null }
+  >;
+};
+
+export function DashboardControls({
+  instances,
+  subscriptions,
+  domains,
+  autoSyncByInstance,
+}: Props) {
+  const [instanceName, setInstanceName] = useState("");
+  const [baseUrl, setBaseUrl] = useState("");
+  const [authType, setAuthType] = useState<"api_key" | "basic">("api_key");
+  const [apiKey, setApiKey] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [actionSubId, setActionSubId] = useState(subscriptions[0]?.id ?? "");
+  const [actionType, setActionType] = useState<"suspend" | "unsuspend">("suspend");
+  const [domainSearch, setDomainSearch] = useState("");
+  const [domainStatus, setDomainStatus] = useState("all");
+  const [message, setMessage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const healthCounts = instances.reduce(
+    (acc, instance) => {
+      if (instance.status === "connected") acc.connected += 1;
+      else if (instance.status === "syncing") acc.syncing += 1;
+      else acc.error += 1;
+      return acc;
+    },
+    { connected: 0, syncing: 0, error: 0 },
+  );
+
+  const domainStatusOptions = Array.from(
+    new Set(domains.map((domain) => (domain.status ?? "unknown").toLowerCase())),
+  ).sort();
+
+  const filteredDomains = domains.filter((domain) => {
+    const normalizedStatus = (domain.status ?? "unknown").toLowerCase();
+    const statusMatches = domainStatus === "all" || normalizedStatus === domainStatus;
+    const term = domainSearch.trim().toLowerCase();
+    const searchMatches =
+      !term ||
+      domain.domain_name.toLowerCase().includes(term) ||
+      (domain.hosting_type ?? "").toLowerCase().includes(term);
+    return statusMatches && searchMatches;
+  });
+
+  function formatDate(value: string | null) {
+    if (!value) return "—";
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? "—" : date.toLocaleString();
+  }
+
+  async function runRequest(url: string, body?: unknown) {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error(payload.error ?? "Request failed");
+    }
+    return payload;
+  }
+
+  async function onCreateInstance(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    try {
+      await runRequest("/api/plesk/instances", {
+        name: instanceName,
+        base_url: baseUrl,
+        auth_type: authType,
+        api_key: authType === "api_key" ? apiKey : undefined,
+        username: authType === "basic" ? username : undefined,
+        password: authType === "basic" ? password : undefined,
+      });
+      setMessage("Plesk instance connected.");
+      window.location.reload();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Could not connect instance");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onSync(instanceId: string) {
+    setLoading(true);
+    setMessage(null);
+    try {
+      const payload = await runRequest(`/api/plesk/instances/${instanceId}/sync`);
+      setMessage("Plesk sync completed.");
+      if (payload?.skipped) {
+        setMessage(`Sync skipped (${payload.reason ?? "no reason"}).`);
+      } else if (payload?.domainsUpserted != null || payload?.subscriptionsUpserted != null) {
+        setMessage(
+          `Plesk sync completed. Subscriptions: ${payload.subscriptionsUpserted ?? 0}, Domains: ${payload.domainsUpserted ?? 0}`,
+        );
+      }
+      window.location.reload();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Sync failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onTestConnection(instanceId: string) {
+    setLoading(true);
+    setMessage(null);
+    try {
+      await runRequest(`/api/plesk/instances/${instanceId}/test`);
+      setMessage("Connection test completed.");
+      window.location.reload();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Connection test failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onSubscriptionAction() {
+    if (!actionSubId) return;
+    setLoading(true);
+    setMessage(null);
+    try {
+      await runRequest(`/api/plesk/subscriptions/${actionSubId}/action`, { action: actionType });
+      setMessage(`Subscription ${actionType} completed.`);
+      window.location.reload();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Action failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onCheckout() {
+    setLoading(true);
+    try {
+      const payload = await runRequest("/api/stripe/checkout");
+      if (payload.url) window.location.href = payload.url;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onPortal() {
+    setLoading(true);
+    try {
+      const payload = await runRequest("/api/stripe/portal");
+      if (payload.url) window.location.href = payload.url;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <section className="grid gap-4">
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
+          <p className="text-sm text-emerald-700">Connected</p>
+          <p className="text-2xl font-semibold text-emerald-900">{healthCounts.connected}</p>
+        </div>
+        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
+          <p className="text-sm text-amber-700">Syncing</p>
+          <p className="text-2xl font-semibold text-amber-900">{healthCounts.syncing}</p>
+        </div>
+        <div className="rounded-xl border border-rose-200 bg-rose-50 p-4">
+          <p className="text-sm text-rose-700">Error/Other</p>
+          <p className="text-2xl font-semibold text-rose-900">{healthCounts.error}</p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+      <form onSubmit={onCreateInstance} className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
+        <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
+        <input
+          required
+          value={instanceName}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setInstanceName(e.target.value)}
+          className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+          placeholder="Instance name"
+        />
+        <input
+          required
+          value={baseUrl}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setBaseUrl(e.target.value)}
+          className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+          placeholder="https://plesk.example.com"
+        />
+        <select
+          value={authType}
+          onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+            setAuthType(e.target.value as "api_key" | "basic")
+          }
+          className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+        >
+          <option value="api_key">API Key</option>
+          <option value="basic">Basic</option>
+        </select>
+        {authType === "api_key" ? (
+          <input
+            required
+            value={apiKey}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setApiKey(e.target.value)}
+            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+            placeholder="Plesk API key"
+          />
+        ) : (
+          <div className="grid gap-2 sm:grid-cols-2">
+            <input
+              required
+              value={username}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
+              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              placeholder="Plesk username"
+            />
+            <input
+              required
+              type="password"
+              value={password}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              placeholder="Plesk password"
+            />
+          </div>
+        )}
+        <button disabled={loading} className="rounded bg-brand-600 px-3 py-2 text-sm text-white">
+          Save & Validate
+        </button>
+      </form>
+
+      <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
+        <h2 className="text-lg font-semibold">Plesk Instances</h2>
+
+        <div className="space-y-2">
+          {instances.length === 0 ? (
+            <p className="text-sm text-slate-500">No Plesk instances connected yet.</p>
+          ) : (
+            instances.map((instance) => (
+              <div key={instance.id} className="rounded border border-slate-200 p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div>
+                    {autoSyncByInstance[instance.id] ? (
+                      <span
+                        className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${
+                          autoSyncByInstance[instance.id].status === "success"
+                            ? "bg-emerald-100 text-emerald-700"
+                            : "bg-rose-100 text-rose-700"
+                        }`}
+                      >
+                        Auto-sync {autoSyncByInstance[instance.id].status}
+                      </span>
+                    ) : null}
+                    <p className="text-sm font-semibold text-slate-900">{instance.name}</p>
+                    <p className="text-xs text-slate-500">{instance.base_url}</p>
+                    <p className="mt-1 text-xs text-slate-600">
+                      Status: <span className="font-medium">{instance.status}</span>
+                    </p>
+                    <p className="text-xs text-slate-500">
+                      Last sync: {formatDate(instance.last_sync_at)}
+                      {instance.last_sync_status ? ` (${instance.last_sync_status})` : ""}
+                    </p>
+                    <p className="text-xs text-slate-500">
+                      Last counts: {instance.last_sync_subscriptions ?? 0} subscriptions, {" "}
+                      {instance.last_sync_domains ?? 0} domains
+                    </p>
+                    <p className="text-xs text-slate-500">
+                      Last connected: {instance.last_connected_at ?? "never"}
+                    </p>
+                    {autoSyncByInstance[instance.id] ? (
+                      <p className="text-xs text-slate-500">
+                        Last auto-sync: {autoSyncByInstance[instance.id].created_at}
+                      </p>
+                    ) : null}
+                    {instance.error_message ? (
+                      <p className="mt-1 text-xs text-rose-600">{instance.error_message}</p>
+                    ) : null}
+                    {instance.last_sync_error ? (
+                      <p className="mt-1 text-xs text-rose-600">
+                        Last sync error: {instance.last_sync_error}
+                      </p>
+                    ) : null}
+                    {autoSyncByInstance[instance.id]?.error_message ? (
+                      <p className="mt-1 text-xs text-rose-600">
+                        Auto-sync error: {autoSyncByInstance[instance.id].error_message}
+                      </p>
+                    ) : null}
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <button
+                      onClick={() => onTestConnection(instance.id)}
+                      disabled={loading}
+                      className="rounded border px-3 py-1.5 text-xs"
+                    >
+                      Test Connection
+                    </button>
+                    <button
+                      onClick={() => onSync(instance.id)}
+                      disabled={loading}
+                      className="rounded border px-3 py-1.5 text-xs"
+                    >
+                      Sync Now
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Subscription Action</label>
+          <select
+            value={actionSubId}
+            onChange={(e: ChangeEvent<HTMLSelectElement>) => setActionSubId(e.target.value)}
+            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+          >
+            {subscriptions.map((subscription) => (
+              <option key={subscription.id} value={subscription.id}>
+                {subscription.name ?? subscription.plesk_subscription_id}
+              </option>
+            ))}
+          </select>
+          <select
+            value={actionType}
+            onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+              setActionType(e.target.value as "suspend" | "unsuspend")
+            }
+            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+          >
+            <option value="suspend">Suspend</option>
+            <option value="unsuspend">Unsuspend</option>
+          </select>
+          <button
+            onClick={onSubscriptionAction}
+            disabled={loading || !actionSubId}
+            className="rounded border px-3 py-2 text-sm"
+          >
+            Execute Action
+          </button>
+        </div>
+
+        <div className="flex gap-2 pt-2">
+          <button onClick={onCheckout} disabled={loading} className="rounded bg-brand-600 px-3 py-2 text-sm text-white">
+            Start Checkout
+          </button>
+          <button onClick={onPortal} disabled={loading} className="rounded border px-3 py-2 text-sm">
+            Billing Portal
+          </button>
+        </div>
+
+        {message ? <p className="text-sm text-slate-600">{message}</p> : null}
+      </div>
+
+      <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
+        <div className="flex flex-wrap items-end gap-2">
+          <div className="flex-1 min-w-[220px]">
+            <label className="text-sm font-medium">Search domains</label>
+            <input
+              value={domainSearch}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setDomainSearch(e.target.value)}
+              className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              placeholder="Search by domain or hosting type"
+            />
+          </div>
+          <div className="min-w-[180px]">
+            <label className="text-sm font-medium">Status filter</label>
+            <select
+              value={domainStatus}
+              onChange={(e: ChangeEvent<HTMLSelectElement>) => setDomainStatus(e.target.value)}
+              className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
+            >
+              <option value="all">All statuses</option>
+              {domainStatusOptions.map((status) => (
+                <option key={status} value={status}>
+                  {status}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-left text-sm">
+            <thead>
+              <tr className="border-b border-slate-200 text-xs uppercase text-slate-500">
+                <th className="px-2 py-2">Domain</th>
+                <th className="px-2 py-2">Status</th>
+                <th className="px-2 py-2">Hosting</th>
+                <th className="px-2 py-2">Created</th>
+                <th className="px-2 py-2">Aliases</th>
+                <th className="px-2 py-2">Last seen</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredDomains.length === 0 ? (
+                <tr>
+                  <td className="px-2 py-3 text-slate-500" colSpan={6}>
+                    No domains found.
+                  </td>
+                </tr>
+              ) : (
+                filteredDomains.map((domain) => (
+                  <tr key={domain.id} className="border-b border-slate-100">
+                    <td className="px-2 py-2 font-medium text-slate-900">{domain.domain_name}</td>
+                    <td className="px-2 py-2">{domain.status ?? "unknown"}</td>
+                    <td className="px-2 py-2">{domain.hosting_type ?? "unknown"}</td>
+                    <td className="px-2 py-2">{formatDate(domain.source_created_at)}</td>
+                    <td className="px-2 py-2">{domain.aliases_count ?? 0}</td>
+                    <td className="px-2 py-2">{formatDate(domain.updated_at)}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}