Rework billing

frontend/src/pages/admin/AdminRelayDetail.tsx

@@ -15,7 +15,7 @@ export default function AdminRelayDetail() {
   const [relay, { refetch, mutate }] = useRelay(relayId)
   const loading = useMinLoading(() => relay.loading && !relay())
   const [activity] = useRelayActivity(relayId)
-  const { busy, handleDeactivate, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
+  const { busy, handleDeactivate, handleReactivate, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
   return (
     <PageContainer>
@@ -29,7 +29,9 @@ export default function AdminRelayDetail() {
               showTenant
               editHref={`/admin/relays/${params.id}/edit`}
               onDeactivate={handleDeactivate}
+              onReactivate={handleReactivate}
               deactivating={busy()}
+              reactivating={busy()}
               enforcePlanLimits={false}
               showPlanActions={false}
               {...toggles}

frontend/src/pages/admin/AdminTenantDetail.tsx

@@ -14,6 +14,12 @@ export default function AdminTenantDetail() {
   const [relays] = useAdminTenantRelays(tenantId)
   const loading = useMinLoading(() => tenant.loading || relays.loading)
 
+  const pastDueLabel = () => {
+    const ts = tenant()?.past_due_at
+    if (!ts) return null
+    return new Date(ts * 1000).toLocaleString()
+  }
+
   return (
     <PageContainer>
       <BackLink href="/admin/tenants" label="Tenants" />
@@ -24,7 +30,32 @@ export default function AdminTenantDetail() {
           <section class="bg-white border border-gray-200 rounded-xl p-6">
             <h2 class="text-lg font-semibold mb-4">Status</h2>
             <Show when={tenant()}>
-              <p class="text-sm text-gray-700">Current: <span class="font-medium uppercase tracking-wide">tenant</span></p>
+              {(t) => (
+                <dl class="grid gap-y-3 text-sm">
+                  <div class="flex gap-2">
+                    <dt class="text-gray-500">Status:</dt>
+                    <dd class="font-medium uppercase tracking-wide">{t().past_due_at ? "past due" : "active"}</dd>
+                  </div>
+                  <Show when={t().stripe_customer_id}>
+                    <div class="flex gap-2">
+                      <dt class="text-gray-500">Stripe Customer:</dt>
+                      <dd class="font-mono text-xs">{t().stripe_customer_id}</dd>
+                    </div>
+                  </Show>
+                  <Show when={pastDueLabel()}>
+                    <div class="flex gap-2">
+                      <dt class="text-gray-500">Past Due Since:</dt>
+                      <dd class="text-red-600 font-medium">{pastDueLabel()}</dd>
+                    </div>
+                  </Show>
+                  <Show when={t().nwc_error}>
+                    <div class="flex gap-2">
+                      <dt class="text-gray-500">NWC Error:</dt>
+                      <dd class="text-red-600">{t().nwc_error}</dd>
+                    </div>
+                  </Show>
+                </dl>
+              )}
             </Show>
           </section>
           <section class="bg-white border border-gray-200 rounded-xl p-6">