fixed sync
This commit is contained in:
@@ -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([
|
||||
supabase.from("agencies").select("id, name").eq("id", context.agencyId).maybeSingle(),
|
||||
supabase
|
||||
.from("plesk_instances")
|
||||
.select(
|
||||
"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",
|
||||
)
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("created_at", { ascending: false }),
|
||||
supabase
|
||||
.from("plesk_subscriptions")
|
||||
.select("id, name, status, plesk_subscription_id, plesk_instance_id")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("updated_at", { ascending: false })
|
||||
.limit(10),
|
||||
supabase
|
||||
.from("plesk_domains")
|
||||
.select(
|
||||
"id, plesk_instance_id, domain_name, status, hosting_type, source_created_at, aliases_count, updated_at",
|
||||
)
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("updated_at", { ascending: false })
|
||||
.limit(500),
|
||||
supabase
|
||||
.from("billing_accounts")
|
||||
.select("subscription_status, plan_id, current_period_end")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.maybeSingle(),
|
||||
supabase
|
||||
.from("actions_log")
|
||||
.select("target_id, status, action, created_at, error_message")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.eq("target_type", "plesk_instance")
|
||||
.eq("action", "plesk_sync_auto")
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(200),
|
||||
])) as [
|
||||
{ data: AgencySummary | null },
|
||||
{
|
||||
data:
|
||||
| Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
base_url: string;
|
||||
auth_type: "api_key" | "basic";
|
||||
status: string;
|
||||
error_message: string | null;
|
||||
last_connected_at: string | null;
|
||||
last_sync_at: string | null;
|
||||
last_sync_status: string | null;
|
||||
last_sync_error: string | null;
|
||||
last_sync_subscriptions: number;
|
||||
last_sync_domains: number;
|
||||
}>
|
||||
| null;
|
||||
},
|
||||
{
|
||||
data:
|
||||
| Array<{
|
||||
id: string;
|
||||
name: string | null;
|
||||
status: string | null;
|
||||
plesk_subscription_id: string;
|
||||
plesk_instance_id: string;
|
||||
}>
|
||||
| null;
|
||||
},
|
||||
{
|
||||
data:
|
||||
| Array<{
|
||||
id: string;
|
||||
plesk_instance_id: string;
|
||||
domain_name: string;
|
||||
status: string | null;
|
||||
hosting_type: string | null;
|
||||
source_created_at: string | null;
|
||||
aliases_count: number | null;
|
||||
updated_at: string;
|
||||
}>
|
||||
| null;
|
||||
},
|
||||
{ data: BillingSummary | null },
|
||||
{ data: ActionLogSummary[] | null },
|
||||
];
|
||||
] = (await Promise.all([
|
||||
supabase
|
||||
.from("agencies")
|
||||
.select("id, name")
|
||||
.eq("id", context.agencyId)
|
||||
.maybeSingle(),
|
||||
supabase
|
||||
.from("plesk_instances")
|
||||
.select(
|
||||
"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",
|
||||
)
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("created_at", { ascending: false }),
|
||||
supabase
|
||||
.from("plesk_subscriptions")
|
||||
.select("id, name, status, plesk_subscription_id, plesk_instance_id")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("updated_at", { ascending: false })
|
||||
.limit(10),
|
||||
supabase
|
||||
.from("plesk_domains")
|
||||
.select(
|
||||
"id, plesk_instance_id, domain_name, status, hosting_type, source_created_at, aliases_count, updated_at",
|
||||
)
|
||||
.eq("agency_id", context.agencyId)
|
||||
.order("updated_at", { ascending: false })
|
||||
.limit(500),
|
||||
supabase
|
||||
.from("billing_accounts")
|
||||
.select("subscription_status, plan_id, current_period_end")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.maybeSingle(),
|
||||
supabase
|
||||
.from("actions_log")
|
||||
.select("target_id, status, action, created_at, error_message")
|
||||
.eq("agency_id", context.agencyId)
|
||||
.eq("target_type", "plesk_instance")
|
||||
.eq("action", "plesk_sync_auto")
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(200),
|
||||
])) as [
|
||||
{ data: AgencySummary | null },
|
||||
{
|
||||
data: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
base_url: string;
|
||||
auth_type: "api_key" | "basic";
|
||||
status: string;
|
||||
error_message: string | null;
|
||||
last_connected_at: string | null;
|
||||
last_sync_at: string | null;
|
||||
last_sync_status: string | null;
|
||||
last_sync_error: string | null;
|
||||
last_sync_subscriptions: number;
|
||||
last_sync_domains: number;
|
||||
}> | null;
|
||||
error: { message: string } | null;
|
||||
},
|
||||
{
|
||||
data: Array<{
|
||||
id: string;
|
||||
name: string | null;
|
||||
status: string | null;
|
||||
plesk_subscription_id: string;
|
||||
plesk_instance_id: string;
|
||||
}> | null;
|
||||
},
|
||||
{
|
||||
data: Array<{
|
||||
id: string;
|
||||
plesk_instance_id: string;
|
||||
domain_name: string;
|
||||
status: string | null;
|
||||
hosting_type: string | null;
|
||||
source_created_at: string | null;
|
||||
aliases_count: number | null;
|
||||
updated_at: string;
|
||||
}> | 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
37
lib/dates.ts
Normal file
37
lib/dates.ts
Normal 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);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user