tapimo 0.4.0 → 0.4.3

package/src/admin/ui/src/routes/organizations_.$orgId.tsx

@@ -0,0 +1,710 @@
+import {
+  type UseQueryResult,
+  useInfiniteQuery,
+  useQuery,
+  useSuspenseQuery,
+} from '@tanstack/react-query'
+import {
+  createFileRoute,
+  type ErrorComponentProps,
+  Link,
+  useNavigate,
+  useRouter,
+} from '@tanstack/react-router'
+import { Button, Rows, Select } from 'regen-ui'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
+
+import { Card, Notice, Page } from '../components/Page'
+import * as Organizations from '../lib/organizations'
+
+export const Route = createFileRoute('/organizations_/$orgId')({
+  validateSearch: Organizations.schema.Search,
+  loader: ({ context, params }) =>
+    context.queryClient.ensureQueryData(Organizations.get.options(params.orgId)),
+  component: PageComponent,
+  errorComponent: OrganizationError,
+})
+
+function PageComponent() {
+  const { orgId } = Route.useParams()
+  const { period: period_search, query } = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const period = period_search ?? '7d'
+  const organizationQuery = useSuspenseQuery(Organizations.get.options(orgId))
+  const organization = organizationQuery.data
+  const members = useInfiniteQuery(Organizations.members.options(orgId))
+  const projects = useInfiniteQuery(Organizations.projects.options(orgId))
+  const apiKeys = useQuery(Organizations.apiKeys.options(orgId))
+  const sponsorship = useQuery(Organizations.sponsorship.options(orgId))
+  const usage = useQuery(Organizations.usage.options(orgId, period))
+  const webhooks = useQuery(Organizations.webhooks.options(orgId))
+  const memberRecords = members.data?.pages.flatMap((page) => page.data) ?? []
+  const projectRecords = projects.data?.pages.flatMap((page) => page.data) ?? []
+  const usageLabel = usagePeriods[period].label
+  const operationalQueries = [
+    apiKeys,
+    members,
+    organizationQuery,
+    projects,
+    sponsorship,
+    usage,
+    webhooks,
+  ]
+  const updatedAt = oldestUpdatedAt(operationalQueries.map((result) => result.dataUpdatedAt))
+  const updateComplete = operationalQueries.every((result) => result.dataUpdatedAt > 0)
+  const updateError = operationalQueries.some((result) => result.error)
+  const refreshing = operationalQueries.some((result) => result.isFetching)
+
+  function refresh() {
+    void Promise.all([
+      apiKeys.refetch(),
+      members.refetch(),
+      organizationQuery.refetch(),
+      projects.refetch(),
+      sponsorship.refetch(),
+      usage.refetch(),
+      webhooks.refetch(),
+    ])
+  }
+
+  return (
+    <Page
+      title={organization.name}
+      description={organization.id}
+      action={
+        <Button
+          render={<Link search={Organizations.searchParameters({ query })} to="/organizations" />}
+        >
+          <ArrowLeft className="size-4" />
+          Organizations
+        </Button>
+      }
+    >
+      <Card className="grid grid-cols-2 gap-px bg-border md:grid-cols-3">
+        <dl className="contents">
+          <Summary label="Members">{organization.memberCount}</Summary>
+          <Summary label="Projects">{organization.projectCount}</Summary>
+          <Summary label="Owner user">{organization.userId ?? 'None'}</Summary>
+          <Summary label="Created by">{organization.createdBy ?? 'Unknown'}</Summary>
+          <Summary label="Created">{formatDate(organization.createdAt)}</Summary>
+          <Summary label="Updated">{formatDate(organization.updatedAt)}</Summary>
+        </dl>
+      </Card>
+
+      <section className="flex flex-col gap-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="text-heading-18 text-foreground">Operations</h2>
+          <div className="flex items-center gap-3">
+            <span aria-live="polite" className="text-label-12 text-foreground-secondary">
+              {refreshing && !updateComplete ? (
+                'Updating…'
+              ) : updateError ? (
+                updatedAt ? (
+                  <time
+                    dateTime={new Date(updatedAt).toISOString()}
+                    title={formatDateTime(updatedAt)}
+                  >
+                    Partially updated {formatTime(updatedAt)}
+                  </time>
+                ) : (
+                  'Update unavailable'
+                )
+              ) : updatedAt && updateComplete ? (
+                <time
+                  dateTime={new Date(updatedAt).toISOString()}
+                  title={formatDateTime(updatedAt)}
+                >
+                  Updated {formatTime(updatedAt)}
+                </time>
+              ) : (
+                'Updating…'
+              )}
+            </span>
+            <Button loading={refreshing} onClick={refresh}>
+              <RefreshCw className="size-4" />
+              Refresh
+            </Button>
+          </div>
+        </div>
+        <Card className="grid grid-cols-2 gap-px bg-border lg:grid-cols-4">
+          <OperationalMetric
+            error={apiKeys.error}
+            label="Active API keys"
+            loading={apiKeys.isPending}
+            value={apiKeys.data?.data.length.toLocaleString()}
+          />
+          <OperationalMetric
+            error={usage.error}
+            label={`API requests, ${usageLabel}`}
+            loading={usage.isPending}
+            value={usage.data?.totals.requests.toLocaleString()}
+          />
+          <OperationalMetric
+            error={usage.error}
+            label={`Error rate, ${usageLabel}`}
+            loading={usage.isPending}
+            value={
+              usage.data
+                ? formatPercent(usage.data.totals.errors, usage.data.totals.requests)
+                : undefined
+            }
+          />
+          <OperationalMetric
+            error={webhooks.error}
+            label="Webhook failures, 7 days"
+            loading={webhooks.isPending}
+            value={webhooks.data?.failureCount.toLocaleString()}
+          />
+        </Card>
+      </section>
+
+      <div className="grid items-start gap-6 lg:grid-cols-2">
+        <UsageCard
+          onPeriodChange={(value) =>
+            void navigate({
+              params: { orgId },
+              replace: true,
+              search: { period: value, ...(query ? { query } : {}) },
+              to: '/organizations/$orgId',
+            })
+          }
+          period={period}
+          query={usage}
+        />
+        <ApiKeysCard orgId={orgId} query={apiKeys} />
+      </div>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="text-heading-18 text-foreground">Billing</h2>
+        <div className="grid gap-3 md:grid-cols-2">
+          <BillingCard
+            environment="Production"
+            record={organization.billing.production}
+            sponsorship={sponsorship.data?.production}
+          />
+          <BillingCard
+            environment="Sandbox"
+            record={organization.billing.sandbox}
+            sponsorship={sponsorship.data?.sandbox}
+          />
+        </div>
+        {sponsorship.error ? (
+          <SectionError error={sponsorship.error} onRetry={() => sponsorship.refetch()} />
+        ) : null}
+      </section>
+
+      <WebhooksCard query={webhooks} />
+
+      <div className="grid items-start gap-6 lg:grid-cols-2">
+        <ResourceList
+          empty="No members."
+          error={members.error}
+          initialLoading={members.isPending}
+          loading={members.isFetchingNextPage}
+          more={members.hasNextPage}
+          onMore={() => members.fetchNextPage()}
+          onRetry={() =>
+            members.isFetchNextPageError ? members.fetchNextPage() : members.refetch()
+          }
+          title="Members"
+        >
+          {memberRecords.map((member) => (
+            <Rows.Row className="min-h-[60px] py-3" key={member.userId} style={{ height: 'auto' }}>
+              <span className="flex min-w-0 flex-1 flex-col gap-1">
+                <Link
+                  className="truncate text-label-14 text-foreground hover:underline"
+                  search={Organizations.searchParameters({ query: member.userId })}
+                  to="/organizations"
+                >
+                  {member.email ?? member.userId}
+                </Link>
+                <span className="truncate font-mono text-label-12 text-foreground-secondary">
+                  {member.email ? member.userId : (member.address ?? 'No email or address')}
+                </span>
+              </span>
+              <span className="shrink-0 text-label-12 capitalize text-foreground-secondary">
+                {member.role}
+              </span>
+            </Rows.Row>
+          ))}
+        </ResourceList>
+
+        <ResourceList
+          empty="No projects."
+          error={projects.error}
+          initialLoading={projects.isPending}
+          loading={projects.isFetchingNextPage}
+          more={projects.hasNextPage}
+          onMore={() => projects.fetchNextPage()}
+          onRetry={() =>
+            projects.isFetchNextPageError ? projects.fetchNextPage() : projects.refetch()
+          }
+          title="Projects"
+        >
+          {projectRecords.map((project) => (
+            <Rows.Row className="min-h-[60px] py-3" key={project.id} style={{ height: 'auto' }}>
+              <span className="flex min-w-0 flex-1 flex-col gap-1">
+                <Link
+                  className="truncate text-label-14 text-foreground hover:underline"
+                  search={{ orgId, projectId: project.id }}
+                  to="/api-keys"
+                >
+                  {project.name}
+                </Link>
+                <span className="truncate font-mono text-label-12 text-foreground-secondary">
+                  {project.id}
+                </span>
+              </span>
+              <span className="shrink-0 text-label-12 text-foreground-secondary">
+                {formatDate(project.createdAt)}
+              </span>
+            </Rows.Row>
+          ))}
+        </ResourceList>
+      </div>
+    </Page>
+  )
+}
+
+function OrganizationError(options: OrganizationError.Props) {
+  const router = useRouter()
+  const { query } = Route.useSearch()
+  return (
+    <Page
+      title="Organization unavailable"
+      action={
+        <Button
+          render={<Link search={Organizations.searchParameters({ query })} to="/organizations" />}
+        >
+          <ArrowLeft className="size-4" />
+          Organizations
+        </Button>
+      }
+    >
+      <Card className="flex flex-col items-center gap-4 px-6 py-12 text-center">
+        <p className="text-copy-14 text-negative">{options.error.message}</p>
+        <Button
+          onClick={() => {
+            options.reset()
+            void router.invalidate()
+          }}
+        >
+          Try again
+        </Button>
+      </Card>
+    </Page>
+  )
+}
+
+declare namespace OrganizationError {
+  type Props = ErrorComponentProps
+}
+
+function Summary(options: Summary.Props) {
+  return (
+    <div className="flex min-h-24 min-w-0 flex-col justify-between gap-3 bg-surface p-4">
+      <dt className="text-label-12 text-foreground-secondary">{options.label}</dt>
+      <dd className="truncate text-label-14 text-foreground">{options.children}</dd>
+    </div>
+  )
+}
+
+declare namespace Summary {
+  type Props = { children: React.ReactNode; label: string }
+}
+
+function OperationalMetric(options: OperationalMetric.Props) {
+  return (
+    <div className="flex min-h-28 flex-col justify-between gap-3 bg-surface p-4">
+      <span className="text-label-12 text-foreground-secondary">{options.label}</span>
+      <span
+        className={
+          options.error ? 'text-label-13 text-negative' : 'text-heading-24 text-foreground'
+        }
+      >
+        {options.error ? 'Unavailable' : options.loading ? '—' : (options.value ?? '0')}
+      </span>
+    </div>
+  )
+}
+
+declare namespace OperationalMetric {
+  type Props = {
+    error: Error | null
+    label: string
+    loading: boolean
+    value: string | undefined
+  }
+}
+
+function UsageCard(options: UsageCard.Props) {
+  const usage = options.query.data
+  return (
+    <section className="flex min-w-0 flex-col gap-3">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-heading-18 text-foreground">API usage</h2>
+        <Select
+          aria-label="API usage window"
+          items={usagePeriodItems}
+          onChange={(value) => options.onPeriodChange(value as Organizations.usage.Period)}
+          value={options.period}
+        />
+      </div>
+      <Card>
+        {options.query.isPending ? (
+          <Notice>Loading API usage…</Notice>
+        ) : options.query.error ? (
+          <SectionError error={options.query.error} onRetry={() => options.query.refetch()} />
+        ) : usage ? (
+          <div className="flex flex-col gap-5 p-4">
+            <dl className="grid grid-cols-3 gap-4">
+              <Detail label="Requests">{usage.totals.requests.toLocaleString()}</Detail>
+              <Detail label="Errors">{usage.totals.errors.toLocaleString()}</Detail>
+              <Detail label="Average latency">{usage.totals.averageDurationMs} ms</Detail>
+            </dl>
+            <div className="border-t border-border pt-4">
+              <p className="mb-2 text-label-12 text-foreground-secondary">Errors by code</p>
+              <div className="flex flex-wrap gap-2">
+                {usage.byError.length ? (
+                  usage.byError.map((entry) => (
+                    <span
+                      className="border border-border px-2 py-1 text-label-12 text-foreground"
+                      key={entry.code}
+                    >
+                      {entry.code}: {entry.requests.toLocaleString()}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-label-13 text-foreground-secondary">No API errors.</span>
+                )}
+              </div>
+            </div>
+            <div className="border-t border-border pt-4">
+              <p className="mb-2 text-label-12 text-foreground-secondary">Busiest routes</p>
+              <div className="flex flex-col gap-2">
+                {usage.byRoute.slice(0, 5).map((entry) => (
+                  <div
+                    className="flex items-center justify-between gap-3 text-label-13"
+                    key={entry.route}
+                  >
+                    <code className="truncate text-foreground">{entry.route}</code>
+                    <span className="shrink-0 text-foreground-secondary">
+                      {countLabel(entry.requests, 'request')}, {countLabel(entry.errors, 'error')}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </Card>
+    </section>
+  )
+}
+
+declare namespace UsageCard {
+  type Props = {
+    onPeriodChange: (period: Organizations.usage.Period) => void
+    period: Organizations.usage.Period
+    query: UseQueryResult<Organizations.Usage, Error>
+  }
+}
+
+function ApiKeysCard(options: ApiKeysCard.Props) {
+  const keys = options.query.data?.data ?? []
+  return (
+    <section className="flex min-w-0 flex-col gap-3">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-heading-18 text-foreground">Active API keys</h2>
+        <Link
+          className="text-label-13 text-foreground-secondary hover:text-foreground"
+          search={{ orgId: options.orgId }}
+          to="/api-keys"
+        >
+          View all
+        </Link>
+      </div>
+      <Card>
+        {options.query.isPending ? (
+          <Notice>Loading API keys…</Notice>
+        ) : options.query.error ? (
+          <SectionError error={options.query.error} onRetry={() => options.query.refetch()} />
+        ) : keys.length === 0 ? (
+          <Notice>No API keys.</Notice>
+        ) : (
+          <Rows variant="surface">
+            {keys.slice(0, 5).map((key) => (
+              <Rows.Row className="min-h-[64px] py-3" key={key.id} style={{ height: 'auto' }}>
+                <span className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span className="truncate text-label-14 text-foreground">
+                    {key.name ?? key.id}
+                  </span>
+                  <span className="truncate text-label-12 text-foreground-secondary">
+                    {key.environment} · {key.scopes.join(', ')}
+                  </span>
+                  <span className="truncate text-label-12 text-foreground-secondary">
+                    Created by {key.createdBy ?? 'unknown'}
+                  </span>
+                </span>
+              </Rows.Row>
+            ))}
+          </Rows>
+        )}
+      </Card>
+    </section>
+  )
+}
+
+declare namespace ApiKeysCard {
+  type Props = {
+    orgId: string
+    query: UseQueryResult<{ data: readonly Organizations.ApiKey[] }, Error>
+  }
+}
+
+function WebhooksCard(options: WebhooksCard.Props) {
+  const data = options.query.data
+  return (
+    <section className="flex min-w-0 flex-col gap-3">
+      <div className="flex items-end justify-between gap-3">
+        <h2 className="text-heading-18 text-foreground">Webhooks</h2>
+        {data ? (
+          <span className="text-label-12 text-foreground-secondary">
+            {countLabel(data.subscriptions.length, 'subscription')} ·{' '}
+            {countLabel(data.failureCount, 'failure')} in 7 days
+          </span>
+        ) : null}
+      </div>
+      <Card>
+        {options.query.isPending ? (
+          <Notice>Loading webhook health…</Notice>
+        ) : options.query.error ? (
+          <SectionError error={options.query.error} onRetry={() => options.query.refetch()} />
+        ) : !data || data.subscriptions.length === 0 ? (
+          <Notice>No webhooks.</Notice>
+        ) : (
+          <Rows variant="surface">
+            {data.subscriptions.map((subscription) => (
+              <Rows.Row
+                className="min-h-[64px] py-3"
+                key={subscription.id}
+                style={{ height: 'auto' }}
+              >
+                <span className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span className="truncate text-label-14 text-foreground">
+                    {subscription.eventType}
+                  </span>
+                  <span className="truncate font-mono text-label-12 text-foreground-secondary">
+                    {subscription.destination}
+                  </span>
+                </span>
+                <span className="flex shrink-0 flex-col items-end gap-1 text-label-12 text-foreground-secondary">
+                  <span className="capitalize">{subscription.status}</span>
+                  <span className={subscription.failureCount ? 'text-negative' : undefined}>
+                    {subscription.failureCount} failures
+                  </span>
+                </span>
+              </Rows.Row>
+            ))}
+          </Rows>
+        )}
+      </Card>
+      {data?.failures.length ? (
+        <Card className="p-4">
+          <p className="mb-3 text-label-12 text-foreground-secondary">Latest delivery failures</p>
+          <div className="flex flex-col gap-3">
+            {data.failures.slice(0, 5).map((failure) => (
+              <div
+                className="flex items-start justify-between gap-4 text-label-13"
+                key={failure.id}
+              >
+                <span className="min-w-0 truncate text-negative">
+                  {failure.responseStatus ?? 'Network'} · {failure.error ?? 'Delivery failed'}
+                </span>
+                <span className="shrink-0 text-foreground-secondary">
+                  {formatDate(failure.createdAt)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      ) : null}
+    </section>
+  )
+}
+
+declare namespace WebhooksCard {
+  type Props = { query: UseQueryResult<Organizations.Webhooks, Error> }
+}
+
+function SectionError(options: SectionError.Props) {
+  return (
+    <div className="flex items-center gap-3 p-4 text-copy-14 text-negative" role="alert">
+      <span>{options.error.message}</span>
+      <Button onClick={options.onRetry}>Retry</Button>
+    </div>
+  )
+}
+
+declare namespace SectionError {
+  type Props = { error: Error; onRetry: () => unknown }
+}
+
+function BillingCard(options: BillingCard.Props) {
+  const { settings, source } = options.record
+  const remaining =
+    settings?.spendLimit && options.sponsorship
+      ? Math.max(
+          Number(settings.spendLimit) - Number(options.sponsorship.committedSpend),
+          0,
+        ).toString()
+      : undefined
+  return (
+    <Card className="flex flex-col gap-5 p-4">
+      <div className="flex items-center justify-between gap-3">
+        <h3 className="text-label-14 text-foreground">{options.environment}</h3>
+        <span className="text-label-12 capitalize text-foreground-secondary">
+          {source?.status ?? 'No billing source'}
+        </span>
+      </div>
+      <dl className="grid grid-cols-2 gap-4">
+        <Detail label="Stripe customer">{source?.stripeCustomerId ?? '—'}</Detail>
+        <Detail label="Spend period">
+          {options.sponsorship ? periodLabel(options.sponsorship.period) : '—'}
+        </Detail>
+        <Detail label="Spend limit">{formatMoney(settings?.spendLimit, settings?.currency)}</Detail>
+        <Detail label="Committed spend">
+          {options.sponsorship
+            ? formatMoney(options.sponsorship.committedSpend, options.sponsorship.currency)
+            : '—'}
+        </Detail>
+        <Detail label="Limit remaining">{formatMoney(remaining, settings?.currency)}</Detail>
+        <Detail label="Transaction limit">
+          {formatMoney(settings?.txFeeLimit, settings?.currency)}
+        </Detail>
+      </dl>
+    </Card>
+  )
+}
+
+declare namespace BillingCard {
+  type Props = {
+    environment: string
+    record: Organizations.Detail['billing']['production']
+    sponsorship?: Organizations.Sponsorship['production'] | undefined
+  }
+}
+
+function Detail(options: Detail.Props) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-label-12 text-foreground-secondary">{options.label}</dt>
+      <dd className="mt-1 truncate text-label-13 text-foreground">{options.children}</dd>
+    </div>
+  )
+}
+
+declare namespace Detail {
+  type Props = { children: React.ReactNode; label: string }
+}
+
+function ResourceList(options: ResourceList.Props) {
+  const empty = Array.isArray(options.children) && options.children.length === 0
+  return (
+    <section className="flex min-w-0 flex-col gap-3">
+      <h2 className="text-heading-18 text-foreground">{options.title}</h2>
+      <Card>
+        {options.initialLoading ? (
+          <Notice>Loading {options.title.toLowerCase()}…</Notice>
+        ) : options.error && empty ? (
+          <div className="flex flex-col items-center gap-4 px-6 py-12 text-center" role="alert">
+            <p className="text-copy-14 text-negative">{options.error.message}</p>
+            <Button onClick={options.onRetry}>Retry</Button>
+          </div>
+        ) : empty ? (
+          <Notice>{options.empty}</Notice>
+        ) : (
+          <Rows variant="surface">{options.children}</Rows>
+        )}
+      </Card>
+      {options.error && !empty ? (
+        <div className="flex items-center gap-3 text-copy-14 text-negative" role="alert">
+          <span>{options.error.message}</span>
+          <Button onClick={options.onRetry}>Retry</Button>
+        </div>
+      ) : options.more ? (
+        <Button className="self-start" loading={options.loading} onClick={options.onMore}>
+          Load more
+        </Button>
+      ) : null}
+    </section>
+  )
+}
+
+declare namespace ResourceList {
+  type Props = {
+    children: React.ReactNode
+    empty: string
+    error: Error | null
+    initialLoading: boolean
+    loading: boolean
+    more: boolean
+    onMore: () => unknown
+    onRetry: () => unknown
+    title: string
+  }
+}
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date(value))
+}
+
+function formatDateTime(value: number) {
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'medium' }).format(value)
+}
+
+function formatTime(value: number) {
+  return new Intl.DateTimeFormat('en', { timeStyle: 'medium' }).format(value)
+}
+
+function formatMoney(value: string | null | undefined, currency: string | undefined) {
+  if (value === null || value === undefined) return '—'
+  return new Intl.NumberFormat('en', {
+    currency: currency?.toUpperCase() ?? 'USD',
+    style: 'currency',
+  }).format(Number(value))
+}
+
+function formatPercent(part: number, total: number) {
+  if (total === 0) return '0%'
+  return new Intl.NumberFormat('en', { maximumFractionDigits: 1, style: 'percent' }).format(
+    part / total,
+  )
+}
+
+function periodLabel(period: Organizations.Sponsorship['production']['period']) {
+  if (period === 'month') return 'Current month'
+  return period
+}
+
+function countLabel(count: number, label: string) {
+  return `${count.toLocaleString()} ${label}${count === 1 ? '' : 's'}`
+}
+
+function oldestUpdatedAt(values: readonly number[]) {
+  const updated = values.filter((value) => value > 0)
+  if (updated.length === 0) return undefined
+  return Math.min(...updated)
+}
+
+const usagePeriods = {
+  '24h': { label: '24 hours' },
+  '30d': { label: '30 days' },
+  '7d': { label: '7 days' },
+} as const
+
+const usagePeriodItems = [
+  { label: '24 hours', value: '24h' },
+  { label: '7 days', value: '7d' },
+  { label: '30 days', value: '30d' },
+]