feat: add subscription UI, plan-based nav gating, and client subscription page

- Add plan field to UserInfo shared type
- Subscription API client and React Query hooks
- Client subscription page with status + payment history
- Sidebar navigation filtered by tenant plan features
- Subscription link added to navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/lib/api/subscription.ts

@@ -0,0 +1,44 @@
+import { apiClient } from './client';
+
+export interface Subscription {
+  id: string;
+  tenantId: string;
+  plan: string;
+  status: string;
+  amount: string;
+  frequency: string;
+  mpPreapprovalId: string | null;
+  createdAt: string;
+}
+
+export interface Payment {
+  id: string;
+  tenantId: string;
+  subscriptionId: string | null;
+  mpPaymentId: string | null;
+  amount: string;
+  status: string;
+  paymentMethod: string | null;
+  paidAt: string | null;
+  createdAt: string;
+}
+
+export async function getSubscription(tenantId: string): Promise<Subscription> {
+  const response = await apiClient.get<Subscription>(`/subscriptions/${tenantId}`);
+  return response.data;
+}
+
+export async function generatePaymentLink(tenantId: string): Promise<{ paymentUrl: string }> {
+  const response = await apiClient.post<{ paymentUrl: string }>(`/subscriptions/${tenantId}/generate-link`);
+  return response.data;
+}
+
+export async function markAsPaid(tenantId: string, amount: number): Promise<Payment> {
+  const response = await apiClient.post<Payment>(`/subscriptions/${tenantId}/mark-paid`, { amount });
+  return response.data;
+}
+
+export async function getPaymentHistory(tenantId: string): Promise<Payment[]> {
+  const response = await apiClient.get<Payment[]>(`/subscriptions/${tenantId}/payments`);
+  return response.data;
+}

apps/web/lib/hooks/use-subscription.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import * as subscriptionApi from '../api/subscription';
+
+export function useSubscription(tenantId: string | undefined) {
+  return useQuery({
+    queryKey: ['subscription', tenantId],
+    queryFn: () => subscriptionApi.getSubscription(tenantId!),
+    enabled: !!tenantId,
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function usePaymentHistory(tenantId: string | undefined) {
+  return useQuery({
+    queryKey: ['payments', tenantId],
+    queryFn: () => subscriptionApi.getPaymentHistory(tenantId!),
+    enabled: !!tenantId,
+    staleTime: 60 * 1000,
+  });
+}
+
+export function useGeneratePaymentLink() {
+  return useMutation({
+    mutationFn: (tenantId: string) => subscriptionApi.generatePaymentLink(tenantId),
+  });
+}
+
+export function useMarkAsPaid() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ tenantId, amount }: { tenantId: string; amount: number }) =>
+      subscriptionApi.markAsPaid(tenantId, amount),
+    onSuccess: (_, { tenantId }) => {
+      queryClient.invalidateQueries({ queryKey: ['subscription', tenantId] });
+      queryClient.invalidateQueries({ queryKey: ['payments', tenantId] });
+    },
+  });
+}