robbond/pleskSaas
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: http://gitea.lan:3000/robbond/pleskSaas/pulls/1
This commit was merged in pull request #1.
This commit is contained in:
robbond
2026-03-05 09:35:43 +00:00
parent a36d55eae5 4ff4f9572d
commit 0dba5d2ebf
4 changed files with 457 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/dashboard/page.tsx
View File

@@ -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([
supabase.from("agencies").select("id, name").eq("id", context.agencyId).maybeSingle(),
] = (await Promise.all([
supabase
.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:
| Array<{
data: 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:
| Array<{
data: Array<{
id: string;
name: string | null;
status: string | null;
plesk_subscription_id: string;
plesk_instance_id: string;
}>
| null;
}> | null;
},
{
data:
| Array<{
data: 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>
);
}

172
components/dashboard/dashboard-controls.tsx
View File

@@ -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-xs text-slate-500">{instance.base_url}</p>
<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>
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})` : ""}
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
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"}
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">{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 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">{formatDate(domain.updated_at)}</td>
<td className="px-2 py-2">
{formatDateTime(domain.updated_at)}
</td>
</tr>
))
)}

37
lib/dates.ts Normal file
View File

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

2
tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long