Merge pull request 'fixed sync' (#1) from cl3.6a-domains-ui into master

Reviewed-on: http://gitea.lan:3000/robbond/pleskSaas/pulls/1

app/dashboard/page.tsx

@@ -3,8 +3,12 @@ import { DashboardControls } from "@/components/dashboard/dashboard-controls";
 import { getServerAgencyContextOrRedirect } from "@/lib/agency";
 import type { Database } from "@/lib/types";
 import { createSupabaseServerClient } from "@/lib/supabase/server";
+import type { PostgrestError } from "@supabase/supabase-js";
 
-type AgencySummary = Pick<Database["public"]["Tables"]["agencies"]["Row"], "id" | "name">;
+type AgencySummary = Pick<
+  Database["public"]["Tables"]["agencies"]["Row"],
+  "id" | "name"
+>;
 type BillingSummary = Pick<
   Database["public"]["Tables"]["billing_accounts"]["Row"],
   "subscription_status" | "plan_id" | "current_period_end"
@@ -20,96 +24,94 @@ export default async function DashboardPage() {
 
   const [
     { data: agency },
-    { data: instances },
+    { data: instances, error: instancesError },
     { data: subscriptions },
     { data: domains },
     { data: billing },
     { data: autoSyncLogs },
-  ] =
+  ] = (await Promise.all([
-    (await Promise.all([
+    supabase
-      supabase.from("agencies").select("id, name").eq("id", context.agencyId).maybeSingle(),
+      .from("agencies")
-      supabase
+      .select("id, name")
-        .from("plesk_instances")
+      .eq("id", context.agencyId)
-        .select(
+      .maybeSingle(),
-          "id, name, base_url, auth_type, status, error_message, last_connected_at, last_sync_at, last_sync_status, last_sync_error, last_sync_subscriptions, last_sync_domains",
+    supabase
-        )
+      .from("plesk_instances")
-        .eq("agency_id", context.agencyId)
+      .select(
-        .order("created_at", { ascending: false }),
+        "id, name, base_url, auth_type, status, error_message, last_connected_at, last_sync_at, last_sync_status, last_sync_error, last_sync_subscriptions, last_sync_domains",
-      supabase
+      )
-        .from("plesk_subscriptions")
+      .eq("agency_id", context.agencyId)
-        .select("id, name, status, plesk_subscription_id, plesk_instance_id")
+      .order("created_at", { ascending: false }),
-        .eq("agency_id", context.agencyId)
+    supabase
-        .order("updated_at", { ascending: false })
+      .from("plesk_subscriptions")
-        .limit(10),
+      .select("id, name, status, plesk_subscription_id, plesk_instance_id")
-      supabase
+      .eq("agency_id", context.agencyId)
-        .from("plesk_domains")
+      .order("updated_at", { ascending: false })
-        .select(
+      .limit(10),
-          "id, plesk_instance_id, domain_name, status, hosting_type, source_created_at, aliases_count, updated_at",
+    supabase
-        )
+      .from("plesk_domains")
-        .eq("agency_id", context.agencyId)
+      .select(
-        .order("updated_at", { ascending: false })
+        "id, plesk_instance_id, domain_name, status, hosting_type, source_created_at, aliases_count, updated_at",
-        .limit(500),
+      )
-      supabase
+      .eq("agency_id", context.agencyId)
-        .from("billing_accounts")
+      .order("updated_at", { ascending: false })
-        .select("subscription_status, plan_id, current_period_end")
+      .limit(500),
-        .eq("agency_id", context.agencyId)
+    supabase
-        .maybeSingle(),
+      .from("billing_accounts")
-      supabase
+      .select("subscription_status, plan_id, current_period_end")
-        .from("actions_log")
+      .eq("agency_id", context.agencyId)
-        .select("target_id, status, action, created_at, error_message")
+      .maybeSingle(),
-        .eq("agency_id", context.agencyId)
+    supabase
-        .eq("target_type", "plesk_instance")
+      .from("actions_log")
-        .eq("action", "plesk_sync_auto")
+      .select("target_id, status, action, created_at, error_message")
-        .order("created_at", { ascending: false })
+      .eq("agency_id", context.agencyId)
-        .limit(200),
+      .eq("target_type", "plesk_instance")
-    ])) as [
+      .eq("action", "plesk_sync_auto")
-      { data: AgencySummary | null },
+      .order("created_at", { ascending: false })
-      {
+      .limit(200),
-        data:
+  ])) as [
-          | Array<{
+    { data: AgencySummary | null },
-              id: string;
+    {
-              name: string;
+      data: Array<{
-              base_url: string;
+        id: string;
-              auth_type: "api_key" | "basic";
+        name: string;
-              status: string;
+        base_url: string;
-              error_message: string | null;
+        auth_type: "api_key" | "basic";
-              last_connected_at: string | null;
+        status: string;
-              last_sync_at: string | null;
+        error_message: string | null;
-              last_sync_status: string | null;
+        last_connected_at: string | null;
-              last_sync_error: string | null;
+        last_sync_at: string | null;
-              last_sync_subscriptions: number;
+        last_sync_status: string | null;
-              last_sync_domains: number;
+        last_sync_error: string | null;
-            }>
+        last_sync_subscriptions: number;
-          | null;
+        last_sync_domains: number;
-      },
+      }> | null;
-      {
+      error: { message: string } | null;
-        data:
+    },
-          | Array<{
+    {
-              id: string;
+      data: Array<{
-              name: string | null;
+        id: string;
-              status: string | null;
+        name: string | null;
-              plesk_subscription_id: string;
+        status: string | null;
-              plesk_instance_id: string;
+        plesk_subscription_id: string;
-            }>
+        plesk_instance_id: string;
-          | null;
+      }> | null;
-      },
+    },
-      {
+    {
-        data:
+      data: Array<{
-          | Array<{
+        id: string;
-              id: string;
+        plesk_instance_id: string;
-              plesk_instance_id: string;
+        domain_name: string;
-              domain_name: string;
+        status: string | null;
-              status: string | null;
+        hosting_type: string | null;
-              hosting_type: string | null;
+        source_created_at: string | null;
-              source_created_at: string | null;
+        aliases_count: number | null;
-              aliases_count: number | null;
+        updated_at: string;
-              updated_at: string;
+      }> | null;
-            }>
+    },
-          | null;
+    { data: BillingSummary | null },
-      },
+    { data: ActionLogSummary[] | null },
-      { data: BillingSummary | null },
+  ];
-      { data: ActionLogSummary[] | null },
-    ];
 
   const autoSyncByInstance = new Map<
     string,
@@ -129,7 +131,9 @@ export default async function DashboardPage() {
     <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-8">
       <header className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900">{agency?.name ?? "Agency"} Dashboard</h1>
+          <h1 className="text-2xl font-bold text-slate-900">
+            {agency?.name ?? "Agency"} Dashboard
+          </h1>
           <p className="text-sm text-slate-600">Role: {context.role}</p>
         </div>
         <SignOutButton />
@@ -138,26 +142,34 @@ export default async function DashboardPage() {
       <section className="grid gap-4 md:grid-cols-3">
         <div className="rounded-xl border border-slate-200 bg-white p-4">
           <p className="text-sm text-slate-500">Plesk Instances</p>
-          <p className="text-2xl font-semibold text-slate-900">{instances?.length ?? 0}</p>
+          <p className="text-2xl font-semibold text-slate-900">
+            {instances?.length ?? 0}
+          </p>
         </div>
         <div className="rounded-xl border border-slate-200 bg-white p-4">
           <p className="text-sm text-slate-500">Tracked Subscriptions</p>
-          <p className="text-2xl font-semibold text-slate-900">{subscriptions?.length ?? 0}</p>
+          <p className="text-2xl font-semibold text-slate-900">
+            {subscriptions?.length ?? 0}
+          </p>
         </div>
         <div className="rounded-xl border border-slate-200 bg-white p-4">
           <p className="text-sm text-slate-500">Billing Status</p>
-          <p className="text-2xl font-semibold text-slate-900">{billing?.subscription_status ?? "none"}</p>
+          <p className="text-2xl font-semibold text-slate-900">
+            {billing?.subscription_status ?? "none"}
+          </p>
         </div>
       </section>
-
+      {instancesError ? (
+        <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+          Instances query failed: {instancesError.message}
+        </div>
+      ) : null}
       <DashboardControls
         instances={instances ?? []}
         subscriptions={subscriptions ?? []}
         domains={domains ?? []}
         autoSyncByInstance={Object.fromEntries(autoSyncByInstance.entries())}
       />
-
-      
     </main>
   );
 }

components/dashboard/dashboard-controls.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import type { ChangeEvent } from "react";
 import type { FormEvent } from "react";
+import { formatDateTime } from "@/lib/dates";
 
 type Instance = {
   id: string;
@@ -61,7 +62,9 @@ export function DashboardControls({
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [actionSubId, setActionSubId] = useState(subscriptions[0]?.id ?? "");
-  const [actionType, setActionType] = useState<"suspend" | "unsuspend">("suspend");
+  const [actionType, setActionType] = useState<"suspend" | "unsuspend">(
+    "suspend",
+  );
   const [domainSearch, setDomainSearch] = useState("");
   const [domainStatus, setDomainStatus] = useState("all");
   const [message, setMessage] = useState<string | null>(null);
@@ -78,12 +81,15 @@ export function DashboardControls({
   );
 
   const domainStatusOptions = Array.from(
-    new Set(domains.map((domain) => (domain.status ?? "unknown").toLowerCase())),
+    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 statusMatches =
+      domainStatus === "all" || normalizedStatus === domainStatus;
     const term = domainSearch.trim().toLowerCase();
     const searchMatches =
       !term ||
@@ -92,12 +98,6 @@ export function DashboardControls({
     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",
@@ -128,7 +128,9 @@ export function DashboardControls({
       setMessage("Plesk instance connected.");
       window.location.reload();
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : "Could not connect instance");
+      setMessage(
+        error instanceof Error ? error.message : "Could not connect instance",
+      );
     } finally {
       setLoading(false);
     }
@@ -138,11 +140,16 @@ export function DashboardControls({
     setLoading(true);
     setMessage(null);
     try {
-      const payload = await runRequest(`/api/plesk/instances/${instanceId}/sync`);
+      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) {
+      } else if (
+        payload?.domainsUpserted != null ||
+        payload?.subscriptionsUpserted != null
+      ) {
         setMessage(
           `Plesk sync completed. Subscriptions: ${payload.subscriptionsUpserted ?? 0}, Domains: ${payload.domainsUpserted ?? 0}`,
         );
@@ -163,7 +170,9 @@ export function DashboardControls({
       setMessage("Connection test completed.");
       window.location.reload();
     } catch (error) {
-      setMessage(error instanceof Error ? error.message : "Connection test failed");
+      setMessage(
+        error instanceof Error ? error.message : "Connection test failed",
+      );
     } finally {
       setLoading(false);
     }
@@ -174,7 +183,9 @@ export function DashboardControls({
     setLoading(true);
     setMessage(null);
     try {
-      await runRequest(`/api/plesk/subscriptions/${actionSubId}/action`, { action: actionType });
+      await runRequest(`/api/plesk/subscriptions/${actionSubId}/action`, {
+        action: actionType,
+      });
       setMessage(`Subscription ${actionType} completed.`);
       window.location.reload();
     } catch (error) {
@@ -209,264 +220,331 @@ export function DashboardControls({
       <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>
+          <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>
+          <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>
+          <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">
+        <form
-        <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
+          onSubmit={onCreateInstance}
-        <input
+          className="space-y-3 rounded-xl border border-slate-200 bg-white p-4"
-          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>
+          <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
-          <option value="basic">Basic</option>
-        </select>
-        {authType === "api_key" ? (
           <input
             required
-            value={apiKey}
+            value={instanceName}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setApiKey(e.target.value)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setInstanceName(e.target.value)
+            }
             className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
-            placeholder="Plesk API key"
+            placeholder="Instance name"
           />
-        ) : (
+          <input
-          <div className="grid gap-2 sm:grid-cols-2">
+            required
-            <input
+            value={baseUrl}
-              required
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              value={username}
+              setBaseUrl(e.target.value)
-              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"
-          >
+            placeholder="https://plesk.example.com"
-            {subscriptions.map((subscription) => (
+          />
-              <option key={subscription.id} value={subscription.id}>
-                {subscription.name ?? subscription.plesk_subscription_id}
-              </option>
-            ))}
-          </select>
           <select
-            value={actionType}
+            value={authType}
             onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-              setActionType(e.target.value as "suspend" | "unsuspend")
+              setAuthType(e.target.value as "api_key" | "basic")
             }
             className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
           >
-            <option value="suspend">Suspend</option>
+            <option value="api_key">API Key</option>
-            <option value="unsuspend">Unsuspend</option>
+            <option value="basic">Basic</option>
           </select>
-          <button
+          {authType === "api_key" ? (
-            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}
+              required
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setDomainSearch(e.target.value)}
+              value={apiKey}
-              className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              placeholder="Search by domain or hosting type"
+                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: {formatDateTime(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
+                          ? formatDateTime(instance.last_connected_at)
+                          : "never"}
+                      </p>
+                      {autoSyncByInstance[instance.id] ? (
+                        <p className="text-xs text-slate-500">
+                          Last auto-sync:{" "}
+                          {formatDateTime(
+                            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="min-w-[180px]">
+
-            <label className="text-sm font-medium">Status filter</label>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Subscription Action</label>
             <select
-              value={domainStatus}
+              value={actionSubId}
-              onChange={(e: ChangeEvent<HTMLSelectElement>) => setDomainStatus(e.target.value)}
+              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-              className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
+                setActionSubId(e.target.value)
+              }
+              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
             >
-              <option value="all">All statuses</option>
+              {subscriptions.map((subscription) => (
-              {domainStatusOptions.map((status) => (
+                <option key={subscription.id} value={subscription.id}>
-                <option key={status} value={status}>
+                  {subscription.name ?? subscription.plesk_subscription_id}
-                  {status}
                 </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="overflow-x-auto">
+        <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
-          <table className="min-w-full text-left text-sm">
+          <div className="flex flex-wrap items-end gap-2">
-            <thead>
+            <div className="flex-1 min-w-[220px]">
-              <tr className="border-b border-slate-200 text-xs uppercase text-slate-500">
+              <label className="text-sm font-medium">Search domains</label>
-                <th className="px-2 py-2">Domain</th>
+              <input
-                <th className="px-2 py-2">Status</th>
+                value={domainSearch}
-                <th className="px-2 py-2">Hosting</th>
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                <th className="px-2 py-2">Created</th>
+                  setDomainSearch(e.target.value)
-                <th className="px-2 py-2">Aliases</th>
+                }
-                <th className="px-2 py-2">Last seen</th>
+                className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
-              </tr>
+                placeholder="Search by domain or hosting type"
-            </thead>
+              />
-            <tbody>
+            </div>
-              {filteredDomains.length === 0 ? (
+            <div className="min-w-[180px]">
-                <tr>
+              <label className="text-sm font-medium">Status filter</label>
-                  <td className="px-2 py-3 text-slate-500" colSpan={6}>
+              <select
-                    No domains found.
+                value={domainStatus}
-                  </td>
+                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>
-                filteredDomains.map((domain) => (
+              <tbody>
-                  <tr key={domain.id} className="border-b border-slate-100">
+                {filteredDomains.length === 0 ? (
-                    <td className="px-2 py-2 font-medium text-slate-900">{domain.domain_name}</td>
+                  <tr>
-                    <td className="px-2 py-2">{domain.status ?? "unknown"}</td>
+                    <td className="px-2 py-3 text-slate-500" colSpan={6}>
-                    <td className="px-2 py-2">{domain.hosting_type ?? "unknown"}</td>
+                      No domains found.
-                    <td className="px-2 py-2">{formatDate(domain.source_created_at)}</td>
+                    </td>
-                    <td className="px-2 py-2">{domain.aliases_count ?? 0}</td>
-                    <td className="px-2 py-2">{formatDate(domain.updated_at)}</td>
                   </tr>
-                ))
+                ) : (
-              )}
+                  filteredDomains.map((domain) => (
-            </tbody>
+                    <tr key={domain.id} className="border-b border-slate-100">
-          </table>
+                      <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">
+                        {formatDateTime(domain.source_created_at)}
+                      </td>
+                      <td className="px-2 py-2">{domain.aliases_count ?? 0}</td>
+                      <td className="px-2 py-2">
+                        {formatDateTime(domain.updated_at)}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-      </div>
     </section>
   );
 }

lib/dates.ts

@@ -0,0 +1,37 @@
+const DASH = "—";
+
+const DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+  timeZone: "UTC",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: false,
+});
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+  timeZone: "UTC",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+});
+
+function toValidDate(value?: string | Date | null): Date | null {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function formatDateTime(value?: string | Date | null): string {
+  const date = toValidDate(value);
+  if (!date) return DASH;
+  return `${DATE_TIME_FORMATTER.format(date)} UTC`;
+}
+
+export function formatDate(value?: string | Date | null): string {
+  const date = toValidDate(value);
+  if (!date) return DASH;
+  return DATE_FORMATTER.format(date);
+}