@allbluecn/admin-app 0.1.0

package/src/routes/_nav/billing/invoices/route.lazy.tsx

@@ -0,0 +1,86 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { formatDate } from 'date-fns'
+import type React from 'react'
+
+export const Route = createLazyFileRoute('/_nav/billing/invoices')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: InvoicesList,
+})
+
+function InvoicesList(): React.ReactElement {
+  const { t } = useTranslation('admin-billing')
+  const { items } = Route.useLoaderData() as {
+    items: Array<{
+      id: string
+      subscription?: { workspace?: { name?: string } | null } | null
+      periodStart: string
+      currency: string
+      amountDue: number
+      status: string
+    }>
+  }
+
+  return (
+    <div>
+      <div className="rounded-lg border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50">
+              <th className="text-left px-4 py-2 font-medium">
+                {t('subscription.workspace')}
+              </th>
+              <th className="text-left px-4 py-2 font-medium">
+                {t('subscription.invoiceDate')}
+              </th>
+              <th className="text-right px-4 py-2 font-medium">
+                {t('subscription.invoiceAmount')}
+              </th>
+              <th className="text-center px-4 py-2 font-medium">
+                {t('subscription.invoiceStatus')}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((inv) => (
+              <tr key={inv.id} className="border-t border-border">
+                <td className="px-4 py-2">
+                  {inv.subscription?.workspace?.name || '—'}
+                </td>
+                <td className="px-4 py-2">
+                  {formatDate(inv.periodStart, 'yyyy-MM-dd')}
+                </td>
+                <td className="px-4 py-2 text-right">
+                  {t(`invoice.${inv.currency === 'usd' ? 'usd' : 'cny'}`)}
+                  {(inv.amountDue / 100).toFixed(2)}
+                </td>
+                <td className="px-4 py-2 text-center">{inv.status}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/billing/invoices/route.tsx

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+import { listAllInvoicesFn } from '@/server/serverFns/admin-billing'
+
+export const Route = createFileRoute('/_nav/billing/invoices')({
+  loader: async () => {
+    return listAllInvoicesFn({ data: { page: 1, pageSize: 20 } })
+  },
+})

package/src/routes/_nav/billing/route.lazy.tsx

@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute, Outlet, useMatches } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import type React from 'react'
+
+export const Route = createLazyFileRoute('/_nav/billing')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: BillingLazyLayout,
+})
+
+function BillingLazyLayout() {
+  const { t } = useTranslation('admin-billing')
+  const matches = useMatches()
+  const lastMatch = matches[matches.length - 1]
+  const isIndex = lastMatch?.routeId === '/_nav/billing'
+
+  return (
+    <div className="space-y-4 p-6">
+      <h1 className="text-2xl font-bold">{t('page.title')}</h1>
+      {isIndex && (
+        <p className="text-sm text-muted-foreground">
+          {t('page.selectSubmenu')}
+        </p>
+      )}
+      <Outlet />
+    </div>
+  )
+}

package/src/routes/_nav/billing/route.tsx

@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+import type React from 'react'
+
+export const Route = createFileRoute('/_nav/billing')({
+  component: BillingLayout,
+})
+
+function BillingLayout(): React.ReactElement {
+  return <div className="p-6 space-y-4" />
+}

package/src/routes/_nav/billing/subscriptions/$subscriptionId/route.lazy.tsx

@@ -0,0 +1,160 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { formatDate } from 'date-fns'
+import type React from 'react'
+
+export const Route = createLazyFileRoute('/_nav/billing/subscriptions/$subscriptionId')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: SubscriptionDetail,
+})
+
+function SubscriptionDetail(): React.ReactElement {
+  const { t } = useTranslation('admin-billing')
+  const detail = Route.useLoaderData() as {
+    id: string
+    workspace?: { name?: string } | null
+    plan?: { name?: string } | null
+    status: string
+    seats: number
+    currentPeriodStart?: string | null
+    currentPeriodEnd?: string | null
+    providerSubscriptionId?: string | null
+    invoices: Array<{
+      id: string
+      periodStart: string
+      currency: string
+      amountDue: number
+      status: string
+    }>
+  } | null
+
+  if (!detail) {
+    return <div className="text-muted-foreground">{t('subscription.notFound')}</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Link to="/billing/subscriptions" className="text-primary hover:underline">
+          ← {t('subscription.back')}
+        </Link>
+        <h2 className="text-xl font-bold">{t('subscription.detailTitle')}</h2>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 rounded-lg border border-border p-4">
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.workspace')}
+          </p>
+          <p className="font-medium">{detail.workspace?.name || '—'}</p>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.plan')}
+          </p>
+          <p className="font-medium">{detail.plan?.name || '—'}</p>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.status')}
+          </p>
+          <p className="font-medium">{detail.status}</p>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.seats')}
+          </p>
+          <p className="font-medium">{detail.seats}</p>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.periodStart')}
+          </p>
+          <p className="font-medium">
+            {detail.currentPeriodStart
+              ? formatDate(detail.currentPeriodStart, 'yyyy-MM-dd')
+              : '—'}
+          </p>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground">
+            {t('subscription.periodEnd')}
+          </p>
+          <p className="font-medium">
+            {detail.currentPeriodEnd
+              ? formatDate(detail.currentPeriodEnd, 'yyyy-MM-dd')
+              : '—'}
+          </p>
+        </div>
+        {detail.providerSubscriptionId && (
+          <div>
+            <p className="text-sm text-muted-foreground">
+              {t('subscription.providerSubscription')}
+            </p>
+            <p className="font-medium">{detail.providerSubscriptionId}</p>
+          </div>
+        )}
+      </div>
+
+      {detail.invoices.length > 0 && (
+        <div>
+          <h3 className="text-lg font-semibold mb-4">
+            {t('subscription.invoicesTitle')}
+          </h3>
+          <div className="rounded-lg border border-border overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-muted/50">
+                  <th className="text-left px-4 py-2 font-medium">
+                    {t('subscription.invoiceDate')}
+                  </th>
+                  <th className="text-right px-4 py-2 font-medium">
+                    {t('subscription.invoiceAmount')}
+                  </th>
+                  <th className="text-center px-4 py-2 font-medium">
+                    {t('subscription.invoiceStatus')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {detail.invoices.map((inv) => (
+                  <tr key={inv.id} className="border-t border-border">
+                    <td className="px-4 py-2">
+                      {formatDate(inv.periodStart, 'yyyy-MM-dd')}
+                    </td>
+                    <td className="px-4 py-2 text-right">
+                      {t(`invoice.${inv.currency === 'usd' ? 'usd' : 'cny'}`)}
+                      {(inv.amountDue / 100).toFixed(2)}
+                    </td>
+                    <td className="px-4 py-2 text-center">{inv.status}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routes/_nav/billing/subscriptions/$subscriptionId/route.tsx

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+import { getSubscriptionDetailFn } from '@/server/serverFns/admin-billing'
+
+export const Route = createFileRoute('/_nav/billing/subscriptions/$subscriptionId')({
+  loader: async ({ params }) => {
+    return getSubscriptionDetailFn({ data: { subscriptionId: params.subscriptionId } })
+  },
+})

package/src/routes/_nav/billing/subscriptions/route.lazy.tsx

@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { formatDate } from 'date-fns'
+import type React from 'react'
+
+export const Route = createLazyFileRoute('/_nav/billing/subscriptions')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: SubscriptionsList,
+})
+
+function SubscriptionsList(): React.ReactElement {
+  const { t } = useTranslation('admin-billing')
+  const { items, total } = Route.useLoaderData() as {
+    items: Array<{
+      id: string
+      workspace?: { name?: string } | null
+      plan?: { name?: string } | null
+      status: string
+      seats: number
+      currentPeriodEnd?: string | null
+    }>
+    total: number
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {t('subscription.count', { count: total })}
+        </p>
+      </div>
+      <div className="rounded-lg border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50">
+              <th className="text-left px-4 py-2 font-medium">
+                {t('subscription.workspace')}
+              </th>
+              <th className="text-left px-4 py-2 font-medium">
+                {t('subscription.plan')}
+              </th>
+              <th className="text-center px-4 py-2 font-medium">
+                {t('subscription.status')}
+              </th>
+              <th className="text-center px-4 py-2 font-medium">
+                {t('subscription.seats')}
+              </th>
+              <th className="text-left px-4 py-2 font-medium">
+                {t('subscription.expires')}
+              </th>
+              <th className="text-right px-4 py-2 font-medium">
+                {t('subscription.action')}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((sub) => (
+              <tr key={sub.id} className="border-t border-border">
+                <td className="px-4 py-2">
+                  <Link
+                    to="/billing/subscriptions/$subscriptionId"
+                    params={{ subscriptionId: sub.id }}
+                    className="text-primary hover:underline"
+                  >
+                    {sub.workspace?.name || '—'}
+                  </Link>
+                </td>
+                <td className="px-4 py-2">{sub.plan?.name || '—'}</td>
+                <td className="px-4 py-2 text-center">{sub.status}</td>
+                <td className="px-4 py-2 text-center">{sub.seats}</td>
+                <td className="px-4 py-2">
+                  {sub.currentPeriodEnd
+                    ? formatDate(sub.currentPeriodEnd, 'yyyy-MM-dd')
+                    : '—'}
+                </td>
+                <td className="px-4 py-2 text-right">
+                  <Link
+                    to="/billing/subscriptions/$subscriptionId"
+                    params={{ subscriptionId: sub.id }}
+                    className="text-primary hover:underline"
+                  >
+                    {t('subscription.detail')}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/billing/subscriptions/route.tsx

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+import { listAllSubscriptionsFn } from '@/server/serverFns/admin-billing'
+
+export const Route = createFileRoute('/_nav/billing/subscriptions')({
+  loader: async () => {
+    const result = await listAllSubscriptionsFn({
+      data: { page: 1, pageSize: 20 },
+    })
+    return result
+  },
+})