// Subscriptions screen — supports 4 view modes:
// 'tabs' → split into Domains/Servers tabs (flat tables)
// 'all' → grouped by client, both kinds
// 'domains' → grouped by client, domains only
// 'servers' → grouped by client, servers only
//
// Sort + status filters apply consistently across all four.
// Default sort: expired → newest.
const FIELD_LABELS = {
name: 'Domain name', registrar: 'Registrar', start: 'Start date', expiry: 'Expiry date',
autoRenew: 'Auto-renew', billedCost: 'Billed to client', purchasedCost: 'Purchased cost', clientId: 'Client',
serverId: 'Hosted on', role: 'Role', groupId: 'Group',
label: 'Server label', provider: 'Provider', ip: 'IP address', panelDomain: 'Panel domain',
os: 'OS', cpu: 'CPU (vCPU)', ram: 'RAM (GB)', disk: 'Disk (GB)', region: 'Region',
type: 'Server type',
};
const renderFieldValue = (entity, field, value, clients, servers) => {
if (value == null || value === '') return '\u2014';
if (field === 'clientId') {
const c = clients.find(c => c.id === value);
return c ? c.name : value;
}
if (field === 'serverId') {
const s = (servers || []).find(s => s.id === value);
if (!s) return '\u2014';
const sc = clients.find(c => c.id === s.clientId);
return `${s.label}${sc ? ` · ${sc.name}` : ''} · ${s.type === 'shared' ? 'Shared' : 'Individual'}`;
}
if (field === 'autoRenew') return value ? 'On' : 'Off';
if (field === 'role') return value === 'frontend' ? 'Frontend' : value === 'backend' ? 'Backend' : '—';
if (field === 'type') return value === 'shared' ? 'Shared' : 'Individual';
if (field === 'billedCost' || field === 'purchasedCost') return window.fmtINR(value);
if (field === 'expiry' || field === 'start') return window.fmtDate(value);
if (field === 'cpu') return `${value} vCPU`;
if (field === 'ram') return `${value} GB`;
if (field === 'disk') return `${value} GB`;
return String(value);
};
function withPending(entity, kind, approvals) {
const pending = approvals.find(a => a.kind === 'edit' && a.entity === kind && a.entityId === entity.id);
return { entity, pending, effective: { ...entity, ...(pending?.changes || {}) } };
}
function sortRows(rows, sort, clients) {
const dir = sort.dir === 'asc' ? 1 : -1;
return [...rows].sort((A, B) => {
const a = A.effective, b = B.effective;
if (sort.field === 'expiryStatus') {
const sa = window.expiryStatus(a.expiry);
const sb = window.expiryStatus(b.expiry);
if (sa.sort !== sb.sort) return (sa.sort - sb.sort) * dir;
return (sa.n - sb.n) * dir;
}
let va = a[sort.field], vb = b[sort.field];
if (sort.field === 'clientId') {
va = (clients.find(c => c.id === va) || {}).name || '';
vb = (clients.find(c => c.id === vb) || {}).name || '';
}
if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
return String(va || '').localeCompare(String(vb || '')) * dir;
});
}
function filterRows(rows, query, statusFilter, clientFilter, providerFilter, kind) {
const q = query.trim().toLowerCase();
return rows.filter(r => {
const e = r.effective;
if (q) {
const blob = (kind === 'domain'
? [e.name, e.registrar]
: [e.label, e.provider, e.ip, e.os]).join(' ').toLowerCase();
if (!blob.includes(q)) return false;
}
if (statusFilter !== 'all') {
const s = window.expiryStatus(e.expiry).tone;
const map = { expired: 'red', soon: 'amber', active: 'green' };
if (s !== map[statusFilter]) return false;
}
if (clientFilter && e.clientId !== clientFilter) return false;
if (providerFilter) {
const v = kind === 'domain' ? e.registrar : e.provider;
if (v !== providerFilter) return false;
}
return true;
});
}
// ── Reusable row renderers (used by both tabs view and grouped view) ──
const DomainRow = ({ row, clients, servers, onEdit, onView, onRenew, onDelete, role, showClient = true, toast, onReload }) => {
const { entity, pending, effective } = row;
const client = clients.find(c => c.id === effective.clientId);
const server = (servers || []).find(s => s.id === effective.serverId);
const serverClient = server && clients.find(c => c.id === server.clientId);
const crossClient = server && serverClient && serverClient.id !== effective.clientId;
const [running, setRunning] = React.useState(false);
const [notifying, setNotifying] = React.useState(false);
const _toast = toast || (() => {});
const _reload = onReload || (async () => {});
const runHealth = async () => {
setRunning(true);
try {
const r = await api.healthChecks.run('domain', entity.id);
const ms = r && r.responseTimeMs != null ? ` · ${r.responseTimeMs}ms` : '';
_toast(`Status: ${r?.status || 'unknown'}${ms}`, r?.status === 'down' ? 'danger' : undefined);
await _reload();
} catch (err) {
_toast(err.message || 'Check failed', 'danger');
} finally {
setRunning(false);
}
};
const notifyClient = async () => {
if (!client) return;
if (!client.email) { _toast('Set client email first', 'danger'); return; }
if (!window.confirm(`Send expiry notification email to ${client.name} (${client.email})?`)) return;
setNotifying(true);
try {
const r = await api.clients.notifyExpiry(client.id, { items: [{ kind: 'domain', id: entity.id }] });
_toast(`Notification sent (${r?.sent ?? r?.count ?? 1})`);
} catch (err) {
_toast(err.message || 'Notify failed', 'danger');
} finally {
setNotifying(false);
}
};
return (
|
{effective.healthCheckEnabled && (
)}
{effective.name}
{effective.role === 'frontend' && FE}
{effective.role === 'backend' && BE}
{pending && Pending}
{effective.registrar}
{effective.groupId && · {effective.groupId}}
|
{showClient && {client?.name || '—'} | }
{server ? (
<>
{server.label}
{server.type === 'shared' && Shared}
{crossClient ? via {serverClient.name} : {server.ip}}
) : (
External
)}
|
{window.fmtDate(effective.start)} |
{window.fmtDate(effective.expiry)}
|
{effective.autoRenew ? On : Off} |
{window.fmtINR(effective.billedCost)} |
{window.fmtINR(effective.purchasedCost)} |
{window.fmtRelative(effective.updatedAt)}
{effective.updatedBy && by {effective.updatedBy} }
|
{role === 'admin' && }
{role === 'admin' && (
)}
{role === 'admin' && }
|
);
};
const ServerRow = ({ row, clients, onEdit, onView, onRenew, onDelete, role, showClient = true, toast, onReload, onOpenPm2 }) => {
const { entity, pending, effective } = row;
const client = clients.find(c => c.id === effective.clientId);
const [running, setRunning] = React.useState(false);
const _toast = toast || (() => {});
const _reload = onReload || (async () => {});
const runHealth = async () => {
setRunning(true);
try {
const r = await api.healthChecks.run('server', entity.id);
const ms = r && r.responseTimeMs != null ? ` · ${r.responseTimeMs}ms` : '';
_toast(`Status: ${r?.status || 'unknown'}${ms}`, r?.status === 'down' ? 'danger' : undefined);
await _reload();
} catch (err) {
_toast(err.message || 'Check failed', 'danger');
} finally {
setRunning(false);
}
};
return (
|
{effective.healthCheckEnabled && (
)}
{effective.label}
{pending && Pending}
{effective.ip}
{effective.panelDomain && (
)}
|
{effective.provider}
{effective.region}
|
{effective.type === 'shared'
? Shared
: Individual}
|
{showClient && {client?.name || '—'} | }
{effective.cpu} vCPU · {effective.ram} GB
{effective.disk} GB
|
{window.fmtDate(effective.start)} |
{window.fmtDate(effective.expiry)}
|
{effective.autoRenew ? On : Off} |
{window.fmtINR(effective.billedCost)}
|
{window.fmtINR(effective.purchasedCost)}
|
{window.fmtRelative(effective.updatedAt)}
{effective.updatedBy && by {effective.updatedBy} }
|
{role === 'admin' && effective.sshConfigured && (
)}
{role === 'admin' && }
{role === 'admin' && }
|
);
};
const DomainsTable = ({ rows, clients, role, servers, onEdit, onView, onRenew, onDelete, sort, onSort, showClient, groupByProject, toast, onReload }) => {
const colCount = showClient ? 10 : 9;
const rowProps = { clients, servers, role, onEdit, onView, onRenew, onDelete, showClient, toast, onReload };
const renderRows = () => {
if (!groupByProject) {
return rows.map(row => );
}
// Partition into ungrouped + per-groupId clusters
const grouped = {};
const ungrouped = [];
rows.forEach(row => {
const g = row.effective.groupId;
if (g) { (grouped[g] = grouped[g] || []).push(row); }
else ungrouped.push(row);
});
return (
<>
{ungrouped.map(row => )}
{Object.entries(grouped).map(([groupId, groupRows]) => (
|
{groupId}
|
{groupRows.map(row => )}
))}
);
};
return (
|
{showClient && | }
|
|
|
|
|
|
|
|
{rows.length === 0
? |
: renderRows()}
);
};
const ServersTable = ({ rows, clients, role, onEdit, onView, onRenew, onDelete, sort, onSort, showClient, toast, onReload, onOpenPm2 }) => (
|
|
|
{showClient && | }
|
|
|
|
|
|
|
|
{rows.length === 0
? |
: rows.map(row => (
))}
);
// ── PM2 Modal ─────────────────────────────────────────────────────────────────
const Pm2Modal = ({ server, onClose, toast }) => {
const [processes, setProcesses] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [actionRunning, setActionRunning] = React.useState(null); // 'appName:action'
const [output, setOutput] = React.useState(null); // { appName, text }
const _toast = toast || (() => {});
const load = React.useCallback(async () => {
setLoading(true);
try {
const r = await api.pm2.action(server.id, 'jlist', null);
setProcesses(r.processes || []);
} catch (err) {
_toast(err.message || 'Failed to load processes', 'danger');
} finally {
setLoading(false);
}
}, [server.id]);
React.useEffect(() => { load(); }, [load]);
const runAction = async (action, appName) => {
const key = `${appName}:${action}`;
setActionRunning(key);
setOutput(null);
try {
const r = await api.pm2.action(server.id, action, appName);
if (action === 'show' || action === 'logs') {
const lines = (r.output || '').trim().split('\n').slice(-80).join('\n');
setOutput({ appName, action, text: lines || '(no output)' });
} else {
_toast(`${action} ${appName}: OK`);
await load();
}
} catch (err) {
_toast(err.message || `${action} failed`, 'danger');
} finally {
setActionRunning(null);
}
};
const dotColor = (status) => status === 'online' ? '#16a34a' : status === 'stopped' ? '#9ca3af' : '#dc2626';
return (
{ if (e.target === e.currentTarget) onClose(); }}>
PM2 — {server.label}
{server.ip}
{loading ? (
Loading processes…
) : processes.length === 0 ? (
No processes found.
) : (
processes.map(p => {
const isRunning = (key) => actionRunning === `${p.name}:${key}`;
return (
{p.name}
{p.status}
↺ {p.restarts} · up {p.uptime} · CPU {p.cpu}% · {p.mem}
{['restart', 'start', 'stop'].map(a => (
))}
{['show', 'logs'].map(a => (
))}
);
})
)}
{output && (
{output.action} · {output.appName}
{output.text}
)}
{grouping === 'tabs' && (
)}
{grouping !== 'tabs' && clientFilter && (
)}
{kind && (
)}
{ const [f, d] = v.split(':'); setSort({ field: f, dir: d }); }}
options={sortOptions}
icon="sort"
align="right"
minWidth={220}
/>
);
// ── Effective kind / view depending on scope ────────────────
// When scopedKind is set, we lock to that kind. The view dropdown shrinks
// to "Flat / Grouped by client" instead of the 4-mode picker.
const isScoped = scopedKind === 'domain' || scopedKind === 'server';
// Scoped views simplify the grouping vocabulary to just two values:
// tabs → flat list (no client grouping)
// grouped → grouped by client
// For backwards compat with the existing `grouping` state we map both
// 'all'/'domains'/'servers' to "grouped".
const effectiveGrouping = isScoped
? (grouping === 'tabs' ? 'tabs' : 'grouped')
: grouping;
// ── Top page head (shared) ────────────────────────────────────
const scopedTitle = scopedKind === 'domain' ? 'Domain Management' : scopedKind === 'server' ? 'Server Management' : 'Subscriptions';
const scopedSub = scopedKind === 'domain'
? `${domains.length} domain${domains.length === 1 ? '' : 's'} \u00b7 ${approvals.filter(a => a.entity === 'domain').length} pending`
: scopedKind === 'server'
? `${servers.length} server${servers.length === 1 ? '' : 's'} \u00b7 ${approvals.filter(a => a.entity === 'server').length} pending`
: `${domains.length} domains \u00b7 ${servers.length} servers`;
const scopedViewOptions = [
{ value: 'tabs', label: 'Flat list', icon: 'archive' },
{ value: 'grouped', label: 'Grouped by client', icon: 'clients' },
];
const addKind = isScoped ? scopedKind
: (grouping === 'servers' || (grouping === 'tabs' && tab === 'servers') ? 'server' : 'domain');
// Mini summary for scoped pages
const scopedExpired = isScoped
? (scopedKind === 'domain' ? domains : servers).filter(x => window.daysUntil(x.expiry) < 0).length
: 0;
const scopedSoon = isScoped
? (scopedKind === 'domain' ? domains : servers).filter(x => { const n = window.daysUntil(x.expiry); return n >= 0 && n <= 30; }).length
: 0;
const head = (
<>
{scopedTitle}
{scopedSub}
{isScoped && scopedExpired > 0 && <> · {scopedExpired} expired}
{isScoped && scopedSoon > 0 && <> · {scopedSoon} expiring soon}
onSetGrouping(v)}
options={isScoped ? scopedViewOptions : viewOptions}
icon={isScoped ? (effectiveGrouping === 'tabs' ? 'archive' : 'clients') : 'dashboard'}
align="right"
minWidth={isScoped ? 180 : 220}
/>
{isScoped && role === 'admin' && (
)}
);
// ── Grouped variants ──────────────────────────────────────────
if (effectiveGrouping !== 'tabs') {
// For scoped pages, "grouped" means grouped-by-client filtered to that kind
const includeDomains = isScoped ? scopedKind === 'domain'
: (grouping === 'all' || grouping === 'domains');
const includeServers = isScoped ? scopedKind === 'server'
: (grouping === 'all' || grouping === 'servers');
return (
<>
{head}
{clients.map(c => {
const ds = includeDomains ? sortedDomains.filter(r => r.effective.clientId === c.id) : [];
const ss = includeServers ? sortedServers.filter(r => r.effective.clientId === c.id) : [];
if (!ds.length && !ss.length) return null;
return (
{c.name}
{includeDomains && includeServers
? `${ds.length + ss.length} items`
: includeDomains ? `${ds.length} domain${ds.length === 1 ? '' : 's'}`
: `${ss.length} server${ss.length === 1 ? '' : 's'}`}
{c.tag}
{includeDomains && ds.length > 0 && (
)}
{includeServers && ss.length > 0 && (
)}
);
})}
{(() => {
const totalShown = clients.reduce((sum, c) =>
sum + (includeDomains ? sortedDomains.filter(r => r.effective.clientId === c.id).length : 0)
+ (includeServers ? sortedServers.filter(r => r.effective.clientId === c.id).length : 0)
, 0);
if (totalShown === 0) {
return ;
}
return null;
})()}
{pm2Server && setPm2Server(null)} />}
);
}
// ── Tabs / Flat variant ───────────────────────────────────────
// When scoped, render just the single-kind table (no tab UI).
if (isScoped) {
return (
<>
{head}
{scopedKind === 'domain' ? (
) : (
)}
{pm2Server && setPm2Server(null)} />}
);
}
return (
<>
{head}
{tab === 'domains' ? (
) : (
)}
{pm2Server && setPm2Server(null)} />}
);
};
window.SubscriptionsScreen = SubscriptionsScreen;
window.Pm2Modal = Pm2Modal;
window.FIELD_LABELS = FIELD_LABELS;
window.renderFieldValue = renderFieldValue;
window.DomainsTable = DomainsTable;
window.ServersTable = ServersTable;