From 38cdbe57e1eb959afb299289f154bcfe3ae2678d Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Tue, 17 Jun 2025 08:11:39 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9B=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[consumerId]/app-consumer-index.tsx       | 57 +++++++++++++++++++
 .../app/app/consumers/[consumerId]/page.tsx   | 13 +++++
 2 files changed, 70 insertions(+)
 create mode 100644 apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
 create mode 100644 apps/web/src/app/app/consumers/[consumerId]/page.tsx

diff --git a/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx b/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
new file mode 100644
index 00000000..b80743c7
--- /dev/null
+++ b/apps/web/src/app/app/consumers/[consumerId]/app-consumer-index.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { useAuthenticatedAgentic } from '@/components/agentic-provider'
+import { LoadingIndicator } from '@/components/loading-indicator'
+import { toastError } from '@/lib/notifications'
+
+export function AppConsumerIndex({ consumerId }: { consumerId: string }) {
+  const ctx = useAuthenticatedAgentic()
+  const {
+    data: consumer,
+    isLoading,
+    isError
+  } = useQuery({
+    queryKey: ['consumer', consumerId],
+    queryFn: () =>
+      ctx!.api
+        .getConsumer({
+          consumerId,
+          populate: ['project']
+        })
+        .catch((err: any) => {
+          void toastError(
+            `Failed to fetch customer subscription "${consumerId}"`
+          )
+          throw err
+        }),
+    enabled: !!ctx
+  })
+
+  return (
+    <section>
+      {!ctx || isLoading ? (
+        <LoadingIndicator />
+      ) : isError ? (
+        <p>Error fetching customer subscription "{consumerId}"</p>
+      ) : !consumer ? (
+        <p>Customer subscription "{consumerId}" not found</p>
+      ) : (
+        <>
+          <h1
+            className='text-center text-balance leading-snug md:leading-none
+        text-4xl font-extrabold tracking-tight
+        '
+          >
+            Subscription to {consumer.project.name}
+          </h1>
+
+          <div className='mt-8'>
+            <pre className='max-w-lg'>{JSON.stringify(consumer, null, 2)}</pre>
+          </div>
+        </>
+      )}
+    </section>
+  )
+}
diff --git a/apps/web/src/app/app/consumers/[consumerId]/page.tsx b/apps/web/src/app/app/consumers/[consumerId]/page.tsx
new file mode 100644
index 00000000..e290bfe9
--- /dev/null
+++ b/apps/web/src/app/app/consumers/[consumerId]/page.tsx
@@ -0,0 +1,13 @@
+import { AppConsumerIndex } from './app-consumer-index'
+
+export default async function AppConsumerIndexPage({
+  params
+}: {
+  params: Promise<{
+    consumerId: string
+  }>
+}) {
+  const { consumerId } = await params
+
+  return <AppConsumerIndex consumerId={consumerId} />
+}