mirror of
https://github.com/luxfi/mpc.git
synced 2026-09-24 00:26:24 +00:00
zeekay
a648eaec80
The dashboard had its own header, its own user menu (components/layout/user-menu.tsx) and its own branding table (lib/branding.ts) that mapped a hostname to a brand a second time — a copy of what @luxfi/ui/white-label already answers, and one that drifted (it had no bootno.de row and pointed zoo at the wrong issuer). Both are deleted. The nav is now `AppNav` from @luxfi/ui: brand, org switcher, links, settings and the user menu, with the links collapsing into the same gui Sheet the switchers use instead of the old `hidden md:flex` that simply vanished on a phone with nothing to replace it. Identity comes from IdentityProvider (IAM: get-account / get-organizations / get-organization-projects). Credentials stay with @hanzo/iam — one PKCE flow and one token store per surface; the chrome borrows only signIn and signOut. `next build` passes: 60 routes.
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export interface SubscriptionRow {
|
|
id: string
|
|
name: string
|
|
provider: string
|
|
chain: string
|
|
amount: string
|
|
token: string
|
|
interval: string
|
|
status: 'active' | 'paused' | 'cancelled'
|
|
nextPaymentAt: string
|
|
}
|
|
|
|
export interface SubscriptionTableProps {
|
|
subscriptions: SubscriptionRow[]
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
active: 'bg-green-600/20 text-green-500',
|
|
paused: 'bg-[var(--muted)] text-[var(--color-status-warn)]',
|
|
cancelled: 'bg-zinc-600/20 text-zinc-400',
|
|
}
|
|
|
|
export function SubscriptionTable({ subscriptions }: SubscriptionTableProps) {
|
|
if (subscriptions.length === 0) {
|
|
return (
|
|
<div className="rounded-lg border border-border p-8 text-center text-sm text-muted-foreground">
|
|
No subscriptions found.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-x-auto rounded-lg border border-border">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/50">
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Name</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Provider</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Chain</th>
|
|
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Amount</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Interval</th>
|
|
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
|
|
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Next Payment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{subscriptions.map((sub) => (
|
|
<tr key={sub.id} className="border-b border-border last:border-0 hover:bg-muted/20">
|
|
<td className="px-4 py-3">
|
|
<Link href={`/subscriptions/${sub.id}`} className="font-medium hover:underline">
|
|
{sub.name}
|
|
</Link>
|
|
</td>
|
|
<td className="px-4 py-3 text-muted-foreground">{sub.provider}</td>
|
|
<td className="px-4 py-3">{sub.chain}</td>
|
|
<td className="px-4 py-3 text-right font-mono">
|
|
{sub.amount} {sub.token}
|
|
</td>
|
|
<td className="px-4 py-3 capitalize">{sub.interval}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[sub.status] ?? ''}`}>
|
|
{sub.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-muted-foreground">
|
|
{sub.status !== 'cancelled'
|
|
? new Date(sub.nextPaymentAt).toLocaleDateString()
|
|
: '-'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|