Merge pull request 'feat(ui): polish domains list subscription/status display' (#21) from feature/ui-domains-polish into master

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

app/dashboard/page.tsx

@@ -154,6 +154,19 @@ export default async function DashboardPage() {
     ]),
   );
 
+  const subscriptionDisplayNameById = new Map<string, string>(
+    (domainSubscriptions ?? [])
+      .filter((subscription: any) => subscription?.id)
+      .map((subscription: any) => [
+        String(subscription.id),
+        String(
+          subscription?.name ||
+            subscription?.plesk_subscription_id ||
+            subscription?.id,
+        ),
+      ]),
+  );
+
   const subscriptionStatusByExternalId = new Map<string, string | null>(
     (domainSubscriptions ?? [])
       .filter((subscription: any) =>
@@ -278,6 +291,10 @@ export default async function DashboardPage() {
           return {
             ...domain,
             status: joinedStatus ?? "unknown",
+            subscription_name: domain.subscription_id
+              ? (subscriptionDisplayNameById.get(domain.subscription_id) ??
+                null)
+              : null,
           };
         })}
         autoSyncByInstance={Object.fromEntries(autoSyncByInstance.entries())}

components/dashboard/dashboard-controls.tsx

@@ -32,6 +32,7 @@ type Domain = {
   id: string;
   plesk_instance_id: string;
   subscription_id: string | null;
+  subscription_name?: string | null;
   domain_name: string;
   status: string | null;
   hosting_type: string | null;
@@ -72,6 +73,23 @@ function getDomainStatusBadge(status: string | null) {
   return "bg-slate-100 text-slate-600";
 }
 
+function formatDomainStatusLabel(status: string | null) {
+  const normalized = (status ?? "unknown").toLowerCase();
+
+  if (normalized.includes("suspend")) return "Suspended";
+  if (normalized.includes("disabled")) return "Disabled";
+  if (normalized.includes("expired")) return "Expired";
+  if (
+    normalized.includes("active") ||
+    normalized.includes("ok") ||
+    normalized.includes("enabled")
+  ) {
+    return "Active";
+  }
+
+  return "Unknown";
+}
+
 function isDomainSuspended(status: string | null) {
   const normalized = (status ?? "unknown").toLowerCase();
   return normalized.includes("suspend") || normalized.includes("disabled");
@@ -618,16 +636,26 @@ export function DashboardControls({
                           {domain.domain_name}
                         </a>
                         {domain.subscription_id ? (
-                          <p className="text-xs font-normal text-slate-500">
-                            Subscription: {domain.subscription_id}
+                          <p
+                            className="text-xs font-normal text-slate-500"
+                            title={`Subscription UUID: ${domain.subscription_id}`}
+                          >
+                            Subscription: {domain.subscription_name ?? "Linked"}
                           </p>
-                        ) : null}
+                        ) : (
+                          <p
+                            className="text-xs font-normal text-amber-700"
+                            title="Run sync to link this domain to a subscription"
+                          >
+                            Subscription: Unlinked
+                          </p>
+                        )}
                       </td>
                       <td className="px-2 py-2">
                         <span
                           className={`inline-flex rounded px-2 py-0.5 text-xs font-medium ${getDomainStatusBadge(domain.status)}`}
                         >
-                          {domain.status ?? "unknown"}
+                          {formatDomainStatusLabel(domain.status)}
                         </span>
                       </td>
                       <td className="px-2 py-2">
@@ -645,7 +673,14 @@ export function DashboardControls({
                           <button
                             onClick={() => onDomainAction(domain, "suspend")}
                             disabled={
-                              loading || isDomainSuspended(domain.status)
+                              loading ||
+                              !domain.subscription_id ||
+                              isDomainSuspended(domain.status)
+                            }
+                            title={
+                              !domain.subscription_id
+                                ? "Not linked to a subscription yet — run sync"
+                                : undefined
                             }
                             className="rounded border border-rose-300 px-2 py-1 text-xs text-rose-700 disabled:cursor-not-allowed disabled:opacity-60"
                           >
@@ -653,7 +688,16 @@ export function DashboardControls({
                           </button>
                           <button
                             onClick={() => onDomainAction(domain, "unsuspend")}
-                            disabled={loading || isDomainActive(domain.status)}
+                            disabled={
+                              loading ||
+                              !domain.subscription_id ||
+                              isDomainActive(domain.status)
+                            }
+                            title={
+                              !domain.subscription_id
+                                ? "Not linked to a subscription yet — run sync"
+                                : undefined
+                            }
                             className="rounded border border-emerald-300 px-2 py-1 text-xs text-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
                           >
                             Unsuspend