473 lines
18 KiB
TypeScript
473 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { ChangeEvent } from "react";
|
|
import type { FormEvent } from "react";
|
|
|
|
type Instance = {
|
|
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;
|
|
};
|
|
|
|
type Subscription = {
|
|
id: string;
|
|
name: string | null;
|
|
status: string | null;
|
|
plesk_subscription_id: string;
|
|
plesk_instance_id: string;
|
|
};
|
|
|
|
type Domain = {
|
|
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;
|
|
};
|
|
|
|
type Props = {
|
|
instances: Instance[];
|
|
subscriptions: Subscription[];
|
|
domains: Domain[];
|
|
autoSyncByInstance: Record<
|
|
string,
|
|
{ status: string; created_at: string; error_message: string | null }
|
|
>;
|
|
};
|
|
|
|
export function DashboardControls({
|
|
instances,
|
|
subscriptions,
|
|
domains,
|
|
autoSyncByInstance,
|
|
}: Props) {
|
|
const [instanceName, setInstanceName] = useState("");
|
|
const [baseUrl, setBaseUrl] = useState("");
|
|
const [authType, setAuthType] = useState<"api_key" | "basic">("api_key");
|
|
const [apiKey, setApiKey] = useState("");
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [actionSubId, setActionSubId] = useState(subscriptions[0]?.id ?? "");
|
|
const [actionType, setActionType] = useState<"suspend" | "unsuspend">("suspend");
|
|
const [domainSearch, setDomainSearch] = useState("");
|
|
const [domainStatus, setDomainStatus] = useState("all");
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const healthCounts = instances.reduce(
|
|
(acc, instance) => {
|
|
if (instance.status === "connected") acc.connected += 1;
|
|
else if (instance.status === "syncing") acc.syncing += 1;
|
|
else acc.error += 1;
|
|
return acc;
|
|
},
|
|
{ connected: 0, syncing: 0, error: 0 },
|
|
);
|
|
|
|
const domainStatusOptions = Array.from(
|
|
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 term = domainSearch.trim().toLowerCase();
|
|
const searchMatches =
|
|
!term ||
|
|
domain.domain_name.toLowerCase().includes(term) ||
|
|
(domain.hosting_type ?? "").toLowerCase().includes(term);
|
|
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",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
});
|
|
|
|
const payload = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
throw new Error(payload.error ?? "Request failed");
|
|
}
|
|
return payload;
|
|
}
|
|
|
|
async function onCreateInstance(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setMessage(null);
|
|
try {
|
|
await runRequest("/api/plesk/instances", {
|
|
name: instanceName,
|
|
base_url: baseUrl,
|
|
auth_type: authType,
|
|
api_key: authType === "api_key" ? apiKey : undefined,
|
|
username: authType === "basic" ? username : undefined,
|
|
password: authType === "basic" ? password : undefined,
|
|
});
|
|
setMessage("Plesk instance connected.");
|
|
window.location.reload();
|
|
} catch (error) {
|
|
setMessage(error instanceof Error ? error.message : "Could not connect instance");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function onSync(instanceId: string) {
|
|
setLoading(true);
|
|
setMessage(null);
|
|
try {
|
|
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) {
|
|
setMessage(
|
|
`Plesk sync completed. Subscriptions: ${payload.subscriptionsUpserted ?? 0}, Domains: ${payload.domainsUpserted ?? 0}`,
|
|
);
|
|
}
|
|
window.location.reload();
|
|
} catch (error) {
|
|
setMessage(error instanceof Error ? error.message : "Sync failed");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function onTestConnection(instanceId: string) {
|
|
setLoading(true);
|
|
setMessage(null);
|
|
try {
|
|
await runRequest(`/api/plesk/instances/${instanceId}/test`);
|
|
setMessage("Connection test completed.");
|
|
window.location.reload();
|
|
} catch (error) {
|
|
setMessage(error instanceof Error ? error.message : "Connection test failed");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function onSubscriptionAction() {
|
|
if (!actionSubId) return;
|
|
setLoading(true);
|
|
setMessage(null);
|
|
try {
|
|
await runRequest(`/api/plesk/subscriptions/${actionSubId}/action`, { action: actionType });
|
|
setMessage(`Subscription ${actionType} completed.`);
|
|
window.location.reload();
|
|
} catch (error) {
|
|
setMessage(error instanceof Error ? error.message : "Action failed");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function onCheckout() {
|
|
setLoading(true);
|
|
try {
|
|
const payload = await runRequest("/api/stripe/checkout");
|
|
if (payload.url) window.location.href = payload.url;
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function onPortal() {
|
|
setLoading(true);
|
|
try {
|
|
const payload = await runRequest("/api/stripe/portal");
|
|
if (payload.url) window.location.href = payload.url;
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="grid gap-4">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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"
|
|
>
|
|
<option value="api_key">API Key</option>
|
|
<option value="basic">Basic</option>
|
|
</select>
|
|
{authType === "api_key" ? (
|
|
<input
|
|
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: {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)}
|
|
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>
|
|
<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="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>
|
|
</thead>
|
|
<tbody>
|
|
{filteredDomains.length === 0 ? (
|
|
<tr>
|
|
<td className="px-2 py-3 text-slate-500" colSpan={6}>
|
|
No domains found.
|
|
</td>
|
|
</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>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|