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/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] });
+    },
+  });
+}