fixed sync

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">
-        <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"
+        <form
+          onSubmit={onCreateInstance}
+          className="space-y-3 rounded-xl border border-slate-200 bg-white p-4"
         >
-          <option value="api_key">API Key</option>
-          <option value="basic">Basic</option>
-        </select>
-        {authType === "api_key" ? (
+          <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
           <input
             required
-            value={apiKey}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setApiKey(e.target.value)}
+            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="Plesk API key"
+            placeholder="Instance name"
           />
-        ) : (
-          <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)}
+          <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"
-          >
-            {subscriptions.map((subscription) => (
-              <option key={subscription.id} value={subscription.id}>
-                {subscription.name ?? subscription.plesk_subscription_id}
-              </option>
-            ))}
-          </select>
+            placeholder="https://plesk.example.com"
+          />
           <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="unsuspend">Unsuspend</option>
+            <option value="api_key">API Key</option>
+            <option value="basic">Basic</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>
+          {authType === "api_key" ? (
             <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"
+              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: {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}
-              onChange={(e: ChangeEvent<HTMLSelectElement>) => setDomainStatus(e.target.value)}
-              className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
+              value={actionSubId}
+              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                setActionSubId(e.target.value)
+              }
+              className="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}
+              {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="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>
+        <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>
-              ) : (
-                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>
+              </thead>
+              <tbody>
+                {filteredDomains.length === 0 ? (
+                  <tr>
+                    <td className="px-2 py-3 text-slate-500" colSpan={6}>
+                      No domains found.
+                    </td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
+                ) : (
+                  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">
+                        {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>
   );
 }