feat: tenant portal — all 5 pages (dashboard, license, OIDC, team, settings)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -1 +1,187 @@
|
|||||||
export function OidcConfigPage() { return <div>OidcConfigPage (TODO)</div>; }
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { useTenantOidc, useUpdateOidc } from '../../api/tenant-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
interface OidcFormState {
|
||||||
|
issuerUri: string;
|
||||||
|
clientId: string;
|
||||||
|
clientSecret: string;
|
||||||
|
audience: string;
|
||||||
|
rolesClaim: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EMPTY_FORM: OidcFormState = {
|
||||||
|
issuerUri: '',
|
||||||
|
clientId: '',
|
||||||
|
clientSecret: '',
|
||||||
|
audience: '',
|
||||||
|
rolesClaim: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
function isExternalOidc(config: Record<string, unknown>): boolean {
|
||||||
|
return typeof config['issuerUri'] === 'string' && config['issuerUri'] !== '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OidcConfigPage() {
|
||||||
|
const { data: oidcConfig, isLoading, isError } = useTenantOidc();
|
||||||
|
const updateOidc = useUpdateOidc();
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
const [form, setForm] = useState<OidcFormState>(EMPTY_FORM);
|
||||||
|
|
||||||
|
// Pre-fill form when config loads
|
||||||
|
useEffect(() => {
|
||||||
|
if (!oidcConfig) return;
|
||||||
|
setForm({
|
||||||
|
issuerUri: String(oidcConfig['issuerUri'] ?? ''),
|
||||||
|
clientId: String(oidcConfig['clientId'] ?? ''),
|
||||||
|
clientSecret: String(oidcConfig['clientSecret'] ?? ''),
|
||||||
|
audience: String(oidcConfig['audience'] ?? ''),
|
||||||
|
rolesClaim: String(oidcConfig['rolesClaim'] ?? ''),
|
||||||
|
});
|
||||||
|
}, [oidcConfig]);
|
||||||
|
|
||||||
|
function handleChange(field: keyof OidcFormState, value: string) {
|
||||||
|
setForm((prev) => ({ ...prev, [field]: value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
await updateOidc.mutateAsync({
|
||||||
|
issuerUri: form.issuerUri,
|
||||||
|
clientId: form.clientId,
|
||||||
|
clientSecret: form.clientSecret,
|
||||||
|
audience: form.audience,
|
||||||
|
rolesClaim: form.rolesClaim,
|
||||||
|
});
|
||||||
|
toast({ title: 'OIDC configuration saved', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Save failed', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleReset() {
|
||||||
|
try {
|
||||||
|
await updateOidc.mutateAsync({});
|
||||||
|
setForm(EMPTY_FORM);
|
||||||
|
toast({ title: 'Reset to Logto (default)', variant: 'success' });
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Reset failed', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load OIDC configuration">
|
||||||
|
Could not fetch OIDC config. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasExternalOidc = oidcConfig ? isExternalOidc(oidcConfig) : false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>OIDC Configuration</h1>
|
||||||
|
<Badge
|
||||||
|
label={hasExternalOidc ? 'External OIDC configured' : 'Using Logto (default)'}
|
||||||
|
color={hasExternalOidc ? 'primary' : 'auto'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card title="External OIDC Provider">
|
||||||
|
<p className={styles.description} style={{ marginBottom: 16 }}>
|
||||||
|
Configure an external OIDC provider for your team to sign in. Leave blank to use the
|
||||||
|
default Logto-based authentication.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSave} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<FormField label="Issuer URI" htmlFor="oidc-issuer">
|
||||||
|
<Input
|
||||||
|
id="oidc-issuer"
|
||||||
|
type="url"
|
||||||
|
placeholder="https://your-idp.example.com/oidc"
|
||||||
|
value={form.issuerUri}
|
||||||
|
onChange={(e) => handleChange('issuerUri', e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Client ID" htmlFor="oidc-client-id">
|
||||||
|
<Input
|
||||||
|
id="oidc-client-id"
|
||||||
|
placeholder="your-client-id"
|
||||||
|
value={form.clientId}
|
||||||
|
onChange={(e) => handleChange('clientId', e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Client Secret" htmlFor="oidc-client-secret">
|
||||||
|
<Input
|
||||||
|
id="oidc-client-secret"
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
value={form.clientSecret}
|
||||||
|
onChange={(e) => handleChange('clientSecret', e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Audience" htmlFor="oidc-audience">
|
||||||
|
<Input
|
||||||
|
id="oidc-audience"
|
||||||
|
placeholder="https://api.your-service.example.com"
|
||||||
|
value={form.audience}
|
||||||
|
onChange={(e) => handleChange('audience', e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Roles Claim" htmlFor="oidc-roles-claim">
|
||||||
|
<Input
|
||||||
|
id="oidc-roles-claim"
|
||||||
|
placeholder="roles"
|
||||||
|
value={form.rolesClaim}
|
||||||
|
onChange={(e) => handleChange('rolesClaim', e.target.value)}
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button type="submit" variant="primary" loading={updateOidc.isPending}>
|
||||||
|
Save Configuration
|
||||||
|
</Button>
|
||||||
|
{hasExternalOidc && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleReset}
|
||||||
|
loading={updateOidc.isPending}
|
||||||
|
>
|
||||||
|
Reset to Logto
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1,80 @@
|
|||||||
export function SettingsPage() { return <div>SettingsPage (TODO)</div>; }
|
import {
|
||||||
|
Alert,
|
||||||
|
Badge,
|
||||||
|
Card,
|
||||||
|
Spinner,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { useTenantSettings } from '../../api/tenant-hooks';
|
||||||
|
import { tierColor } from '../../utils/tier';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
function statusColor(status: string): 'success' | 'error' | 'warning' | 'auto' {
|
||||||
|
switch (status?.toUpperCase()) {
|
||||||
|
case 'ACTIVE': return 'success';
|
||||||
|
case 'SUSPENDED': return 'warning';
|
||||||
|
case 'PROVISIONING': return 'auto';
|
||||||
|
case 'ERROR': return 'error';
|
||||||
|
default: return 'auto';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SettingsPage() {
|
||||||
|
const { data, isLoading, isError } = useTenantSettings();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError || !data) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load settings">
|
||||||
|
Could not fetch settings. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Settings</h1>
|
||||||
|
|
||||||
|
<Card title="Tenant Details">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Name</span>
|
||||||
|
<span className={styles.kvValue}>{data.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Slug</span>
|
||||||
|
<span className={styles.kvValueMono}>{data.slug}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Tier</span>
|
||||||
|
<Badge label={data.tier} color={tierColor(data.tier)} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Status</span>
|
||||||
|
<Badge label={data.status} color={statusColor(data.status)} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Server Endpoint</span>
|
||||||
|
<span className={styles.kvValueMono}>{data.serverEndpoint ?? '—'}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Created</span>
|
||||||
|
<span className={styles.kvValue}>{new Date(data.createdAt).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className={styles.description} style={{ marginTop: 16 }}>
|
||||||
|
To change your tier or other billing-related settings, please contact support.
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1,236 @@
|
|||||||
export function TeamPage() { return <div>TeamPage (TODO)</div>; }
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
AlertDialog,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
DataTable,
|
||||||
|
EmptyState,
|
||||||
|
FormField,
|
||||||
|
Input,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import type { Column } from '@cameleer/design-system';
|
||||||
|
import { Plus, Users } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
useTenantTeam,
|
||||||
|
useInviteTeamMember,
|
||||||
|
useRemoveTeamMember,
|
||||||
|
} from '../../api/tenant-hooks';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
// DataTable requires T extends { id: string }
|
||||||
|
interface TeamMember {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
role: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toMember(raw: Record<string, unknown>): TeamMember {
|
||||||
|
return {
|
||||||
|
id: String(raw['id'] ?? raw['userId'] ?? ''),
|
||||||
|
name: String(raw['name'] ?? raw['username'] ?? '—'),
|
||||||
|
email: String(raw['email'] ?? '—'),
|
||||||
|
role: String(raw['role'] ?? raw['orgRole'] ?? '—'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const ROLES = [
|
||||||
|
{ id: 'owner', label: 'Owner' },
|
||||||
|
{ id: 'operator', label: 'Operator' },
|
||||||
|
{ id: 'viewer', label: 'Viewer' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function roleColor(role: string): 'primary' | 'success' | 'warning' | 'auto' {
|
||||||
|
switch (role?.toLowerCase()) {
|
||||||
|
case 'owner': return 'primary';
|
||||||
|
case 'operator': return 'success';
|
||||||
|
case 'viewer': return 'warning';
|
||||||
|
default: return 'auto';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TeamPage() {
|
||||||
|
const { data: rawTeam, isLoading, isError } = useTenantTeam();
|
||||||
|
const inviteMember = useInviteTeamMember();
|
||||||
|
const removeMember = useRemoveTeamMember();
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
const [showInvite, setShowInvite] = useState(false);
|
||||||
|
const [inviteEmail, setInviteEmail] = useState('');
|
||||||
|
const [inviteRole, setInviteRole] = useState('viewer');
|
||||||
|
|
||||||
|
const [removeTarget, setRemoveTarget] = useState<TeamMember | null>(null);
|
||||||
|
|
||||||
|
const team: TeamMember[] = (rawTeam ?? []).map(toMember).filter((m) => m.id !== '');
|
||||||
|
|
||||||
|
const columns: Column<TeamMember>[] = [
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
header: 'Name',
|
||||||
|
render: (_v, row) => row.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'email',
|
||||||
|
header: 'Email',
|
||||||
|
render: (_v, row) => (
|
||||||
|
<span style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}>{row.email}</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'role',
|
||||||
|
header: 'Role',
|
||||||
|
render: (_v, row) => <Badge label={row.role} color={roleColor(row.role)} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'id',
|
||||||
|
header: 'Actions',
|
||||||
|
render: (_v, row) => (
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setRemoveTarget(row); }}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
async function handleInvite(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!inviteEmail.trim()) return;
|
||||||
|
try {
|
||||||
|
await inviteMember.mutateAsync({ email: inviteEmail.trim(), roleId: inviteRole });
|
||||||
|
toast({ title: `Invited ${inviteEmail}`, variant: 'success' });
|
||||||
|
setInviteEmail('');
|
||||||
|
setInviteRole('viewer');
|
||||||
|
setShowInvite(false);
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Invite failed', description: String(err), variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleRemove() {
|
||||||
|
if (!removeTarget) return;
|
||||||
|
try {
|
||||||
|
await removeMember.mutateAsync(removeTarget.id);
|
||||||
|
toast({ title: `Removed ${removeTarget.name}`, variant: 'success' });
|
||||||
|
setRemoveTarget(null);
|
||||||
|
} catch (err) {
|
||||||
|
toast({ title: 'Remove failed', description: String(err), variant: 'error' });
|
||||||
|
setRemoveTarget(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load team">
|
||||||
|
Could not fetch team members. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Team</h1>
|
||||||
|
<Button variant="primary" onClick={() => setShowInvite((v) => !v)}>
|
||||||
|
<Plus size={16} style={{ marginRight: 6 }} />
|
||||||
|
Invite Member
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline invite form */}
|
||||||
|
{showInvite && (
|
||||||
|
<Card title="Invite Team Member">
|
||||||
|
<form onSubmit={handleInvite} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
|
<FormField label="Email address" htmlFor="invite-email">
|
||||||
|
<Input
|
||||||
|
id="invite-email"
|
||||||
|
type="email"
|
||||||
|
placeholder="colleague@example.com"
|
||||||
|
value={inviteEmail}
|
||||||
|
onChange={(e) => setInviteEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Role" htmlFor="invite-role">
|
||||||
|
<select
|
||||||
|
id="invite-role"
|
||||||
|
value={inviteRole}
|
||||||
|
onChange={(e) => setInviteRole(e.target.value)}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '6px 10px',
|
||||||
|
borderRadius: 6,
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{ROLES.map((r) => (
|
||||||
|
<option key={r.id} value={r.id}>{r.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button type="submit" variant="primary" loading={inviteMember.isPending}>
|
||||||
|
Send Invite
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="secondary" onClick={() => setShowInvite(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Team table */}
|
||||||
|
{team.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
icon={<Users size={32} />}
|
||||||
|
title="No team members yet"
|
||||||
|
description="Invite colleagues to collaborate on this tenant."
|
||||||
|
action={
|
||||||
|
<Button variant="primary" onClick={() => setShowInvite(true)}>
|
||||||
|
<Plus size={16} style={{ marginRight: 6 }} />
|
||||||
|
Invite Member
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<DataTable columns={columns} data={team} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Remove confirmation dialog */}
|
||||||
|
<AlertDialog
|
||||||
|
open={removeTarget !== null}
|
||||||
|
onClose={() => setRemoveTarget(null)}
|
||||||
|
onConfirm={handleRemove}
|
||||||
|
title="Remove Team Member"
|
||||||
|
description={`Are you sure you want to remove "${removeTarget?.name ?? ''}" from the team? They will lose access immediately.`}
|
||||||
|
confirmLabel="Remove"
|
||||||
|
cancelLabel="Cancel"
|
||||||
|
variant="danger"
|
||||||
|
loading={removeMember.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1,135 @@
|
|||||||
export function TenantDashboardPage() { return <div>TenantDashboardPage (TODO)</div>; }
|
import { useNavigate } from 'react-router';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
KpiStrip,
|
||||||
|
Spinner,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { ExternalLink, Key, Settings } from 'lucide-react';
|
||||||
|
import { useTenantDashboard } from '../../api/tenant-hooks';
|
||||||
|
import { ServerStatusBadge } from '../../components/ServerStatusBadge';
|
||||||
|
import { UsageIndicator } from '../../components/UsageIndicator';
|
||||||
|
import { tierColor } from '../../utils/tier';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
function statusColor(status: string): 'success' | 'error' | 'warning' | 'auto' {
|
||||||
|
switch (status?.toUpperCase()) {
|
||||||
|
case 'ACTIVE': return 'success';
|
||||||
|
case 'SUSPENDED': return 'warning';
|
||||||
|
case 'PROVISIONING': return 'auto';
|
||||||
|
case 'ERROR': return 'error';
|
||||||
|
default: return 'auto';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TenantDashboardPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { data, isLoading, isError } = useTenantDashboard();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError || !data) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load dashboard">
|
||||||
|
Could not fetch dashboard data. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const serverDown = !data.serverHealthy;
|
||||||
|
const daysRemaining = data.licenseDaysRemaining ?? 0;
|
||||||
|
|
||||||
|
const agentLimit = data.limits?.['agents'] ?? -1;
|
||||||
|
const envLimit = data.limits?.['environments'] ?? -1;
|
||||||
|
// Dashboard doesn't expose usage counts directly — show limit info from license
|
||||||
|
const agentUsed = 0;
|
||||||
|
const envUsed = 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>{data.name}</h1>
|
||||||
|
<Badge label={data.tier} color={tierColor(data.tier)} />
|
||||||
|
<Badge label={data.status} color={statusColor(data.status)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Server-down alert */}
|
||||||
|
{serverDown && (
|
||||||
|
<Alert variant="error" title="Server is not responding">
|
||||||
|
Your Cameleer server is currently unreachable. Agent data collection is paused.
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* KPI strip */}
|
||||||
|
<KpiStrip
|
||||||
|
items={[
|
||||||
|
{ label: 'Tier', value: data.tier },
|
||||||
|
{ label: 'Status', value: data.status },
|
||||||
|
{ label: 'Server', value: data.serverHealthy ? 'Healthy' : 'Down' },
|
||||||
|
{ label: 'License', value: daysRemaining > 0 ? `${daysRemaining}d remaining` : 'Expired' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Cards */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
|
||||||
|
{/* Server card */}
|
||||||
|
<Card title="Server">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>State</span>
|
||||||
|
<ServerStatusBadge state={data.serverStatus} />
|
||||||
|
</div>
|
||||||
|
{data.serverEndpoint && (
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Endpoint</span>
|
||||||
|
<span className={styles.kvValueMono}>{data.serverEndpoint}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Usage card */}
|
||||||
|
<Card title="Usage">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<UsageIndicator used={agentUsed} limit={agentLimit} label="Agents" />
|
||||||
|
<UsageIndicator used={envUsed} limit={envLimit} label="Environments" />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Quick links card */}
|
||||||
|
<Card title="Quick Links">
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||||
|
{data.serverEndpoint && (
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => window.open(`/t/${data.slug}/`, '_blank')}
|
||||||
|
>
|
||||||
|
<ExternalLink size={14} style={{ marginRight: 6 }} />
|
||||||
|
Open Server Dashboard
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button variant="secondary" onClick={() => navigate('../license')}>
|
||||||
|
<Key size={14} style={{ marginRight: 6 }} />
|
||||||
|
View License
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={() => navigate('../oidc')}>
|
||||||
|
<Settings size={14} style={{ marginRight: 6 }} />
|
||||||
|
Configure OIDC
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1,148 @@
|
|||||||
export function TenantLicensePage() { return <div>TenantLicensePage (TODO)</div>; }
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Spinner,
|
||||||
|
useToast,
|
||||||
|
} from '@cameleer/design-system';
|
||||||
|
import { Copy, Eye, EyeOff } from 'lucide-react';
|
||||||
|
import { useTenantLicense } from '../../api/tenant-hooks';
|
||||||
|
import { UsageIndicator } from '../../components/UsageIndicator';
|
||||||
|
import { tierColor } from '../../utils/tier';
|
||||||
|
import styles from '../../styles/platform.module.css';
|
||||||
|
|
||||||
|
function daysColor(days: number): 'success' | 'warning' | 'error' | 'auto' {
|
||||||
|
if (days <= 0) return 'error';
|
||||||
|
if (days <= 30) return 'warning';
|
||||||
|
return 'success';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TenantLicensePage() {
|
||||||
|
const { data, isLoading, isError } = useTenantLicense();
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [showToken, setShowToken] = useState(false);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isError || !data) {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<Alert variant="error" title="Failed to load license">
|
||||||
|
Could not fetch license data. Please refresh.
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCopy() {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(data!.token);
|
||||||
|
toast({ title: 'Token copied to clipboard', variant: 'success' });
|
||||||
|
} catch {
|
||||||
|
toast({ title: 'Copy failed', variant: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const agentLimit = data.limits?.['agents'] ?? -1;
|
||||||
|
const envLimit = data.limits?.['environments'] ?? -1;
|
||||||
|
const retentionDays = data.limits?.['retentionDays'] ?? -1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>License</h1>
|
||||||
|
<Badge label={data.tier} color={tierColor(data.tier)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
|
||||||
|
{/* Validity card */}
|
||||||
|
<Card title="Validity">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Issued</span>
|
||||||
|
<span className={styles.kvValue}>{new Date(data.issuedAt).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Expires</span>
|
||||||
|
<span className={styles.kvValue}>{new Date(data.expiresAt).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Days remaining</span>
|
||||||
|
<Badge
|
||||||
|
label={data.daysRemaining <= 0 ? 'Expired' : `${data.daysRemaining}d`}
|
||||||
|
color={daysColor(data.daysRemaining)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Features card */}
|
||||||
|
<Card title="Features">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
{Object.entries(data.features).map(([key, enabled]) => (
|
||||||
|
<div key={key} className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>{key}</span>
|
||||||
|
<Badge
|
||||||
|
label={enabled ? 'Enabled' : 'Disabled'}
|
||||||
|
color={enabled ? 'success' : 'auto'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{Object.keys(data.features).length === 0 && (
|
||||||
|
<p className={styles.description}>No feature flags configured.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Limits & Usage card */}
|
||||||
|
<Card title="Limits & Usage">
|
||||||
|
<div className={styles.dividerList}>
|
||||||
|
<UsageIndicator used={0} limit={agentLimit} label="Agents" />
|
||||||
|
<UsageIndicator used={0} limit={envLimit} label="Environments" />
|
||||||
|
{retentionDays >= 0 && (
|
||||||
|
<div className={styles.kvRow}>
|
||||||
|
<span className={styles.kvLabel}>Data retention</span>
|
||||||
|
<span className={styles.kvValue}>{retentionDays}d</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* License token card — full width */}
|
||||||
|
<Card title="License Token">
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
|
<p className={styles.description}>
|
||||||
|
This token is embedded in your Cameleer server configuration. Keep it secret.
|
||||||
|
</p>
|
||||||
|
<div className={styles.tokenBlock}>
|
||||||
|
<code className={styles.tokenCode}>
|
||||||
|
{showToken ? data.token : '••••••••••••••••••••••••••••••••'}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 8 }}>
|
||||||
|
<Button variant="secondary" onClick={() => setShowToken((v) => !v)}>
|
||||||
|
{showToken
|
||||||
|
? <><EyeOff size={14} style={{ marginRight: 6 }} />Hide</>
|
||||||
|
: <><Eye size={14} style={{ marginRight: 6 }} />Show</>
|
||||||
|
}
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={handleCopy}>
|
||||||
|
<Copy size={14} style={{ marginRight: 6 }} />
|
||||||
|
Copy
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user