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,14 +24,17 @@ 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")
+      .select("id, name")
+      .eq("id", context.agencyId)
+      .maybeSingle(),
     supabase
       .from("plesk_instances")
       .select(
@@ -65,8 +72,7 @@ export default async function DashboardPage() {
   ])) as [
     { data: AgencySummary | null },
     {
-        data:
+      data: Array<{
-          | Array<{
         id: string;
         name: string;
         base_url: string;
@@ -79,23 +85,20 @@ export default async function DashboardPage() {
         last_sync_error: string | null;
         last_sync_subscriptions: number;
         last_sync_domains: number;
-            }>
+      }> | null;
-          | null;
+      error: { message: string } | null;
     },
     {
-        data:
+      data: Array<{
-          | Array<{
         id: string;
         name: string | null;
         status: string | null;
         plesk_subscription_id: string;
         plesk_instance_id: string;
-            }>
+      }> | null;
-          | null;
     },
     {
-        data:
+      data: Array<{
-          | Array<{
         id: string;
         plesk_instance_id: string;
         domain_name: string;
@@ -104,8 +107,7 @@ export default async function DashboardPage() {
         source_created_at: string | null;
         aliases_count: number | null;
         updated_at: string;
-            }>
+      }> | null;
-          | null;
     },
     { data: BillingSummary | null },
     { data: ActionLogSummary[] | null },
@@ -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,32 +220,45 @@ 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
+          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)}
+            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)}
+            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"
           />
@@ -252,7 +276,9 @@ export function DashboardControls({
             <input
               required
               value={apiKey}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setApiKey(e.target.value)}
+              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"
             />
@@ -261,7 +287,9 @@ export function DashboardControls({
               <input
                 required
                 value={username}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setUsername(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"
               />
@@ -269,13 +297,18 @@ export function DashboardControls({
                 required
                 type="password"
                 value={password}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+                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">
+          <button
+            disabled={loading}
+            className="rounded bg-brand-600 px-3 py-2 text-sm text-white"
+          >
             Save & Validate
           </button>
         </form>
@@ -285,10 +318,15 @@ export function DashboardControls({
 
           <div className="space-y-2">
             {instances.length === 0 ? (
-            <p className="text-sm text-slate-500">No Plesk instances connected yet.</p>
+              <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
+                  key={instance.id}
+                  className="rounded border border-slate-200 p-3"
+                >
                   <div className="flex items-start justify-between gap-2">
                     <div>
                       {autoSyncByInstance[instance.id] ? (
@@ -302,29 +340,44 @@ export function DashboardControls({
                           Auto-sync {autoSyncByInstance[instance.id].status}
                         </span>
                       ) : null}
-                    <p className="text-sm font-semibold text-slate-900">{instance.name}</p>
+                      <p className="text-sm font-semibold text-slate-900">
-                    <p className="text-xs text-slate-500">{instance.base_url}</p>
+                        {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>
+                        Status:{" "}
+                        <span className="font-medium">{instance.status}</span>
                       </p>
                       <p className="text-xs text-slate-500">
-                      Last sync: {formatDate(instance.last_sync_at)}
+                        Last sync: {formatDateTime(instance.last_sync_at)}
-                      {instance.last_sync_status ? ` (${instance.last_sync_status})` : ""}
+                        {instance.last_sync_status
+                          ? ` (${instance.last_sync_status})`
+                          : ""}
                       </p>
                       <p className="text-xs text-slate-500">
-                      Last counts: {instance.last_sync_subscriptions ?? 0} subscriptions, {" "}
+                        Last counts: {instance.last_sync_subscriptions ?? 0}{" "}
-                      {instance.last_sync_domains ?? 0} domains
+                        subscriptions, {instance.last_sync_domains ?? 0} domains
                       </p>
                       <p className="text-xs text-slate-500">
-                      Last connected: {instance.last_connected_at ?? "never"}
+                        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: {autoSyncByInstance[instance.id].created_at}
+                          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>
+                        <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">
@@ -333,7 +386,8 @@ export function DashboardControls({
                       ) : null}
                       {autoSyncByInstance[instance.id]?.error_message ? (
                         <p className="mt-1 text-xs text-rose-600">
-                        Auto-sync error: {autoSyncByInstance[instance.id].error_message}
+                          Auto-sync error:{" "}
+                          {autoSyncByInstance[instance.id].error_message}
                         </p>
                       ) : null}
                     </div>
@@ -363,7 +417,9 @@ export function DashboardControls({
             <label className="text-sm font-medium">Subscription Action</label>
             <select
               value={actionSubId}
-            onChange={(e: ChangeEvent<HTMLSelectElement>) => setActionSubId(e.target.value)}
+              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) => (
@@ -392,10 +448,18 @@ export function DashboardControls({
           </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">
+            <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">
+            <button
+              onClick={onPortal}
+              disabled={loading}
+              className="rounded border px-3 py-2 text-sm"
+            >
               Billing Portal
             </button>
           </div>
@@ -409,7 +473,9 @@ export function DashboardControls({
               <label className="text-sm font-medium">Search domains</label>
               <input
                 value={domainSearch}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setDomainSearch(e.target.value)}
+                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"
               />
@@ -418,7 +484,9 @@ export function DashboardControls({
               <label className="text-sm font-medium">Status filter</label>
               <select
                 value={domainStatus}
-              onChange={(e: ChangeEvent<HTMLSelectElement>) => setDomainStatus(e.target.value)}
+                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>
@@ -453,12 +521,22 @@ export function DashboardControls({
                 ) : (
                   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 font-medium text-slate-900">
-                    <td className="px-2 py-2">{domain.status ?? "unknown"}</td>
+                        {domain.domain_name}
-                    <td className="px-2 py-2">{domain.hosting_type ?? "unknown"}</td>
+                      </td>
-                    <td className="px-2 py-2">{formatDate(domain.source_created_at)}</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">{formatDate(domain.updated_at)}</td>
+                      <td className="px-2 py-2">
+                        {formatDateTime(domain.updated_at)}
+                      </td>
                     </tr>
                   ))
                 )}

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