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/components/layouts/sidebar.tsx

@@ -16,23 +16,33 @@ import {
   Users,
   Building2,
   UserCog,
+  CreditCard,
 } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { logout } from '@/lib/api/auth';
 import { useRouter } from 'next/navigation';
+import { hasFeature, type Plan } from '@horux/shared';
 
-const navigation = [
+interface NavItem {
+  name: string;
+  href: string;
+  icon: typeof LayoutDashboard;
+  feature?: string; // Required plan feature — hidden if tenant's plan lacks it
+}
+
+const navigation: NavItem[] = [
   { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
   { name: 'CFDI', href: '/cfdi', icon: FileText },
   { name: 'Impuestos', href: '/impuestos', icon: Calculator },
-  { name: 'Reportes', href: '/reportes', icon: BarChart3 },
-  { name: 'Calendario', href: '/calendario', icon: Calendar },
-  { name: 'Alertas', href: '/alertas', icon: Bell },
+  { name: 'Reportes', href: '/reportes', icon: BarChart3, feature: 'reportes' },
+  { name: 'Calendario', href: '/calendario', icon: Calendar, feature: 'calendario' },
+  { name: 'Alertas', href: '/alertas', icon: Bell, feature: 'alertas' },
   { name: 'Usuarios', href: '/usuarios', icon: Users },
+  { name: 'Suscripción', href: '/configuracion/suscripcion', icon: CreditCard },
   { name: 'Configuracion', href: '/configuracion', icon: Settings },
 ];
 
-const adminNavigation = [
+const adminNavigation: NavItem[] = [
   { name: 'Clientes', href: '/clientes', icon: Building2 },
   { name: 'Admin Usuarios', href: '/admin/usuarios', icon: UserCog },
 ];
@@ -53,9 +63,15 @@ export function Sidebar() {
     }
   };
 
+  // Filter navigation based on tenant plan features
+  const plan = (user?.plan || 'starter') as Plan;
+  const filteredNav = navigation.filter(
+    (item) => !item.feature || hasFeature(plan, item.feature)
+  );
+
   const allNavigation = user?.role === 'admin'
-    ? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
-    : navigation;
+    ? [...filteredNav.slice(0, -1), ...adminNavigation, filteredNav[filteredNav.length - 1]]
+    : filteredNav;
 
   return (
     <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card">