commit f982a07b55eb380a7e6888f98fb6d5ee3d40ff7a
Author: xiaohei <xiaohei@taiji-ai.com>
Date:   Thu Dec 25 07:58:59 2025 +0000

    初始提交：完整的API客户端对接和前端项目

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f650315
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
\ No newline at end of file
diff --git a/app/admin/dashboard/loading.tsx b/app/admin/dashboard/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/admin/dashboard/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx
new file mode 100644
index 0000000..ae16e8d
--- /dev/null
+++ b/app/admin/dashboard/page.tsx
@@ -0,0 +1,3003 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Shield,
+  Users,
+  DollarSign,
+  Activity,
+  Database,
+  TrendingUp,
+  AlertTriangle,
+  Search,
+  MoreVertical,
+  Globe,
+  LogOut,
+  Settings,
+  BarChart3,
+  Clock,
+  Building2,
+  Plus,
+  Eye,
+  Edit,
+  Trash2,
+  Zap,
+  Cpu,
+  Server,
+  Bot,
+  Check,
+  Calendar,
+  Filter,
+  Download,
+} from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { useLanguage } from "@/hooks/useLanguage" // Declare useLanguage import
+import { Badge } from "@/components/ui/badge"
+
+export default function AdminDashboard() {
+  const router = useRouter()
+  const { language, setLanguage } = useLanguage()
+  const [activeTab, setActiveTab] = useState("overview")
+  const [isAddChannelOpen, setIsAddChannelOpen] = useState(false)
+  // const [isConfigGoodsOpen, setIsConfigGoodsOpen] = useState(false) // REMOVED
+  // const [isAgentAllocationOpen, setIsAgentAllocationOpen] = useState(false) // REMOVED
+  const [isResourceManagementOpen, setIsResourceManagementOpen] = useState(false) // ADDED
+
+  const [isCommissionDialogOpen, setIsCommissionDialogOpen] = useState(false)
+  const [selectedChannel, setSelectedChannel] = useState<(typeof channels)[0] | null>(null)
+  const [selectedModels, setSelectedModels] = useState<string[]>([])
+  // const [monthlyQuota, setMonthlyQuota] = useState<string>(""); // REMOVED
+  const [creditLimit, setCreditLimit] = useState<string>("")
+  const [isSubscriptionDialogOpen, setIsSubscriptionDialogOpen] = useState(false)
+  const [selectedSubscriptionLevel, setSelectedSubscriptionLevel] = useState<string | null>(null)
+  const [commissionRate, setCommissionRate] = useState<string>("")
+  const [selectedTenant, setSelectedTenant] = useState<string | null>(null) // Declare selectedTenant variable
+  const [computeConfigOpen, setComputeConfigOpen] = useState(false) // State for compute configuration dialog
+
+  const [isAddProviderOpen, setIsAddProviderOpen] = useState(false)
+  const [isConfigProviderOpen, setIsConfigProviderOpen] = useState(false)
+  const [providerType, setProviderType] = useState<"model" | "data">("model")
+  const [selectedProvider, setSelectedProvider] = useState<any>(null)
+  const [providerForm, setProviderForm] = useState({
+    name: "",
+    url: "",
+    apiKey: "",
+    models: "",
+    rpm: "",
+    tpm: "",
+  })
+
+  const [selectedAgent, setSelectedAgent] = useState<any>(null) // State for selected agent in resources tab
+  const [customAgentCpu, setCustomAgentCpu] = useState("2")
+  const [customAgentMemory, setCustomAgentMemory] = useState("4")
+
+  // const [isAgentAllocationOpen, setIsAgentAllocationOpen] = useState(false) // REMOVED
+  const [selectedAgents, setSelectedAgents] = useState<string[]>([])
+  const [agentQuantities, setAgentQuantities] = useState<Record<string, number>>({})
+
+  // Billing state
+  const [billingView, setBillingView] = useState<"channel" | "tenant" | "calls">("channel")
+  const [showFilterDialog, setShowFilterDialog] = useState(false)
+  const [showDateDialog, setShowDateDialog] = useState(false)
+  const [showExportDialog, setShowExportDialog] = useState(false)
+
+  const [selectedRole, setSelectedRole] = useState<string | null>(null)
+  const [rolePermissions, setRolePermissions] = useState<{ [key: string]: string[] }>({
+    "billing-admin": ["overview", "channels", "billing"],
+    "operations-admin": ["overview", "channels", "resources", "monitoring"],
+    "super-admin": [
+      "overview",
+      "channels",
+      "resources",
+      "monitoring",
+      "billing",
+      "provider-backend",
+      "channel-backend",
+      "settings",
+    ],
+  })
+
+  const [showAddAdminDialog, setShowAddAdminDialog] = useState(false)
+  const [newAdminForm, setNewAdminForm] = useState({
+    name: "",
+    email: "",
+    password: "",
+    role: "billing-admin",
+  })
+
+  const [providerApprovals, setProviderApprovals] = useState<any[]>([
+    {
+      id: 1,
+      channelName: "Enterprise Solutions Inc",
+      providerName: "Google AI",
+      expectedModels: "gemini-pro, palm-2",
+      reason: "Need Gemini Pro for advanced natural language processing tasks",
+      status: "pending",
+      submittedAt: "2024-01-15 14:30:22",
+    },
+    {
+      id: 2,
+      channelName: "Cloud Partners Asia",
+      providerName: "Azure OpenAI",
+      expectedModels: "gpt-4, gpt-35-turbo",
+      reason: "Regional compliance requirements for Azure infrastructure",
+      status: "pending",
+      submittedAt: "2024-01-14 09:15:45",
+    },
+  ])
+  const [selectedApproval, setSelectedApproval] = useState<any>(null)
+  const [isApprovalDialogOpen, setIsApprovalDialogOpen] = useState(false)
+
+  // Agent申请审批相关状态
+  const [agentApprovals, setAgentApprovals] = useState<any[]>([
+    {
+      id: 1,
+      channelName: "Enterprise Solutions Inc",
+      agentType: "Weather Query Agent",
+      requestedQuantity: 50,
+      reason: "Need weather agents for IoT monitoring platform",
+      status: "pending",
+      submittedAt: "2024-01-15 16:20:10",
+    },
+    {
+      id: 2,
+      channelName: "Cloud Partners Asia",
+      agentType: "Data Analysis Agent",
+      requestedQuantity: 30,
+      reason: "Enterprise data analytics expansion",
+      status: "pending",
+      submittedAt: "2024-01-14 11:45:33",
+    },
+  ])
+  const [selectedAgentApproval, setSelectedAgentApproval] = useState<any>(null)
+  const [isAgentApprovalDialogOpen, setIsAgentApprovalDialogOpen] = useState(false)
+
+  // Simplified t function for demonstration
+  const t = (zh: string, en: string) => (language === "zh" ? zh : en)
+
+  const translations = {
+    en: {
+      title: "Super Admin Console",
+      subtitle: "Platform Control Center",
+      overview: "Overview",
+      channels: "Channels",
+      resources: "Resources",
+      monitoring: "Monitoring",
+      billing: "Billing",
+      settings: "Settings",
+      goodsProviders: "Goods Providers", // renamed from separate model/data providers
+      logout: "Logout",
+      totalTenants: "Total Tenants",
+      totalChannels: "Total Channels",
+      activeTenants: "Active Tenants",
+      totalRevenue: "Total Revenue",
+      systemHealth: "System Health",
+      cpuUsage: "CPU Usage",
+      memoryUsage: "Memory Usage",
+      storageUsage: "Storage Usage",
+      apiRequests: "API Requests/min",
+      recentTenants: "Recent Tenants",
+      tenantName: "Tenant Name",
+      status: "Status",
+      plan: "Plan",
+      usage: "Usage",
+      actions: "Actions",
+      search: "Search tenants...",
+      searchChannels: "Search channels...",
+      active: "Active",
+      enterprise: "Enterprise",
+      professional: "Professional",
+      starter: "Starter",
+      viewDetails: "View Details",
+      suspend: "Suspend",
+      systemMetrics: "System Metrics",
+      healthy: "Healthy",
+      addChannel: "Add Channel",
+      channelName: "Channel Name",
+      channelManagement: "Channel Management",
+      channelDescription: "Manage distribution channels and their tenant portfolios",
+      tenantCount: "Tenants",
+      commission: "Commission Rate",
+      contactPerson: "Contact Person",
+      edit: "Edit",
+      delete: "Delete",
+      createChannel: "Create New Channel",
+      cancel: "Cancel",
+      create: "Create",
+      channelNamePlaceholder: "Enter channel name",
+      contactEmail: "Contact Email",
+      contactPhone: "Contact Phone",
+      commissionRate: "Commission Rate (%)",
+      assignSubscriptionLevel: "Assign Subscription Level",
+      selectedTenantPlaceholder: "Select a tenant",
+      agentHealthMonitoring: "Agent Health Monitoring",
+      agentHealthDesc: "Monitor performance and health status of all platform agents",
+      agentStatus: "Status",
+      cpuUsageLabel: "CPU Usage",
+      memoryUsageLabel: "Memory Usage",
+      responseTime: "Response Time",
+      requestCount: "Request Count",
+      errorRate: "Error Rate",
+      uptime: "Uptime",
+      lastActive: "Last Active",
+      ms: "ms",
+      requests: "requests",
+      warning: "Warning",
+      critical: "Critical",
+      // Added translations for role management
+      userRoleSettings: "User Role Settings",
+      billingAdministrator: "Billing Administrator",
+      responsibleForBilling: "Responsible for billing, invoices, and financial management",
+      operationsAdministrator: "Operations Administrator",
+      responsibleForChannels: "Responsible for channels, resources, and monitoring",
+      superAdministrator: "Super Administrator",
+      fullAccess: "Full access to all platform features",
+      permissions: "permissions",
+      tabAccessPermissions: "Tab Access Permissions",
+      selectTabs: "Select which tabs this role can access",
+      providerBackend: "Provider Backend",
+      channelBackend: "Channel Backend",
+      savePermissions: "Save Permissions",
+      // Added translations for add admin dialog
+      addAdministrator: "Add Administrator",
+      administratorName: "Administrator Name",
+      enterAdministratorName: "Enter administrator name",
+      email: "Email",
+      enterEmailAddress: "Enter email address",
+      password: "Password",
+      setLoginPassword: "Set login password",
+      role: "Role",
+      billingAdmin: "Billing Administrator",
+      operationsAdmin: "Operations Administrator",
+      superAdmin: "Super Administrator",
+      createAdministrator: "Create Administrator",
+      // ADDED translations for billing
+      billingManagement: "Billing Management",
+      dateQuery: "Date Query",
+      filter: "Filter",
+      export: "Export",
+      channelBillingDetails: "Channel Billing Details",
+      channelName: "Channel Name",
+      callCount: "Call Count",
+      totalEU: "Total EU",
+      channelTotal: "Channel Total",
+      billingPeriod: "Billing Period",
+      tenantBillingDetails: "Tenant Billing Details",
+      tenantName: "Tenant Name",
+      channel: "Channel",
+      userTotal: "User Total",
+      averageSpending: "Average Spending",
+      callRecordsDetail: "Call Records Detail",
+      callID: "Call ID",
+      tenant: "Tenant",
+      callTime: "Call Time",
+      durationSeconds: "Duration(s)",
+      singleCallCost: "Single Call Cost",
+      timestamp: "Timestamp",
+      EUCalculationRule: "EU Calculation: 1 EU = 10 seconds call time",
+      // ADDED translations for filter dialog
+      filterOptions: "Filter Options",
+      customerName: "Customer Name",
+      minCalls: "Min Calls",
+      maxCalls: "Max Calls",
+      applyFilter: "Apply Filter",
+      // ADDED translations for date dialog
+      dateTimeRange: "Date & Time Range",
+      startDate: "Start Date & Time (YYYY-MM-DD HH:MM)",
+      endDate: "End Date & Time (YYYY-MM-DD HH:MM)",
+      query: "Query",
+      // ADDED translations for export dialog
+      exportFormat: "Export Format",
+      selectExportFormat: "Select export file format",
+    },
+    zh: {
+      title: "超级管理员控制台",
+      subtitle: "平台控制中心",
+      overview: "概览",
+      channels: "渠道管理",
+      resources: "资源管理",
+      monitoring: "监控",
+      billing: "计费",
+      settings: "设置",
+      goodsProviders: "货源供应商", // renamed from separate model/data providers
+      logout: "退出",
+      totalTenants: "总租户数",
+      totalChannels: "总渠道数",
+      activeTenants: "活跃租户",
+      totalRevenue: "总收入",
+      systemHealth: "系统健康",
+      cpuUsage: "CPU 使用率",
+      memoryUsage: "内存使用率",
+      storageUsage: "存储使用率",
+      apiRequests: "API 请求/分钟",
+      recentTenants: "最近租户",
+      tenantName: "租户名称",
+      status: "状态",
+      plan: "方案",
+      usage: "使用量",
+      actions: "操作",
+      search: "搜索租户...",
+      searchChannels: "搜索渠道...",
+      active: "活跃",
+      enterprise: "企业版",
+      professional: "专业版",
+      starter: "入门版",
+      viewDetails: "查看详情",
+      suspend: "暂停",
+      systemMetrics: "系统指标",
+      healthy: "健康",
+      addChannel: "添加渠道",
+      channelName: "渠道名称",
+      channelManagement: "渠道管理",
+      channelDescription: "管理分销渠道及其租户组合",
+      tenantCount: "租户数",
+      commission: "佣金比例",
+      contactPerson: "联系人",
+      edit: "编辑",
+      delete: "删除",
+      createChannel: "创建新渠道",
+      cancel: "取消",
+      create: "创建",
+      channelNamePlaceholder: "输入渠道名称",
+      contactEmail: "联系邮箱",
+      contactPhone: "联系电话",
+      commissionRate: "佣金比例 (%)",
+      assignSubscriptionLevel: "分配订阅级别",
+      selectedTenantPlaceholder: "选择一个租户",
+      agentHealthMonitoring: "Agent健康监控",
+      agentHealthDesc: "监控所有平台Agent的性能和健康状态",
+      agentStatus: "状态",
+      cpuUsageLabel: "CPU使用率",
+      memoryUsageLabel: "内存使用率",
+      responseTime: "响应时间",
+      requestCount: "请求数量",
+      errorRate: "错误率",
+      uptime: "运行时间",
+      lastActive: "最后活跃",
+      warning: "警告",
+      critical: "严重",
+      // Added translations for role management
+      userRoleSettings: "用户身份设置",
+      billingAdministrator: "计费管理员",
+      responsibleForBilling: "负责平台计费、账单和财务管理",
+      operationsAdministrator: "运营管理员",
+      responsibleForChannels: "负责渠道、资源和系统监控管理",
+      superAdministrator: "超级管理员",
+      fullAccess: "拥有所有权限，管理整个平台",
+      permissions: "个权限",
+      tabAccessPermissions: "标签页访问权限",
+      selectTabs: "选择该角色可以访问的标签页",
+      providerBackend: "供应商管理中心后台",
+      channelBackend: "渠道管理中心后台",
+      savePermissions: "保存权限配置",
+      // Added translations for add admin dialog
+      addAdministrator: "添加管理员",
+      administratorName: "管理员名称",
+      enterAdministratorName: "输入管理员名称",
+      email: "邮箱",
+      enterEmailAddress: "输入邮箱地址",
+      password: "密码",
+      setLoginPassword: "设置登录密码",
+      role: "角色",
+      billingAdmin: "计费管理员",
+      operationsAdmin: "运营管理员",
+      superAdmin: "超级管理员",
+      createAdministrator: "创建管理员",
+      // ADDED translations for billing
+      billingManagement: "计费管理",
+      dateQuery: "时间查询",
+      filter: "筛选",
+      export: "导出",
+      channelBillingDetails: "渠道计费详情",
+      channelName: "渠道名称",
+      callCount: "调用次数",
+      totalEU: "总EU",
+      channelTotal: "渠道总价",
+      billingPeriod: "计费周期",
+      tenantBillingDetails: "租户计费详情",
+      tenantName: "租户名称",
+      channel: "渠道",
+      userTotal: "用户总价",
+      averageSpending: "平均消费",
+      callRecordsDetail: "调用记录明细",
+      callID: "调用ID",
+      tenant: "租户",
+      callTime: "调用时间",
+      durationSeconds: "时长(秒)",
+      singleCallCost: "单次调用总价",
+      timestamp: "时间戳",
+      EUCalculationRule: "EU计算：1 EU = 10秒调用时间",
+      // ADDED translations for filter dialog
+      filterOptions: "筛选选项",
+      customerName: "客户名称",
+      minCalls: "最小调用次数",
+      maxCalls: "最大调用次数",
+      applyFilter: "应用筛选",
+      // ADDED translations for date dialog
+      dateTimeRange: "时间范围",
+      startDate: "开始时间 (年-月-日 时:分)",
+      endDate: "结束时间 (年-月-日 时:分)",
+      query: "查询",
+      // ADDED translations for export dialog
+      exportFormat: "导出格式",
+      selectExportFormat: "选择导出文件格式",
+    },
+  }
+
+  const text = translations[language]
+
+  const agents = [
+    {
+      id: "weather-agent",
+      name: "Weather Query Agent",
+      nameCn: "天气查询代理",
+      status: "healthy",
+      cpuUsage: 45,
+      memoryUsage: 62,
+      responseTime: 120,
+      requestCount: 1520,
+      errorRate: 0.2,
+      uptime: "99.8%",
+      lastActive: "2 mins ago",
+    },
+    {
+      id: "data-agent",
+      name: "Data Analysis Agent",
+      nameCn: "数据分析代理",
+      status: "healthy",
+      cpuUsage: 68,
+      memoryUsage: 75,
+      responseTime: 250,
+      requestCount: 890,
+      errorRate: 0.5,
+      uptime: "99.5%",
+      lastActive: "1 min ago",
+    },
+    {
+      id: "doc-agent",
+      name: "Document Processing Agent",
+      nameCn: "文档处理代理",
+      status: "warning",
+      cpuUsage: 82,
+      memoryUsage: 88,
+      responseTime: 450,
+      requestCount: 650,
+      errorRate: 1.2,
+      uptime: "98.9%",
+      lastActive: "30 secs ago",
+    },
+    {
+      id: "email-agent",
+      name: "Email Management Agent",
+      nameCn: "邮件管理代理",
+      status: "healthy",
+      cpuUsage: 35,
+      memoryUsage: 48,
+      responseTime: 95,
+      requestCount: 2100,
+      errorRate: 0.1,
+      uptime: "99.9%",
+      lastActive: "5 mins ago",
+    },
+    {
+      id: "api-agent",
+      name: "API Integration Agent",
+      nameCn: "API集成代理",
+      status: "critical",
+      cpuUsage: 95,
+      memoryUsage: 92,
+      responseTime: 850,
+      requestCount: 320,
+      errorRate: 3.5,
+      uptime: "96.2%",
+      lastActive: "10 mins ago",
+    },
+    {
+      id: "db-agent",
+      name: "Database Operations Agent",
+      nameCn: "数据库操作代理",
+      status: "healthy",
+      cpuUsage: 52,
+      memoryUsage: 65,
+      responseTime: 180,
+      requestCount: 1100,
+      errorRate: 0.3,
+      uptime: "99.7%",
+      lastActive: "3 mins ago",
+    },
+  ]
+
+  useEffect(() => {
+    const token = localStorage.getItem("admin_token")
+    if (!token) {
+      router.push("/admin/login")
+    }
+  }, [router])
+
+  const handleLogout = () => {
+    localStorage.removeItem("admin_token")
+    router.push("/admin/login")
+  }
+
+  const stats = [
+    {
+      title: text.totalChannels,
+      value: "32",
+      change: "+4 this month",
+      icon: Building2,
+      trend: "up",
+    },
+    {
+      title: text.totalTenants,
+      value: "247",
+      change: "+12.5%",
+      icon: Users,
+      trend: "up",
+    },
+    {
+      title: text.activeTenants,
+      value: "189",
+      change: "+8.2%",
+      icon: Activity,
+      trend: "up",
+    },
+    {
+      title: text.totalRevenue,
+      value: "$124.5K",
+      change: "+23.1%",
+      icon: DollarSign,
+      trend: "up",
+    },
+  ]
+
+  const systemMetrics = [
+    { label: text.cpuUsage, value: 45, max: 100, color: "bg-blue-500" },
+    { label: text.memoryUsage, value: 62, max: 100, color: "bg-green-500" },
+    { label: text.storageUsage, value: 78, max: 100, color: "bg-yellow-500" },
+    { label: text.apiRequests, value: 2847, max: 5000, color: "bg-purple-500" },
+  ]
+
+  const channels = [
+    {
+      id: 1,
+      name: "Enterprise Solutions Inc",
+      tenantCount: 45,
+      revenue: "$45.2K",
+      commission: 15,
+      status: "active",
+      contact: "John Smith",
+      email: "john@enterprise-solutions.com",
+    },
+    {
+      id: 2,
+      name: "Cloud Partners Asia",
+      tenantCount: 38,
+      revenue: "$38.9K",
+      commission: 12,
+      status: "active",
+      contact: "Li Wei",
+      email: "liwei@cloudpartners.cn",
+    },
+    {
+      id: 3,
+      name: "Tech Distribution EU",
+      tenantCount: 52,
+      revenue: "$52.4K",
+      commission: 18,
+      status: "active",
+      contact: "Maria Garcia",
+      email: "maria@techdist.eu",
+    },
+    {
+      id: 4,
+      name: "Digital Resellers Network",
+      tenantCount: 28,
+      revenue: "$28.1K",
+      commission: 10,
+      status: "active",
+      contact: "David Johnson",
+      email: "david@digitalresellers.com",
+    },
+    {
+      id: 5,
+      name: "Global Systems Partners",
+      tenantCount: 34,
+      revenue: "$34.7K",
+      commission: 14,
+      status: "active",
+      contact: "Sarah Chen",
+      email: "sarah@globalsystems.com",
+    },
+    {
+      id: 6,
+      name: "Innovation Hub Americas",
+      tenantCount: 22,
+      revenue: "$22.3K",
+      commission: 11,
+      status: "inactive",
+      contact: "Michael Brown",
+      email: "michael@innovationhub.us",
+    },
+  ]
+
+  const tenants = [
+    { id: 1, name: "Acme Corp", status: "active", plan: "enterprise", usage: 87, revenue: "$2,450" },
+    { id: 2, name: "TechStart Inc", status: "active", plan: "professional", usage: 64, revenue: "$890" },
+    { id: 3, name: "Global Systems", status: "active", plan: "enterprise", usage: 92, revenue: "$3,200" },
+    { id: 4, name: "Innovation Labs", status: "active", plan: "starter", usage: 34, revenue: "$290" },
+    { id: 5, name: "DataFlow Co", status: "active", plan: "professional", usage: 71, revenue: "$1,100" },
+  ]
+
+  // available models and data sources for configuration
+  const availableModels = [
+    { id: "gpt-4", name: "GPT-4", provider: "OpenAI" },
+    { id: "gpt-3.5", name: "GPT-3.5 Turbo", provider: "OpenAI" },
+    { id: "claude-3", name: "Claude 3", provider: "Anthropic" },
+    { id: "claude-2", name: "Claude 2", provider: "Anthropic" },
+    { id: "gemini-pro", name: "Gemini Pro", provider: "Google" },
+    { id: "llama-2", name: "Llama 2", provider: "Meta" },
+  ]
+
+  const availableDataSources = [
+    { id: "rapidapi", name: "RapidAPI", type: "API Hub" },
+    { id: "apihub", name: "API Hub", type: "Data Platform" },
+    { id: "kaggle", name: "Kaggle Datasets", type: "Data Portal" },
+    { id: "huggingface", name: "Hugging Face", type: "ML Data" },
+  ]
+
+  const availableAgents = [
+    { id: "weather-agent", name: "Weather Query Agent", type: "Weather" },
+    { id: "data-analysis-agent", name: "Data Analysis Agent", type: "Analytics" },
+    { id: "doc-processing-agent", name: "Document Processing Agent", type: "Document" },
+    { id: "email-mgmt-agent", name: "Email Management Agent", type: "Email" },
+    { id: "api-integration-agent", name: "API Integration Agent", type: "Integration" },
+    { id: "db-operations-agent", name: "Database Operations Agent", type: "Database" },
+  ]
+
+  // handlers for goods configuration
+  const handleConfigGoods = (channel: (typeof channels)[0]) => {
+    setSelectedChannel(channel)
+    // setIsConfigGoodsOpen(true) // REMOVED
+    setIsResourceManagementOpen(true) // ADDED
+  }
+
+  // const handleSaveGoodsConfig = () => { // REMOVED
+  //   // Handle save logic
+  //   console.log("Saving config for:", selectedChannel?.name)
+  //   console.log("Selected models:", selectedModels)
+  //   console.log("Selected data sources:", selectedDataSources)
+  //   console.log("Monthly quota:", monthlyQuota)
+  //   console.log("Monthly budget:", monthlyBudget)
+
+  //   setIsConfigGoodsOpen(false)
+  //   setSelectedModels([])
+  //   setSelectedDataSources([])
+  //   setMonthlyQuota("")
+  //   setMonthlyBudget("")
+  // }
+
+  const handleEditCommission = (channel: (typeof channels)[0]) => {
+    setSelectedChannel(channel)
+    setCommissionRate(channel.commission.toString())
+    setIsCommissionDialogOpen(true)
+  }
+
+  const handleSaveCommission = () => {
+    console.log("Saving commission for:", selectedChannel?.name)
+    console.log("New commission rate:", commissionRate)
+    setIsCommissionDialogOpen(false)
+    setCommissionRate("")
+  }
+
+  const handleAddProvider = (type: "model" | "data") => {
+    setProviderType(type)
+    setProviderForm({
+      name: "",
+      url: "",
+      apiKey: "",
+      models: "",
+      rpm: "",
+      tpm: "",
+    })
+    setIsAddProviderOpen(true)
+  }
+
+  const handleConfigProvider = (provider: any, type: "model" | "data") => {
+    setProviderType(type)
+    setSelectedProvider(provider)
+    setProviderForm({
+      name: provider.name,
+      url: provider.url || "",
+      apiKey: "••••••••",
+      models: provider.models?.join(", ") || "",
+      rpm: provider.rpm?.toString() || "",
+      tpm: provider.tpm?.toString() || "",
+    })
+    setIsConfigProviderOpen(true)
+  }
+
+  const handleSaveProvider = () => {
+    console.log("Saving provider:", providerForm)
+    setIsAddProviderOpen(false)
+    setIsConfigProviderOpen(false)
+    setProviderForm({
+      name: "",
+      url: "",
+      apiKey: "",
+      models: "",
+      rpm: "",
+      tpm: "",
+    })
+  }
+
+  // const handleAgentAllocation = (channel: (typeof channels)[0]) => { // REMOVED
+  //   setSelectedChannel(channel)
+  //   setSelectedAgents([])
+  //   setAgentQuantities({})
+  //   setIsAgentAllocationOpen(true)
+  // }
+
+  // const handleSaveAgentAllocation = () => { // REMOVED
+  //   console.log("Saving agent allocation for:", selectedChannel?.name)
+  //   console.log("Selected agents:", selectedAgents)
+  //   console.log("Agent quantities:", agentQuantities)
+  //   setIsAgentAllocationOpen(false)
+  //   setSelectedAgents([])
+  //   setAgentQuantities({})
+  // }
+
+  // ADDED: Unified resource management handler
+  const handleResourceManagement = (channel: (typeof channels)[0]) => {
+    setSelectedChannel(channel)
+    setSelectedModels([])
+    setSelectedAgents([])
+    setAgentQuantities({})
+    // setMonthlyQuota("") // REMOVED
+    setCreditLimit("")
+    setCustomAgentCpu("2")
+    setCustomAgentMemory("4")
+    setIsResourceManagementOpen(true)
+  }
+
+  // ADDED: Unified resource management save handler
+  const handleSaveResourceManagement = () => {
+    console.log("Saving resource management for:", selectedChannel?.name)
+    console.log("Selected models:", selectedModels)
+    console.log("Selected agents:", selectedAgents)
+    console.log("Agent quantities:", agentQuantities)
+    // console.log("Monthly quota:", monthlyQuota) // REMOVED
+    console.log("Credit limit:", creditLimit)
+    console.log("Custom Agent CPU:", customAgentCpu)
+    console.log("Custom Agent Memory:", customAgentMemory)
+
+    setIsResourceManagementOpen(false)
+    setSelectedModels([])
+    setSelectedAgents([])
+    setAgentQuantities({})
+    // setMonthlyQuota("") // REMOVED
+    setCreditLimit("")
+  }
+
+  const subscriptionLevels = [
+    {
+      id: "free",
+      name: language === "zh" ? "免费版" : "Free",
+      description: language === "zh" ? "基础功能，有限额度" : "Basic features, limited quota",
+    },
+    {
+      id: "pro",
+      name: language === "zh" ? "专业版" : "Pro",
+      description: language === "zh" ? "高级功能，标准额度" : "Advanced features, standard quota",
+    },
+    {
+      id: "enterprise",
+      name: language === "zh" ? "企业版" : "Enterprise",
+      description: language === "zh" ? "完整功能，无限额度" : "Full features, unlimited quota",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur-sm">
+        <div className="flex items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Shield className="h-6 w-6 text-primary" />
+              <div>
+                <h1 className="text-lg font-bold text-foreground">{text.title}</h1>
+                <p className="text-xs text-muted-foreground">{text.subtitle}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Select value={language} onValueChange={(value: "en" | "zh") => setLanguage(value)}>
+              <SelectTrigger className="w-[120px] bg-background border-border">
+                <Globe className="mr-2 h-4 w-4" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="en">English</SelectItem>
+                <SelectItem value="zh">中文</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLogout}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              {text.logout}
+            </Button>
+          </div>
+        </div>
+
+        {/* Navigation tabs */}
+        <div className="px-6 flex gap-6 border-t border-border overflow-x-auto">
+          {[
+            { id: "overview", label: text.overview, icon: BarChart3 },
+            { id: "channels", label: text.channels, icon: Building2 },
+            { id: "resources", label: text.resources, icon: Database },
+            { id: "monitoring", label: text.monitoring, icon: Activity },
+            { id: "billing", label: text.billing, icon: DollarSign },
+            { id: "settings", label: text.settings, icon: Settings },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === tab.id
+                  ? "border-primary text-foreground"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="p-6 space-y-6">
+        {activeTab === "overview" && (
+          <>
+            {/* Stats grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {stats.map((stat, index) => (
+                <Card key={index} className="p-6 bg-card border-border">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <p className="text-sm text-muted-foreground mb-1">{stat.title}</p>
+                      <p className="text-3xl font-bold text-foreground mb-2">{stat.value}</p>
+                      <div className="flex items-center gap-1">
+                        <TrendingUp className="h-3 w-3 text-green-500" />
+                        <span className="text-xs text-green-500">{stat.change}</span>
+                      </div>
+                    </div>
+                    <div className="p-3 rounded-lg bg-primary/10">
+                      <stat.icon className="h-5 w-5 text-primary" />
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* System Metrics */}
+              <Card className="lg:col-span-1 p-6 bg-card border-border">
+                <h3 className="text-lg font-semibold text-foreground mb-4">{text.systemMetrics}</h3>
+                <div className="space-y-4">
+                  {systemMetrics.map((metric, index) => (
+                    <div key={index}>
+                      <div className="flex justify-between text-sm mb-2">
+                        <span className="text-muted-foreground">{metric.label}</span>
+                        <span className="text-foreground font-medium">
+                          {typeof metric.value === "number" && metric.value < 200 ? `${metric.value}%` : metric.value}
+                        </span>
+                      </div>
+                      <div className="h-2 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={`h-full ${metric.color} transition-all duration-300`}
+                          style={{ width: `${(metric.value / metric.max) * 100}%` }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+
+              {/* Recent Tenants */}
+              <Card className="lg:col-span-2 p-6 bg-card border-border">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-semibold text-foreground">{text.recentTenants}</h3>
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input placeholder={text.search} className="pl-9 w-[240px] bg-background border-border" />
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  {tenants.map((tenant) => (
+                    <div
+                      key={tenant.id}
+                      className="flex items-center justify-between p-4 rounded-lg bg-background border border-border hover:border-primary/50 transition-colors"
+                    >
+                      <div className="flex items-center gap-4 flex-1">
+                        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                          <Users className="h-5 w-5 text-primary" />
+                        </div>
+                        <div className="flex-1">
+                          <p className="font-medium text-foreground">{tenant.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {text[tenant.plan as keyof typeof text] || tenant.plan} · {tenant.revenue}/mo
+                          </p>
+                        </div>
+                        <div className="text-right">
+                          <div className="flex items-center gap-2 mb-1">
+                            <div className="h-2 w-2 rounded-full bg-green-500" />
+                            <span className="text-sm text-muted-foreground">{text.active}</span>
+                          </div>
+                          <p className="text-xs text-muted-foreground">
+                            {text.usage}: {tenant.usage}%
+                          </p>
+                        </div>
+                      </div>
+
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>{text.viewDetails}</DropdownMenuItem>
+                          <DropdownMenuItem>Edit</DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem className="text-destructive">{text.suspend}</DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+
+            {/* System alerts */}
+            <Card className="p-6 bg-card border-border border-l-4 border-l-yellow-500">
+              <div className="flex items-start gap-4">
+                <div className="p-2 rounded-lg bg-yellow-500/10">
+                  <AlertTriangle className="h-5 w-5 text-yellow-500" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-semibold text-foreground mb-1">
+                    {language === "zh" ? "系统警告" : "System Alert"}
+                  </h4>
+                  <p className="text-sm text-muted-foreground">
+                    {language === "zh"
+                      ? "数据库存储使用率已达 78%。建议尽快扩容以避免性能下降。"
+                      : "Database storage usage has reached 78%. Consider scaling up to avoid performance degradation."}
+                  </p>
+                  <div className="flex items-center gap-2 mt-3">
+                    <Clock className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-xs text-muted-foreground">
+                      2 {language === "zh" ? "小时前" : "hours ago"}
+                    </span>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  {language === "zh" ? "查看详情" : "View Details"}
+                </Button>
+              </div>
+            </Card>
+          </>
+        )}
+
+        {activeTab === "channels" && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-2xl font-bold text-foreground">{text.channelManagement}</h2>
+                <p className="text-sm text-muted-foreground mt-1">{text.channelDescription}</p>
+              </div>
+              <Dialog open={isAddChannelOpen} onOpenChange={setIsAddChannelOpen}>
+                <DialogTrigger asChild>
+                  <Button className="bg-primary text-primary-foreground">
+                    <Plus className="h-4 w-4 mr-2" />
+                    {text.addChannel}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="bg-card border-border">
+                  <DialogHeader>
+                    <DialogTitle>{text.createChannel}</DialogTitle>
+                    <DialogDescription>
+                      {language === "zh"
+                        ? "创建新的分销渠道账户，渠道可以管理自己的租户组合"
+                        : "Create a new distribution channel account that can manage their own tenant portfolio"}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="channelName">{text.channelName}</Label>
+                      <Input id="channelName" placeholder={text.channelNamePlaceholder} className="bg-background" />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="contactPerson">{text.contactPerson}</Label>
+                      <Input id="contactPerson" placeholder="John Doe" className="bg-background" />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="contactEmail">{text.contactEmail}</Label>
+                      <Input
+                        id="contactEmail"
+                        type="email"
+                        placeholder="contact@example.com"
+                        className="bg-background"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="contactPhone">{text.contactPhone}</Label>
+                      <Input id="contactPhone" placeholder="+1 234 567 8900" className="bg-background" />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="commission">{text.commissionRate}</Label>
+                      <Input id="commission" type="number" placeholder="15" className="bg-background" />
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button variant="outline" onClick={() => setIsAddChannelOpen(false)}>
+                      {text.cancel}
+                    </Button>
+                    <Button className="bg-primary text-primary-foreground" onClick={() => setIsAddChannelOpen(false)}>
+                      {text.create}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <div className="relative mb-6">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input placeholder={text.searchChannels} className="pl-9 bg-card border-border" />
+            </div>
+
+            <div className="grid grid-cols-1 gap-4">
+              {channels.map((channel) => (
+                <Card key={channel.id} className="p-6 bg-card border-border hover:border-primary/50 transition-colors">
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-start gap-4 flex-1">
+                      <div className="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                        <Building2 className="h-7 w-7 text-primary" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-3 mb-2">
+                          <h3 className="text-lg font-semibold text-foreground">{channel.name}</h3>
+                          <div
+                            className={`px-2 py-1 rounded text-xs font-medium ${
+                              channel.status === "active"
+                                ? "bg-green-500/10 text-green-500"
+                                : "bg-gray-500/10 text-gray-500"
+                            }`}
+                          >
+                            {language === "zh" ? (channel.status === "active" ? "活跃" : "停用") : channel.status}
+                          </div>
+                        </div>
+                        <div className="space-y-1 text-sm text-muted-foreground">
+                          <p>
+                            {text.contactPerson}: {channel.contact}
+                          </p>
+                          <p>{channel.email}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-start gap-8 ml-6">
+                      <div className="text-center">
+                        <p className="text-2xl font-bold text-foreground">{channel.tenantCount}</p>
+                        <p className="text-xs text-muted-foreground mt-1">{text.tenantCount}</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-2xl font-bold text-foreground">{channel.revenue}</p>
+                        <p className="text-xs text-muted-foreground mt-1">{language === "zh" ? "月收入" : "Monthly"}</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-2xl font-bold text-foreground">{channel.commission}%</p>
+                        <p className="text-xs text-muted-foreground mt-1">{text.commission}</p>
+                      </div>
+                    </div>
+
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="sm" className="ml-4">
+                          <MoreVertical className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="bg-card border-border">
+                        <DropdownMenuItem>
+                          <Eye className="h-4 w-4 mr-2" />
+                          {text.viewDetails}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Edit className="h-4 w-4 mr-2" />
+                          {text.edit}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Users className="h-4 w-4 mr-2" />
+                          {language === "zh" ? "查看租户" : "View Tenants"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleEditCommission(channel)}>
+                          <DollarSign className="h-4 w-4 mr-2" />
+                          {language === "zh" ? "修改佣金" : "Edit Commission"}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          {language === "zh" ? "删除渠道" : "Delete Channel"}
+                        </DropdownMenuItem>
+                        {/* <DropdownMenuItem onClick={() => handleConfigGoods(channel)}> // REMOVED */}
+                        {/*   <Package className="h-4 w-4 mr-2" /> */}
+                        {/*   {language === "zh" ? "货源配置" : "Goods Configuration"} */}
+                        {/* </DropdownMenuItem> */}
+                        {/* <DropdownMenuItem onClick={() => handleAgentAllocation(channel)}> // REMOVED */}
+                        {/*   <Bot className="h-4 w-4 mr-2" /> */}
+                        {/*   {language === "zh" ? "Agent分配" : "Agent Allocation"} */}
+                        {/* </DropdownMenuItem> */}
+                        {/* CHANGED: Combine goods configuration and agent allocation into resource management */}
+                        <DropdownMenuItem onClick={() => handleResourceManagement(channel)}>
+                          <Settings className="h-4 w-4 mr-2" />
+                          {language === "zh" ? "资源管理" : "Resource Management"}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {/* Commission Edit Dialog */}
+            <Dialog open={isCommissionDialogOpen} onOpenChange={setIsCommissionDialogOpen}>
+              <DialogContent className="bg-card border-border">
+                <DialogHeader>
+                  <DialogTitle>{language === "zh" ? "修改佣金比例" : "Edit Commission Rate"}</DialogTitle>
+                  <DialogDescription>
+                    {language === "zh"
+                      ? `为渠道 "${selectedChannel?.name}" 设置新的佣金比例`
+                      : `Set a new commission rate for channel "${selectedChannel?.name}"`}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="commission-rate">
+                      {language === "zh" ? "佣金比例 (%)" : "Commission Rate (%)"}
+                    </Label>
+                    <Input
+                      id="commission-rate"
+                      type="number"
+                      min="0"
+                      max="100"
+                      step="0.1"
+                      placeholder={language === "zh" ? "例: 15" : "e.g., 15"}
+                      value={commissionRate}
+                      onChange={(e) => setCommissionRate(e.target.value)}
+                      className="bg-background border-border"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {language === "zh"
+                        ? "当前佣金比例: " + selectedChannel?.commission + "%"
+                        : "Current rate: " + selectedChannel?.commission + "%"}
+                    </p>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsCommissionDialogOpen(false)}>
+                    {text.cancel}
+                  </Button>
+                  <Button className="bg-primary text-primary-foreground" onClick={handleSaveCommission}>
+                    {language === "zh" ? "保存" : "Save"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
+            {/* CHANGED: Combined Goods Configuration and Agent Allocation into a single Resource Management Dialog */}
+            {/* <Dialog open={isConfigGoodsOpen} onOpenChange={setIsConfigGoodsOpen}> // REMOVED */}
+            <Dialog open={isResourceManagementOpen} onOpenChange={setIsResourceManagementOpen}>
+              <DialogContent className="bg-card border-border max-w-3xl max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>{language === "zh" ? "资源管理" : "Resource Management"}</DialogTitle>
+                  <DialogDescription>
+                    {language === "zh"
+                      ? `为渠道 "${selectedChannel?.name}" 配置可用的模型、Agent和配额`
+                      : `Configure available models, agents and quota for channel "${selectedChannel?.name}"`}
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-6 py-4">
+                  {/* Models Selection */}
+                  <div className="space-y-3">
+                    <Label className="text-base font-semibold">
+                      {language === "zh" ? "模型供应商" : "Model Providers"}
+                    </Label>
+                    <div className="grid grid-cols-1 gap-2">
+                      {availableModels.map((model) => (
+                        <div key={model.id} className="flex items-center space-x-2">
+                          <input
+                            type="checkbox"
+                            id={`model-${model.id}`}
+                            checked={selectedModels.includes(model.id)}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedModels([...selectedModels, model.id])
+                              } else {
+                                setSelectedModels(selectedModels.filter((m) => m !== model.id))
+                              }
+                            }}
+                            className="w-4 h-4 rounded border-border"
+                          />
+                          <label htmlFor={`model-${model.id}`} className="text-sm font-medium cursor-pointer flex-1">
+                            {model.name}
+                            <span className="text-xs text-muted-foreground ml-2">({model.provider})</span>
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Agent Selection with Quantities */}
+                  <div className="space-y-3">
+                    <Label className="text-base font-semibold">
+                      {language === "zh" ? "Agent分配" : "Agent Allocation"}
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      {language === "zh"
+                        ? "选择该渠道可以分配给租户的Agent并设置可用数量"
+                        : "Select agents that this channel can assign to tenants and set available quantities"}
+                    </p>
+                    <div className="grid grid-cols-1 gap-3 mt-4">
+                      {availableAgents.map((agent) => (
+                        <div
+                          key={agent.id}
+                          className={`border rounded-lg p-4 transition-all ${
+                            selectedAgents.includes(agent.id) ? "border-primary bg-primary/5" : "border-border"
+                          }`}
+                        >
+                          <div className="flex items-center justify-between gap-4">
+                            <div
+                              className="flex items-center gap-3 flex-1 cursor-pointer"
+                              onClick={() => {
+                                if (selectedAgents.includes(agent.id)) {
+                                  setSelectedAgents(selectedAgents.filter((a) => a !== agent.id))
+                                  const newQuantities = { ...agentQuantities }
+                                  delete newQuantities[agent.id]
+                                  setAgentQuantities(newQuantities)
+                                } else {
+                                  setSelectedAgents([...selectedAgents, agent.id])
+                                  setAgentQuantities({ ...agentQuantities, [agent.id]: 1 })
+                                }
+                              }}
+                            >
+                              <div
+                                className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                                  selectedAgents.includes(agent.id) ? "bg-primary/20" : "bg-muted"
+                                }`}
+                              >
+                                <Bot
+                                  className={`h-5 w-5 ${selectedAgents.includes(agent.id) ? "text-primary" : "text-muted-foreground"}`}
+                                />
+                              </div>
+                              <div>
+                                <p className="font-medium text-foreground">{agent.name}</p>
+                                <p className="text-xs text-muted-foreground">{agent.type}</p>
+                              </div>
+                            </div>
+
+                            {selectedAgents.includes(agent.id) && (
+                              <div className="flex items-center gap-2">
+                                <Label className="text-sm text-muted-foreground whitespace-nowrap">
+                                  {language === "zh" ? "数量:" : "Quantity:"}
+                                </Label>
+                                <Input
+                                  type="number"
+                                  min="1"
+                                  max="100"
+                                  value={agentQuantities[agent.id] || 1}
+                                  onChange={(e) => {
+                                    const value = Math.max(1, Math.min(100, Number.parseInt(e.target.value) || 1))
+                                    setAgentQuantities({ ...agentQuantities, [agent.id]: value })
+                                  }}
+                                  className="w-20 h-9"
+                                  onClick={(e) => e.stopPropagation()}
+                                />
+                              </div>
+                            )}
+
+                            <input
+                              type="checkbox"
+                              checked={selectedAgents.includes(agent.id)}
+                              onChange={() => {}}
+                              className="w-5 h-5 rounded border-border"
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="space-y-3 border-t border-border pt-4">
+                    <Label className="text-base font-semibold">
+                      {language === "zh" ? "自定义Agent资源配置" : "Custom Agent Resource Configuration"}
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      {language === "zh"
+                        ? "为该渠道的租户创建的自定义Agent配置默认CPU和内存资源"
+                        : "Configure default CPU and memory resources for custom agents created by this channel's tenants"}
+                    </p>
+                    <div className="grid grid-cols-2 gap-4 mt-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="custom-cpu">{language === "zh" ? "CPU核数" : "CPU Cores"}</Label>
+                        <Input
+                          id="custom-cpu"
+                          type="number"
+                          min="0.5"
+                          max="16"
+                          step="0.5"
+                          value={customAgentCpu}
+                          onChange={(e) => setCustomAgentCpu(e.target.value)}
+                          className="bg-background border-border"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          {language === "zh" ? "推荐范围: 0.5-16核" : "Recommended: 0.5-16 cores"}
+                        </p>
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="custom-memory">
+                          {language === "zh" ? "内存大小（GB）" : "Memory Size (GB)"}
+                        </Label>
+                        <Input
+                          id="custom-memory"
+                          type="number"
+                          min="0.5"
+                          max="64"
+                          step="0.5"
+                          value={customAgentMemory}
+                          onChange={(e) => setCustomAgentMemory(e.target.value)}
+                          className="bg-background border-border"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          {language === "zh" ? "推荐范围: 0.5-64GB" : "Recommended: 0.5-64GB"}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 mt-2">
+                      <p className="text-xs text-muted-foreground">
+                        {language === "zh"
+                          ? "此配置将应用于该渠道的租户创建的所有自定义Agent，不影响平台原生Agent。"
+                          : "This configuration will apply to all custom agents created by this channel's tenants, not affecting platform native agents."}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* REMOVED monthly quota field */}
+                  <div className="space-y-2">
+                    <Label htmlFor="credit-limit">{language === "zh" ? "渠道授信额度" : "Channel Credit Limit"}</Label>
+                    <Input
+                      id="credit-limit"
+                      type="number"
+                      placeholder={language === "zh" ? "例: 10000" : "e.g., 10000"}
+                      value={creditLimit}
+                      onChange={(e) => setCreditLimit(e.target.value)}
+                      className="bg-background border-border"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {language === "zh" ? "渠道可用授信上限 (USD)" : "Channel credit limit (USD)"}
+                    </p>
+                  </div>
+
+                  <div className="bg-primary/5 border border-primary/20 rounded-lg p-4">
+                    <p className="text-sm font-semibold text-foreground mb-2">
+                      {language === "zh" ? "资源配置摘要" : "Resource Configuration Summary"}
+                    </p>
+                    <div className="space-y-1 text-xs text-muted-foreground">
+                      <p>
+                        {language === "zh" ? "已选择模型" : "Models selected"}: {selectedModels.length}
+                      </p>
+                      <p>
+                        {language === "zh" ? "已选择Agent" : "Agents selected"}: {selectedAgents.length}
+                      </p>
+                      {selectedAgents.length > 0 && (
+                        <p>
+                          {language === "zh" ? "总Agent数量: " : "Total agents: "}
+                          {Object.values(agentQuantities).reduce((sum, qty) => sum + qty, 0)}
+                        </p>
+                      )}
+                      <p className="pt-2 border-t border-border/50">
+                        {language === "zh" ? "自定义Agent CPU: " : "Custom Agent CPU: "}
+                        {customAgentCpu} {language === "zh" ? "核" : "cores"}
+                      </p>
+                      <p>
+                        {language === "zh" ? "自定义Agent 内存: " : "Custom Agent Memory: "}
+                        {customAgentMemory} GB
+                      </p>
+                      {/* REMOVED monthly quota from summary */}
+                      <p>
+                        {language === "zh" ? "渠道授信额度" : "Channel Credit Limit"}: ${creditLimit || "0"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsResourceManagementOpen(false)}>
+                    {text.cancel}
+                  </Button>
+                  <Button className="bg-primary text-primary-foreground" onClick={handleSaveResourceManagement}>
+                    {language === "zh" ? "保存配置" : "Save Configuration"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
+            <div className="mt-8">
+              <h3 className="text-lg font-semibold mb-4">
+                {language === "zh" ? "渠道申请审批" : "Channel Application Approvals"}
+              </h3>
+              <Card className="bg-card border-border">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="border-b border-border">
+                      <tr>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "渠道" : "Channel"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "供应商" : "Provider"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "期望模型" : "Models"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "提交时间" : "Submitted"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "状态" : "Status"}
+                        </th>
+                        <th className="text-right p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "操作" : "Actions"}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {providerApprovals.map((approval) => (
+                        <tr key={approval.id} className="border-b border-border last:border-0 hover:bg-muted/50">
+                          <td className="p-4 text-sm text-foreground font-medium">{approval.channelName}</td>
+                          <td className="p-4 text-sm text-foreground">{approval.providerName}</td>
+                          <td className="p-4 text-sm text-muted-foreground">{approval.expectedModels}</td>
+                          <td className="p-4 text-sm text-muted-foreground">{approval.submittedAt}</td>
+                          <td className="p-4">
+                            <Badge
+                              variant="secondary"
+                              className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                            >
+                              {language === "zh" ? "待审批" : "Pending"}
+                            </Badge>
+                          </td>
+                          <td className="p-4 text-right">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                setSelectedApproval(approval)
+                                setIsApprovalDialogOpen(true)
+                              }}
+                            >
+                              {language === "zh" ? "审批" : "Review"}
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </Card>
+            </div>
+
+            {/* Agent申请审批 */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-foreground">
+                {language === "zh" ? "Agent申请审批" : "Agent Application Approvals"}
+              </h3>
+              <Card className="bg-card border-border">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="border-b border-border">
+                      <tr>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "渠道" : "Channel"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "Agent类型" : "Agent Type"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "申请数量" : "Quantity"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "提交时间" : "Submitted"}
+                        </th>
+                        <th className="text-left p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "状态" : "Status"}
+                        </th>
+                        <th className="text-right p-4 text-sm font-medium text-muted-foreground">
+                          {language === "zh" ? "操作" : "Actions"}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {agentApprovals.map((approval) => (
+                        <tr key={approval.id} className="border-b border-border last:border-0 hover:bg-muted/50">
+                          <td className="p-4 text-sm text-foreground font-medium">{approval.channelName}</td>
+                          <td className="p-4 text-sm text-foreground">{approval.agentType}</td>
+                          <td className="p-4 text-sm text-muted-foreground">{approval.requestedQuantity}</td>
+                          <td className="p-4 text-sm text-muted-foreground">{approval.submittedAt}</td>
+                          <td className="p-4">
+                            <Badge
+                              variant="secondary"
+                              className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                            >
+                              {language === "zh" ? "待审批" : "Pending"}
+                            </Badge>
+                          </td>
+                          <td className="p-4 text-right">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                setSelectedAgentApproval(approval)
+                                setIsAgentApprovalDialogOpen(true)
+                              }}
+                            >
+                              {language === "zh" ? "审批" : "Review"}
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </Card>
+            </div>
+
+            <Dialog open={isAgentApprovalDialogOpen} onOpenChange={setIsAgentApprovalDialogOpen}>
+              <DialogContent className="bg-card border-border max-w-2xl">
+                <DialogHeader>
+                  <DialogTitle>{language === "zh" ? "审批Agent申请" : "Review Agent Application"}</DialogTitle>
+                  <DialogDescription>
+                    {language === "zh"
+                      ? `审批渠道 "${selectedAgentApproval?.channelName}" 的Agent申请`
+                      : `Review agent application from channel "${selectedAgentApproval?.channelName}"`}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">
+                        {language === "zh" ? "申请渠道" : "Channel"}
+                      </label>
+                      <p className="text-foreground mt-1">{selectedAgentApproval?.channelName}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-muted-foreground">
+                        {language === "zh" ? "提交时间" : "Submitted At"}
+                      </label>
+                      <p className="text-foreground mt-1">{selectedAgentApproval?.submittedAt}</p>
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-muted-foreground">
+                      {language === "zh" ? "Agent类型" : "Agent Type"}
+                    </label>
+                    <p className="text-foreground mt-1">{selectedAgentApproval?.agentType}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-muted-foreground">
+                      {language === "zh" ? "申请数量" : "Requested Quantity"}
+                    </label>
+                    <p className="text-foreground mt-1">{selectedAgentApproval?.requestedQuantity}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-muted-foreground">
+                      {language === "zh" ? "申请理由" : "Reason"}
+                    </label>
+                    <p className="text-foreground mt-1">{selectedAgentApproval?.reason}</p>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    className="border-destructive text-destructive hover:bg-destructive/10 bg-transparent"
+                    onClick={() => {
+                      setAgentApprovals(agentApprovals.filter((a) => a.id !== selectedAgentApproval?.id))
+                      setIsAgentApprovalDialogOpen(false)
+                    }}
+                  >
+                    {language === "zh" ? "拒绝" : "Reject"}
+                  </Button>
+                  <Button
+                    className="bg-primary text-primary-foreground"
+                    onClick={() => {
+                      setAgentApprovals(agentApprovals.filter((a) => a.id !== selectedAgentApproval?.id))
+                      setIsAgentApprovalDialogOpen(false)
+                    }}
+                  >
+                    {language === "zh" ? "批准" : "Approve"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
+        {activeTab === "resources" && (
+          <div className="space-y-6">
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground">
+                    {language === "zh" ? "Agent计算资源分配" : "Agent Compute Resource Allocation"}
+                  </h2>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {language === "zh"
+                      ? "为每个Agent单独配置CPU和内存资源"
+                      : "Configure CPU and memory resources for each agent individually"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Agent Resource Cards */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+                {[
+                  {
+                    id: "agent-001",
+                    name: "Weather Query Agent",
+                    status: "active",
+                    cpu: 2,
+                    memory: 4,
+                    usage: { cpu: 45, memory: 60 },
+                  },
+                  {
+                    id: "agent-002",
+                    name: "Data Analysis Agent",
+                    status: "active",
+                    cpu: 4,
+                    memory: 8,
+                    usage: { cpu: 78, memory: 85 },
+                  },
+                  {
+                    id: "agent-003",
+                    name: "Document Processing Agent",
+                    status: "active",
+                    cpu: 2,
+                    memory: 4,
+                    usage: { cpu: 32, memory: 48 },
+                  },
+                  {
+                    id: "agent-004",
+                    name: "Email Management Agent",
+                    status: "idle",
+                    cpu: 1,
+                    memory: 2,
+                    usage: { cpu: 5, memory: 15 },
+                  },
+                  {
+                    id: "agent-005",
+                    name: "API Integration Agent",
+                    status: "active",
+                    cpu: 3,
+                    memory: 6,
+                    usage: { cpu: 65, memory: 72 },
+                  },
+                  {
+                    id: "agent-006",
+                    name: "Database Operations Agent",
+                    status: "active",
+                    cpu: 4,
+                    memory: 8,
+                    usage: { cpu: 82, memory: 90 },
+                  },
+                ].map((agent) => (
+                  <Card
+                    key={agent.id}
+                    className="p-4 bg-card border-border cursor-pointer hover:border-primary transition-colors"
+                    onClick={() => {
+                      setSelectedAgent(agent)
+                      setComputeConfigOpen(true)
+                    }}
+                  >
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex-1">
+                        <h3 className="font-semibold text-foreground">{agent.name}</h3>
+                        <p className="text-xs text-muted-foreground">{agent.id}</p>
+                      </div>
+                      <div
+                        className={`px-2 py-1 rounded text-xs ${
+                          agent.status === "active" ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"
+                        }`}
+                      >
+                        {agent.status === "active"
+                          ? language === "zh"
+                            ? "活跃"
+                            : "Active"
+                          : language === "zh"
+                            ? "空闲"
+                            : "Idle"}
+                      </div>
+                    </div>
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center gap-2">
+                          <Cpu className="h-4 w-4 text-blue-500" />
+                          <span className="text-muted-foreground">CPU:</span>
+                        </div>
+                        <span className="font-medium text-foreground">
+                          {agent.cpu} {language === "zh" ? "核" : "Cores"}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center gap-2">
+                          <Server className="h-4 w-4 text-green-500" />
+                          <span className="text-muted-foreground">{language === "zh" ? "内存" : "Memory"}:</span>
+                        </div>
+                        <span className="font-medium text-foreground">{agent.memory} GB</span>
+                      </div>
+                      <div className="pt-2 border-t border-border">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-muted-foreground">CPU {language === "zh" ? "使用率" : "Usage"}</span>
+                            <span className="text-foreground">{agent.usage.cpu}%</span>
+                          </div>
+                          <div className="w-full bg-muted rounded-full h-1.5">
+                            <div className="bg-blue-500 h-1.5 rounded-full" style={{ width: `${agent.usage.cpu}%` }} />
+                          </div>
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-muted-foreground">
+                              {language === "zh" ? "内存使用率" : "Memory Usage"}
+                            </span>
+                            <span className="text-foreground">{agent.usage.memory}%</span>
+                          </div>
+                          <div className="w-full bg-muted rounded-full h-1.5">
+                            <div
+                              className="bg-green-500 h-1.5 rounded-full"
+                              style={{ width: `${agent.usage.memory}%` }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <Button variant="ghost" size="sm" className="w-full mt-3">
+                      <Settings className="h-4 w-4 mr-2" />
+                      {language === "zh" ? "配置资源" : "Configure Resources"}
+                    </Button>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            {/* Agent Resource Configuration Dialog */}
+            <Dialog open={computeConfigOpen} onOpenChange={setComputeConfigOpen}>
+              <DialogContent className="bg-background border-border max-w-2xl">
+                <DialogHeader>
+                  <DialogTitle className="text-foreground">
+                    {language === "zh" ? "Agent资源配置" : "Agent Resource Configuration"}
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="space-y-6">
+                  {selectedAgent && (
+                    <>
+                      <div className="p-4 bg-muted/50 rounded-lg">
+                        <h4 className="font-semibold text-foreground mb-1">{selectedAgent.name}</h4>
+                        <p className="text-sm text-muted-foreground">{selectedAgent.id}</p>
+                      </div>
+                      <div className="space-y-4">
+                        <div className="space-y-2">
+                          <label className="text-sm font-medium text-foreground mb-1 block">
+                            {language === "zh" ? "CPU核数" : "CPU Cores"}
+                          </label>
+                          <Input
+                            type="number"
+                            placeholder={language === "zh" ? "输入CPU核数" : "Enter CPU cores"}
+                            defaultValue={selectedAgent.cpu}
+                            min={1}
+                            max={16}
+                            className="bg-background border-border text-foreground"
+                          />
+                          <p className="text-xs text-muted-foreground">
+                            {language === "zh" ? "推荐范围: 1-16核" : "Recommended range: 1-16 cores"}
+                          </p>
+                        </div>
+                        <div className="space-y-2">
+                          <label className="text-sm font-medium text-foreground mb-1 block">
+                            {language === "zh" ? "内存大小（GB）" : "Memory Size (GB)"}
+                          </label>
+                          <Input
+                            type="number"
+                            placeholder={language === "zh" ? "输入内存大小" : "Enter memory size"}
+                            defaultValue={selectedAgent.memory}
+                            min={1}
+                            max={32}
+                            className="bg-background border-border text-foreground"
+                          />
+                          <p className="text-xs text-muted-foreground">
+                            {language === "zh" ? "推荐范围: 1-32GB" : "Recommended range: 1-32GB"}
+                          </p>
+                        </div>
+                        <div className="space-y-2">
+                          <label className="text-sm font-medium text-foreground mb-1 block">
+                            {language === "zh" ? "平台可用Agent个数" : "Available Agent Instances"}
+                          </label>
+                          <Input
+                            type="number"
+                            placeholder={language === "zh" ? "输入可用Agent个数" : "Enter available agents"}
+                            defaultValue={10}
+                            min={1}
+                            max={100}
+                            className="bg-background border-border text-foreground"
+                          />
+                          <p className="text-xs text-muted-foreground">
+                            {language === "zh" ? "推荐范围: 1-100个" : "Recommended range: 1-100 instances"}
+                          </p>
+                        </div>
+                        <div className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+                          <p className="text-sm text-foreground">
+                            {language === "zh" ? "当前使用率: " : "Current Usage: "}
+                            CPU {selectedAgent.usage.cpu}% · {language === "zh" ? "内存" : "Memory"}{" "}
+                            {selectedAgent.usage.memory}%
+                          </p>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                  <div className="flex justify-end gap-3">
+                    <Button variant="outline" onClick={() => setComputeConfigOpen(false)}>
+                      {language === "zh" ? "取消" : "Cancel"}
+                    </Button>
+                    <Button onClick={() => setComputeConfigOpen(false)}>
+                      {language === "zh" ? "保存配置" : "Save Configuration"}
+                    </Button>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-2xl font-bold text-foreground">
+                  {language === "zh" ? "货源供应商管理" : "Goods Source Management"}
+                </h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {language === "zh" ? "管理平台的模型供应商配置" : "Manage platform model provider configurations"}
+                </p>
+              </div>
+              <Button className="bg-primary text-primary-foreground" onClick={() => handleAddProvider("model")}>
+                <Plus className="h-4 w-4 mr-2" />
+                {language === "zh" ? "添加模型供应商" : "Add Model Provider"}
+              </Button>
+            </div>
+
+            {/* Model Providers Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[
+                {
+                  name: "OpenAI",
+                  type: "Official",
+                  models: ["gpt-4", "gpt-3.5-turbo"],
+                  rpm: 10000,
+                  tpm: 500000,
+                  status: "active",
+                },
+                {
+                  name: "Anthropic",
+                  type: "Official",
+                  models: ["claude-3-opus", "claude-2"],
+                  rpm: 5000,
+                  tpm: 300000,
+                  status: "active",
+                },
+                {
+                  name: "Google AI",
+                  type: "GCP",
+                  models: ["gemini-pro", "palm-2"],
+                  rpm: 8000,
+                  tpm: 400000,
+                  status: "active",
+                },
+                {
+                  name: "Azure OpenAI",
+                  type: "Azure",
+                  models: ["gpt-4", "gpt-35-turbo"],
+                  rpm: 12000,
+                  tpm: 600000,
+                  status: "active",
+                },
+              ].map((provider) => (
+                <Card
+                  key={provider.name}
+                  className="p-4 bg-card border-border hover:border-primary/50 transition-colors"
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div>
+                      <h4 className="font-semibold text-foreground">{provider.name}</h4>
+                      <p className="text-xs text-muted-foreground">{provider.type}</p>
+                    </div>
+                    <Badge
+                      variant={provider.status === "active" ? "default" : "secondary"}
+                      className="bg-green-500/10 text-green-500 border-green-500/20"
+                    >
+                      {provider.status === "active"
+                        ? language === "zh"
+                          ? "活跃"
+                          : "Active"
+                        : language === "zh"
+                          ? "离线"
+                          : "Offline"}
+                    </Badge>
+                  </div>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex items-center justify-between">
+                      <span className="text-muted-foreground">{language === "zh" ? "支持模型" : "Models"}</span>
+                      <span className="text-foreground font-medium">{provider.models.length}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-muted-foreground">RPM:</span>
+                      <span className="text-foreground font-medium">{provider.rpm.toLocaleString()}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-muted-foreground">TPM:</span>
+                      <span className="text-foreground font-medium">{provider.tpm.toLocaleString()}</span>
+                    </div>
+                  </div>
+                  <div className="flex gap-2 mt-4">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 bg-transparent"
+                      onClick={() => handleConfigProvider(provider, "model")}
+                    >
+                      <Settings className="h-3 w-3 mr-1" />
+                      {language === "zh" ? "配置" : "Config"}
+                    </Button>
+                    <Button variant="outline" size="sm" className="flex-1 bg-transparent">
+                      <Zap className="h-3 w-3 mr-1" />
+                      {language === "zh" ? "测试延迟" : "Test Latency"}
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "monitoring" && (
+          <div className="space-y-6">
+            {/* Agent health monitoring */}
+            <div className="mb-6">
+              <h2 className="text-2xl font-bold text-foreground">{text.agentHealthMonitoring}</h2>
+              <p className="text-sm text-muted-foreground mt-1">{text.agentHealthDesc}</p>
+            </div>
+
+            {/* Agent health cards grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {agents.map((agent) => {
+                const statusColor =
+                  agent.status === "healthy"
+                    ? "text-green-500 bg-green-500/10"
+                    : agent.status === "warning"
+                      ? "text-yellow-500 bg-yellow-500/10"
+                      : "text-red-500 bg-red-500/10"
+
+                const statusText =
+                  agent.status === "healthy" ? text.healthy : agent.status === "warning" ? text.warning : text.critical
+
+                return (
+                  <Card key={agent.id} className="p-6 bg-card border-border hover:border-primary/50 transition-colors">
+                    {/* Agent header */}
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-primary/10">
+                          <Bot className="h-5 w-5 text-primary" />
+                        </div>
+                        <div>
+                          <h3 className="text-base font-semibold text-foreground">
+                            {language === "zh" ? agent.nameCn : agent.name}
+                          </h3>
+                          <p className="text-xs text-muted-foreground">{agent.lastActive}</p>
+                        </div>
+                      </div>
+                      <Badge className={statusColor}>{statusText}</Badge>
+                    </div>
+
+                    {/* Agent metrics */}
+                    <div className="space-y-3">
+                      {/* CPU Usage */}
+                      <div>
+                        <div className="flex justify-between text-xs mb-1">
+                          <span className="text-muted-foreground">{text.cpuUsageLabel}</span>
+                          <span className="text-foreground font-medium">{agent.cpuUsage}%</span>
+                        </div>
+                        <div className="w-full bg-muted rounded-full h-2">
+                          <div
+                            className={`h-2 rounded-full ${
+                              agent.cpuUsage > 80
+                                ? "bg-red-500"
+                                : agent.cpuUsage > 60
+                                  ? "bg-yellow-500"
+                                  : "bg-green-500"
+                            }`}
+                            style={{ width: `${agent.cpuUsage}%` }}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Memory Usage */}
+                      <div>
+                        <div className="flex justify-between text-xs mb-1">
+                          <span className="text-muted-foreground">{text.memoryUsageLabel}</span>
+                          <span className="text-foreground font-medium">{agent.memoryUsage}%</span>
+                        </div>
+                        <div className="w-full bg-muted rounded-full h-2">
+                          <div
+                            className={`h-2 rounded-full ${
+                              agent.memoryUsage > 80
+                                ? "bg-red-500"
+                                : agent.memoryUsage > 60
+                                  ? "bg-yellow-500"
+                                  : "bg-green-500"
+                            }`}
+                            style={{ width: `${agent.memoryUsage}%` }}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Stats grid */}
+                      <div className="grid grid-cols-2 gap-3 pt-3 border-t border-border">
+                        <div>
+                          <p className="text-xs text-muted-foreground">{text.responseTime}</p>
+                          <p className="text-sm font-semibold text-foreground">
+                            {agent.responseTime}
+                            {text.ms}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-muted-foreground">{text.requestCount}</p>
+                          <p className="text-sm font-semibold text-foreground">
+                            {agent.requestCount.toLocaleString()} {text.requests}
+                          </p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-muted-foreground">{text.errorRate}</p>
+                          <p className="text-sm font-semibold text-foreground">{agent.errorRate}%</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-muted-foreground">{text.uptime}</p>
+                          <p className="text-sm font-semibold text-foreground">{agent.uptime}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "billing" && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-foreground">{t("计费管理", "Billing Management")}</h2>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowDateDialog(true)}
+                >
+                  <Calendar className="h-4 w-4" />
+                  {t("时间查询", "Date Query")}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowFilterDialog(true)}
+                >
+                  <Filter className="h-4 w-4" />
+                  {t("筛选", "Filter")}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowExportDialog(true)}
+                >
+                  <Download className="h-4 w-4" />
+                  {t("导出", "Export")}
+                </Button>
+              </div>
+            </div>
+
+            {/* 计费维度切换 */}
+            <div className="flex gap-2 border-b border-border">
+              <button
+                onClick={() => setBillingView("channel")}
+                className={`px-4 py-2 font-medium transition-colors ${
+                  billingView === "channel"
+                    ? "border-b-2 border-primary text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {t("渠道维度", "Channel Dimension")}
+              </button>
+              <button
+                onClick={() => setBillingView("tenant")}
+                className={`px-4 py-2 font-medium transition-colors ${
+                  billingView === "tenant"
+                    ? "border-b-2 border-primary text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {t("租户维度", "Tenant Dimension")}
+              </button>
+              <button
+                onClick={() => setBillingView("calls")}
+                className={`px-4 py-2 font-medium transition-colors ${
+                  billingView === "calls"
+                    ? "border-b-2 border-primary text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {t("调用记录", "Call Records")}
+              </button>
+            </div>
+
+            {/* 渠道维度计费 */}
+            {billingView === "channel" && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("渠道总数", "Total Channels")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">12</div>
+                  </Card>
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("总计费额", "Total Billing")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">$52,840</div>
+                  </Card>
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("总EU消耗", "Total EU Consumption")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">528,400 EU</div>
+                  </Card>
+                </div>
+
+                <Card className="p-6 bg-card border-border">
+                  <h3 className="text-lg font-semibold text-foreground mb-4">
+                    {t("渠道计费详情", "Channel Billing Details")}
+                  </h3>
+                  <div className="overflow-x-auto">
+                    <table className="w-full">
+                      <thead className="border-b border-border">
+                        <tr className="text-left text-sm text-muted-foreground">
+                          <th className="pb-3 font-medium">{t("渠道名称", "Channel Name")}</th>
+                          <th className="pb-3 font-medium">{t("调用次数", "Call Count")}</th>
+                          <th className="pb-3 font-medium">{t("总EU", "Total EU")}</th>
+                          <th className="pb-3 font-medium">{t("渠道总价", "Channel Total")}</th>
+                          <th className="pb-3 font-medium">{t("计费周期", "Billing Period")}</th>
+                        </tr>
+                      </thead>
+                      <tbody className="text-sm">
+                        {[
+                          { name: "Partner A", calls: 12500, eu: 125000, total: "$12,500", period: "2024-01" },
+                          { name: "Partner B", calls: 8300, eu: 83000, total: "$8,300", period: "2024-01" },
+                          { name: "Partner C", calls: 15200, eu: 152000, total: "$15,200", period: "2024-01" },
+                        ].map((channel, idx) => (
+                          <tr key={idx} className="border-b border-border/50">
+                            <td className="py-3 text-foreground font-medium">{channel.name}</td>
+                            <td className="py-3 text-foreground">{channel.calls.toLocaleString()}</td>
+                            <td className="py-3 text-foreground">{channel.eu.toLocaleString()} EU</td>
+                            <td className="py-3 text-foreground font-semibold">{channel.total}</td>
+                            <td className="py-3 text-muted-foreground">{channel.period}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </Card>
+              </div>
+            )}
+
+            {/* 租户维度计费 */}
+            {billingView === "tenant" && (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("租户总数", "Total Tenants")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">156</div>
+                  </Card>
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("用户总价", "User Total")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">$52,840</div>
+                  </Card>
+                  <Card className="p-4 bg-card border-border">
+                    <div className="text-sm text-muted-foreground">{t("平均消费", "Average Spending")}</div>
+                    <div className="text-2xl font-bold text-foreground mt-1">$339</div>
+                  </Card>
+                </div>
+
+                <Card className="p-6 bg-card border-border">
+                  <h3 className="text-lg font-semibold text-foreground mb-4">
+                    {t("租户计费详情", "Tenant Billing Details")}
+                  </h3>
+                  <div className="overflow-x-auto">
+                    <table className="w-full">
+                      <thead className="border-b border-border">
+                        <tr className="text-left text-sm text-muted-foreground">
+                          <th className="pb-3 font-medium">{t("租户名称", "Tenant Name")}</th>
+                          <th className="pb-3 font-medium">{t("所属渠道", "Channel")}</th>
+                          <th className="pb-3 font-medium">{t("调用次数", "Call Count")}</th>
+                          <th className="pb-3 font-medium">{t("总EU", "Total EU")}</th>
+                          <th className="pb-3 font-medium">{t("用户总价", "User Total")}</th>
+                          <th className="pb-3 font-medium">{t("计费周期", "Billing Period")}</th>
+                        </tr>
+                      </thead>
+                      <tbody className="text-sm">
+                        {[
+                          {
+                            name: "Tech Corp",
+                            channel: "Partner A",
+                            calls: 3200,
+                            eu: 32000,
+                            total: "$3,200",
+                            period: "2024-01",
+                          },
+                          {
+                            name: "AI Solutions",
+                            channel: "Partner A",
+                            calls: 2800,
+                            eu: 28000,
+                            total: "$2,800",
+                            period: "2024-01",
+                          },
+                          {
+                            name: "Data Inc",
+                            channel: "Partner B",
+                            calls: 4100,
+                            eu: 41000,
+                            total: "$4,100",
+                            period: "2024-01",
+                          },
+                          {
+                            name: "Cloud Systems",
+                            channel: "Partner C",
+                            calls: 5500,
+                            eu: 55000,
+                            total: "$5,500",
+                            period: "2024-01",
+                          },
+                        ].map((tenant, idx) => (
+                          <tr key={idx} className="border-b border-border/50">
+                            <td className="py-3 text-foreground font-medium">{tenant.name}</td>
+                            <td className="py-3 text-muted-foreground">{tenant.channel}</td>
+                            <td className="py-3 text-foreground">{tenant.calls.toLocaleString()}</td>
+                            <td className="py-3 text-foreground">{tenant.eu.toLocaleString()} EU</td>
+                            <td className="py-3 text-foreground font-semibold">{tenant.total}</td>
+                            <td className="py-3 text-muted-foreground">{tenant.period}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </Card>
+              </div>
+            )}
+
+            {/* 调用记录 */}
+            {billingView === "calls" && (
+              <div className="space-y-4">
+                <Card className="p-6 bg-card border-border">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-semibold text-foreground">
+                      {t("调用记录明细", "Call Records Detail")}
+                    </h3>
+                    <div className="text-sm text-muted-foreground">
+                      {t("EU计算规则：1 EU = 10秒调用时间", "EU Calculation: 1 EU = 10 seconds call time")}
+                    </div>
+                  </div>
+                  <div className="overflow-x-auto">
+                    <table className="w-full">
+                      <thead className="border-b border-border">
+                        <tr className="text-left text-sm text-muted-foreground">
+                          <th className="pb-3 font-medium">{t("调用ID", "Call ID")}</th>
+                          <th className="pb-3 font-medium">{t("租户", "Tenant")}</th>
+                          <th className="pb-3 font-medium">{t("渠道", "Channel")}</th>
+                          <th className="pb-3 font-medium">{t("调用时间", "Call Time")}</th>
+                          <th className="pb-3 font-medium">{t("时长(秒)", "Duration(s)")}</th>
+                          <th className="pb-3 font-medium">{t("EU", "EU")}</th>
+                          <th className="pb-3 font-medium">{t("单次调用总价", "Single Call Cost")}</th>
+                          <th className="pb-3 font-medium">{t("时间戳", "Timestamp")}</th>
+                        </tr>
+                      </thead>
+                      <tbody className="text-sm">
+                        {[
+                          {
+                            id: "CALL-2024-001",
+                            tenant: "Tech Corp",
+                            channel: "Partner A",
+                            time: "2024-01-15 14:23:45",
+                            duration: 45,
+                            eu: 4.5,
+                            cost: "$0.45",
+                          },
+                          {
+                            id: "CALL-2024-002",
+                            tenant: "AI Solutions",
+                            channel: "Partner A",
+                            time: "2024-01-15 14:24:12",
+                            duration: 30,
+                            eu: 3.0,
+                            cost: "$0.30",
+                          },
+                          {
+                            id: "CALL-2024-003",
+                            tenant: "Data Inc",
+                            channel: "Partner B",
+                            time: "2024-01-15 14:25:03",
+                            duration: 120,
+                            eu: 12.0,
+                            cost: "$1.20",
+                          },
+                          {
+                            id: "CALL-2024-004",
+                            tenant: "Cloud Systems",
+                            channel: "Partner C",
+                            time: "2024-01-15 14:26:31",
+                            duration: 65,
+                            eu: 6.5,
+                            cost: "$0.65",
+                          },
+                          {
+                            id: "CALL-2024-005",
+                            tenant: "Tech Corp",
+                            channel: "Partner A",
+                            time: "2024-01-15 14:27:15",
+                            duration: 90,
+                            eu: 9.0,
+                            cost: "$0.90",
+                          },
+                        ].map((call, idx) => (
+                          <tr key={idx} className="border-b border-border/50">
+                            <td className="py-3 text-foreground font-mono text-xs">{call.id}</td>
+                            <td className="py-3 text-foreground">{call.tenant}</td>
+                            <td className="py-3 text-muted-foreground">{call.channel}</td>
+                            <td className="py-3 text-foreground">{call.time}</td>
+                            <td className="py-3 text-foreground">{call.duration}s</td>
+                            <td className="py-3 text-foreground">{call.eu} EU</td>
+                            <td className="py-3 text-foreground font-semibold">{call.cost}</td>
+                            <td className="py-3 text-muted-foreground text-xs">{call.time}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </Card>
+              </div>
+            )}
+            <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle>{t("筛选选项", "Filter Options")}</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div>
+                    <Label>{t("客户名称", "Customer Name")}</Label>
+                    <Input
+                      placeholder={t("输入客户名称", "Enter customer name")}
+                      className="bg-background border-border text-foreground"
+                    />
+                  </div>
+                  <div>
+                    <Label>{t("最小调用次数", "Min Calls")}</Label>
+                    <Input type="number" placeholder="0" className="bg-background border-border text-foreground" />
+                  </div>
+                  <div>
+                    <Label>{t("最大调用次数", "Max Calls")}</Label>
+                    <Input type="number" placeholder="10000" className="bg-background border-border text-foreground" />
+                  </div>
+                  <Button className="w-full">{t("应用筛选", "Apply Filter")}</Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            <Dialog open={showDateDialog} onOpenChange={setShowDateDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle>{t("时间范围", "Date & Time Range")}</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div>
+                    <Label>{t("开始时间 (年-月-日 时:分)", "Start Date & Time (YYYY-MM-DD HH:MM)")}</Label>
+                    <Input type="datetime-local" className="bg-background border-border text-foreground" />
+                  </div>
+                  <div>
+                    <Label>{t("结束时间 (年-月-日 时:分)", "End Date & Time (YYYY-MM-DD HH:MM)")}</Label>
+                    <Input type="datetime-local" className="bg-background border-border text-foreground" />
+                  </div>
+                  <Button className="w-full">{t("查询", "Query")}</Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle>{t("导出格式", "Export Format")}</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <p className="text-sm text-muted-foreground">{t("选择导出文件格式", "Select export file format")}</p>
+                  <div className="grid grid-cols-2 gap-3">
+                    <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>Excel (.xlsx)</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>CSV (.csv)</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex-col gap-2 col-span-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>PDF (.pdf)</span>
+                    </Button>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
+        {activeTab === "settings" && (
+          <div className="space-y-6">
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-2xl font-bold text-foreground">{t("用户身份设置", "User Role Settings")}</h2>
+                <Button onClick={() => setShowAddAdminDialog(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  {t("添加管理员", "Add Administrator")}
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                {/* Billing Admin Role Card */}
+                <Card
+                  className={`p-6 cursor-pointer transition-all ${selectedRole === "billing-admin" ? "border-primary bg-primary/5" : "bg-card border-border hover:border-primary/50"}`}
+                  onClick={() => setSelectedRole("billing-admin")}
+                >
+                  <div className="flex items-start gap-3">
+                    <DollarSign className="w-8 h-8 text-green-500" />
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-foreground">
+                        {t("计费管理员", "Billing Administrator")}
+                      </h3>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        {t(
+                          "负责平台计费、账单和财务管理",
+                          "Responsible for billing, invoices, and financial management",
+                        )}
+                      </p>
+                      <div className="mt-3 flex items-center gap-2">
+                        <Badge variant="secondary" className="text-xs">
+                          {rolePermissions["billing-admin"].length} {t("个权限", "permissions")}
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+
+                {/* Operations Admin Role Card */}
+                <Card
+                  className={`p-6 cursor-pointer transition-all ${selectedRole === "operations-admin" ? "border-primary bg-primary/5" : "bg-card border-border hover:border-primary/50"}`}
+                  onClick={() => setSelectedRole("operations-admin")}
+                >
+                  <div className="flex items-start gap-3">
+                    <Settings className="w-8 h-8 text-blue-500" />
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-foreground">
+                        {t("运营管理员", "Operations Administrator")}
+                      </h3>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        {t("负责渠道、资源和系统监控管理", "Responsible for channels, resources, and monitoring")}
+                      </p>
+                      <div className="mt-3 flex items-center gap-2">
+                        <Badge variant="secondary" className="text-xs">
+                          {rolePermissions["operations-admin"].length} {t("个权限", "permissions")}
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+
+                {/* Super Admin Role Card */}
+                <Card
+                  className={`p-6 cursor-pointer transition-all ${selectedRole === "super-admin" ? "border-primary bg-primary/5" : "bg-card border-border hover:border-primary/50"}`}
+                  onClick={() => setSelectedRole("super-admin")}
+                >
+                  <div className="flex items-start gap-3">
+                    <Shield className="w-8 h-8 text-purple-500" />
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-foreground">
+                        {t("超级管理员", "Super Administrator")}
+                      </h3>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        {t("拥有所有权限，管理整个平台", "Full access to all platform features")}
+                      </p>
+                      <div className="mt-3 flex items-center gap-2">
+                        <Badge variant="secondary" className="text-xs">
+                          {rolePermissions["super-admin"].length} {t("个权限", "permissions")}
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+
+              {selectedRole && (
+                <Card className="p-6 bg-card border-border">
+                  <h3 className="text-lg font-semibold text-foreground mb-4">
+                    {t("标签页访问权限", "Tab Access Permissions")}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-6">
+                    {t("选择该角色可以访问的标签页", "Select which tabs this role can access")}
+                  </p>
+
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                    {[
+                      { id: "overview", label: t("概览", "Overview"), icon: "📊" },
+                      { id: "channels", label: t("渠道管理", "Channel Management"), icon: "🏢" },
+                      { id: "resources", label: t("资源管理", "Resource Management"), icon: "⚙️" },
+                      { id: "monitoring", label: t("监控", "Monitoring"), icon: "📈" },
+                      { id: "billing", label: t("计费", "Billing"), icon: "💰" },
+                      { id: "provider-backend", label: t("供应商管理中心后台", "Provider Backend"), icon: "🔧" },
+                      { id: "channel-backend", label: t("渠道管理中心后台", "Channel Backend"), icon: "🏪" },
+                      { id: "settings", label: t("设置", "Settings"), icon: "⚙️" },
+                    ].map((tab) => {
+                      const hasPermission = rolePermissions[selectedRole]?.includes(tab.id)
+                      return (
+                        <div
+                          key={tab.id}
+                          className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
+                            hasPermission
+                              ? "border-primary bg-primary/10"
+                              : "border-border bg-background hover:border-primary/30"
+                          }`}
+                          onClick={() => {
+                            setRolePermissions((prev) => ({
+                              ...prev,
+                              [selectedRole]: hasPermission
+                                ? prev[selectedRole].filter((p) => p !== tab.id)
+                                : [...prev[selectedRole], tab.id],
+                            }))
+                          }}
+                        >
+                          <div className="flex items-center gap-2 mb-2">
+                            <span className="text-xl">{tab.icon}</span>
+                            {hasPermission && <Check className="w-4 h-4 text-primary ml-auto" />}
+                          </div>
+                          <p className="text-sm font-medium text-foreground">{tab.label}</p>
+                        </div>
+                      )
+                    })}
+                  </div>
+
+                  <Button
+                    className="mt-6"
+                    onClick={() => {
+                      console.log("[v0] Saving permissions for", selectedRole, rolePermissions[selectedRole])
+                    }}
+                  >
+                    {t("保存权限配置", "Save Permissions")}
+                  </Button>
+                </Card>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+
+      {/* Subscription level assignment dialog */}
+      <Dialog open={isSubscriptionDialogOpen} onOpenChange={setIsSubscriptionDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{text.assignSubscriptionLevel}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {language === "zh" ? "为租户选择订阅级别：" : "Select a subscription level for the tenant:"}
+            </p>
+            <div className="space-y-3">
+              {subscriptionLevels.map((level) => (
+                <div
+                  key={level.id}
+                  onClick={() => setSelectedSubscriptionLevel(level.id)}
+                  className={`p-4 rounded-lg border-2 cursor-pointer transition-colors ${
+                    selectedSubscriptionLevel === level.id
+                      ? "border-primary bg-primary/5"
+                      : "border-border hover:border-primary/50"
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h4 className="font-semibold text-foreground">{level.name}</h4>
+                      <p className="text-sm text-muted-foreground">{level.description}</p>
+                    </div>
+                    <div
+                      className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                        selectedSubscriptionLevel === level.id ? "border-primary bg-primary" : "border-border"
+                      }`}
+                    >
+                      {selectedSubscriptionLevel === level.id && <div className="w-2 h-2 rounded-full bg-white" />}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2 justify-end pt-4">
+              <Button variant="outline" onClick={() => setIsSubscriptionDialogOpen(false)}>
+                {language === "zh" ? "取消" : "Cancel"}
+              </Button>
+              <Button
+                onClick={() => {
+                  // Handle subscription level assignment
+                  console.log(`Assigning subscription level ${selectedSubscriptionLevel} to tenant ${selectedTenant}`)
+                  setIsSubscriptionDialogOpen(false)
+                }}
+              >
+                {language === "zh" ? "确认分配" : "Confirm Assignment"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialogs for Add/Config Provider */}
+      <Dialog open={isAddProviderOpen} onOpenChange={setIsAddProviderOpen}>
+        <DialogContent className="bg-card border-border max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {language === "zh"
+                ? providerType === "model"
+                  ? "添加模型供应商"
+                  : "添加数据供应商"
+                : providerType === "model"
+                  ? "Add Model Provider"
+                  : "Add Data Provider"}
+            </DialogTitle>
+            <DialogDescription>
+              {language === "zh" ? "填写供应商信息以添加新的货源" : "Fill in provider information to add a new source"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="provider-name">{language === "zh" ? "供应商名称" : "Provider Name"}</Label>
+              <Input
+                id="provider-name"
+                placeholder={language === "zh" ? "例: OpenAI" : "e.g., OpenAI"}
+                value={providerForm.name}
+                onChange={(e) => setProviderForm({ ...providerForm, name: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-url">{language === "zh" ? "API URL / 服务端点" : "API URL / Endpoint"}</Label>
+              <Input
+                id="provider-url"
+                placeholder={language === "zh" ? "例: https://api.openai.com/v1" : "e.g., https://api.openai.com/v1"}
+                value={providerForm.url}
+                onChange={(e) => setProviderForm({ ...providerForm, url: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="provider-key">{language === "zh" ? "API 密钥" : "API Key"}</Label>
+              <Input
+                id="provider-key"
+                type="password"
+                placeholder={language === "zh" ? "输入 API 密钥" : "Enter API key"}
+                value={providerForm.apiKey}
+                onChange={(e) => setProviderForm({ ...providerForm, apiKey: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            {providerType === "model" && (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="provider-models">{language === "zh" ? "可调用模型" : "Available Models"}</Label>
+                  <Input
+                    id="provider-models"
+                    placeholder={
+                      language === "zh"
+                        ? "例: gpt-4, gpt-3.5-turbo (逗号分隔)"
+                        : "e.g., gpt-4, gpt-3.5-turbo (comma separated)"
+                    }
+                    value={providerForm.models}
+                    onChange={(e) => setProviderForm({ ...providerForm, models: e.target.value })}
+                    className="bg-background border-border text-foreground"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {language === "zh" ? "多个模型请用逗号分隔" : "Separate multiple models with commas"}
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="provider-rpm">
+                      {language === "zh" ? "RPM (每分钟请求数)" : "RPM (Requests Per Minute)"}
+                    </Label>
+                    <Input
+                      id="provider-rpm"
+                      type="number"
+                      placeholder={language === "zh" ? "例: 10000" : "e.g., 10000"}
+                      value={providerForm.rpm}
+                      onChange={(e) => setProviderForm({ ...providerForm, rpm: e.target.value })}
+                      className="bg-background border-border text-foreground"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="provider-tpm">
+                      {language === "zh" ? "TPM (每分钟令牌数)" : "TPM (Tokens Per Minute)"}
+                    </Label>
+                    <Input
+                      id="provider-tpm"
+                      type="number"
+                      placeholder={language === "zh" ? "例: 500000" : "e.g., 500000"}
+                      value={providerForm.tpm}
+                      onChange={(e) => setProviderForm({ ...providerForm, tpm: e.target.value })}
+                      className="bg-background border-border text-foreground"
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddProviderOpen(false)}>
+              {text.cancel}
+            </Button>
+            <Button className="bg-primary text-primary-foreground" onClick={handleSaveProvider}>
+              {language === "zh" ? "添加供应商" : "Add Provider"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isConfigProviderOpen} onOpenChange={setIsConfigProviderOpen}>
+        <DialogContent className="bg-card border-border max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{language === "zh" ? "配置供应商" : "Configure Provider"}</DialogTitle>
+            <DialogDescription>
+              {language === "zh"
+                ? `修改 "${selectedProvider?.name}" 的配置信息`
+                : `Modify configuration for "${selectedProvider?.name}"`}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="config-provider-name">{language === "zh" ? "供应商名称" : "Provider Name"}</Label>
+              <Input
+                id="config-provider-name"
+                value={providerForm.name}
+                onChange={(e) => setProviderForm({ ...providerForm, name: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="config-provider-url">
+                {language === "zh" ? "API URL / 服务端点" : "API URL / Endpoint"}
+              </Label>
+              <Input
+                id="config-provider-url"
+                value={providerForm.url}
+                onChange={(e) => setProviderForm({ ...providerForm, url: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="config-provider-key">{language === "zh" ? "API 密钥" : "API Key"}</Label>
+              <Input
+                id="config-provider-key"
+                type="password"
+                value={providerForm.apiKey}
+                onChange={(e) => setProviderForm({ ...providerForm, apiKey: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+              <p className="text-xs text-muted-foreground">
+                {language === "zh" ? "留空则不修改密钥" : "Leave blank to keep existing key"}
+              </p>
+            </div>
+
+            {providerType === "model" && (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="config-provider-models">
+                    {language === "zh" ? "可调用模型" : "Available Models"}
+                  </Label>
+                  <Input
+                    id="config-provider-models"
+                    value={providerForm.models}
+                    onChange={(e) => setProviderForm({ ...providerForm, models: e.target.value })}
+                    className="bg-background border-border text-foreground"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="config-provider-rpm">
+                      {language === "zh" ? "RPM (每分钟请求数)" : "RPM (Requests Per Minute)"}
+                    </Label>
+                    <Input
+                      id="config-provider-rpm"
+                      type="number"
+                      value={providerForm.rpm}
+                      onChange={(e) => setProviderForm({ ...providerForm, rpm: e.target.value })}
+                      className="bg-background border-border text-foreground"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="config-provider-tpm">
+                      {language === "zh" ? "TPM (每分钟令牌数)" : "TPM (Tokens Per Minute)"}
+                    </Label>
+                    <Input
+                      id="config-provider-tpm"
+                      type="number"
+                      value={providerForm.tpm}
+                      onChange={(e) => setProviderForm({ ...providerForm, tpm: e.target.value })}
+                      className="bg-background border-border text-foreground"
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsConfigProviderOpen(false)}>
+              {text.cancel}
+            </Button>
+            <Button className="bg-primary text-primary-foreground" onClick={handleSaveProvider}>
+              {language === "zh" ? "保存修改" : "Save Changes"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog for Add New Admin */}
+      <Dialog open={showAddAdminDialog} onOpenChange={setShowAddAdminDialog}>
+        <DialogContent className="max-w-md bg-background border-border">
+          <DialogHeader>
+            <DialogTitle className="text-foreground">{t("添加新管理员", "Add New Administrator")}</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              {t("创建新的管理员账户并分配角色", "Create a new administrator account and assign a role")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium text-foreground mb-1 block">{t("姓名", "Name")}</label>
+              <Input
+                placeholder={t("输入管理员姓名", "Enter administrator name")}
+                value={newAdminForm.name}
+                onChange={(e) => setNewAdminForm({ ...newAdminForm, name: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-foreground mb-1 block">{t("邮箱", "Email")}</label>
+              <Input
+                type="email"
+                placeholder={t("输入邮箱地址", "Enter email address")}
+                value={newAdminForm.email}
+                onChange={(e) => setNewAdminForm({ ...newAdminForm, email: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-foreground mb-1 block">{t("密码", "Password")}</label>
+              <Input
+                type="password"
+                placeholder={t("设置登录密码", "Set login password")}
+                value={newAdminForm.password}
+                onChange={(e) => setNewAdminForm({ ...newAdminForm, password: e.target.value })}
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-foreground mb-1 block">{t("角色", "Role")}</label>
+              <Select
+                value={newAdminForm.role}
+                onValueChange={(value) => setNewAdminForm({ ...newAdminForm, role: value })}
+              >
+                <SelectTrigger className="bg-background border-border text-foreground">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="bg-background border-border">
+                  <SelectItem value="billing-admin" className="text-foreground">
+                    {t("计费管理员", "Billing Administrator")}
+                  </SelectItem>
+                  <SelectItem value="operations-admin" className="text-foreground">
+                    {t("运营管理员", "Operations Administrator")}
+                  </SelectItem>
+                  <SelectItem value="super-admin" className="text-foreground">
+                    {t("超级管理员", "Super Administrator")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground mt-1">
+                {newAdminForm.role === "billing-admin" &&
+                  t("负责平台计费、账单和财务管理", "Responsible for billing, invoices, and financial management")}
+                {newAdminForm.role === "operations-admin" &&
+                  t("负责渠道、资源和系统监控管理", "Responsible for channels, resources, and monitoring")}
+                {newAdminForm.role === "super-admin" &&
+                  t("拥有所有权限，管理整个平台", "Full access to all platform features")}
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowAddAdminDialog(false)}>
+              {t("取消", "Cancel")}
+            </Button>
+            <Button
+              onClick={() => {
+                console.log("[v0] Creating admin:", newAdminForm)
+                setShowAddAdminDialog(false)
+                setNewAdminForm({ name: "", email: "", password: "", role: "billing-admin" })
+              }}
+              disabled={!newAdminForm.name || !newAdminForm.email || !newAdminForm.password}
+            >
+              {t("创建管理员", "Create Administrator")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
new file mode 100644
index 0000000..89fef12
--- /dev/null
+++ b/app/admin/login/page.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card } from "@/components/ui/card"
+import { Eye, EyeOff, Shield, Globe } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useLanguage } from "@/contexts/language-context"
+
+export default function AdminLoginPage() {
+  const router = useRouter()
+  const { language, setLanguage, t } = useLanguage()
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [credentials, setCredentials] = useState({
+    email: "",
+    password: "",
+  })
+
+  const translations = {
+    en: {
+      title: "Taiji Super Admin",
+      subtitle: "Platform Control Center",
+      email: "Admin Email",
+      emailPlaceholder: "admin@taiji.ai",
+      password: "Password",
+      passwordPlaceholder: "Enter admin password",
+      signIn: "Sign In",
+      signingIn: "Authenticating...",
+      footer: "Protected system access only",
+      securityNote: "All access attempts are logged and monitored",
+    },
+    zh: {
+      title: "Taiji 超级管理员",
+      subtitle: "平台控制中心",
+      email: "管理员邮箱",
+      emailPlaceholder: "admin@taiji.ai",
+      password: "密码",
+      passwordPlaceholder: "输入管理员密码",
+      signIn: "登录",
+      signingIn: "正在验证...",
+      footer: "仅限授权系统访问",
+      securityNote: "所有访问尝试均被记录和监控",
+    },
+  }
+
+  const text = translations[language]
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    // Simulate admin authentication
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    // Store admin auth token
+    localStorage.setItem("admin_token", "admin_authenticated")
+
+    router.push("/admin/dashboard")
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Background grid pattern */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+
+      {/* Language selector - top right */}
+      <div className="absolute top-6 right-6 z-10">
+        <Select value={language} onValueChange={(value: "en" | "zh") => setLanguage(value)}>
+          <SelectTrigger className="w-[140px] bg-card border-border">
+            <Globe className="mr-2 h-4 w-4" />
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="zh">中文</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card className="w-full max-w-md bg-card/95 backdrop-blur-sm border-border shadow-2xl relative z-10">
+        <div className="p-8">
+          {/* Logo and title */}
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
+              <Shield className="w-8 h-8 text-primary" />
+            </div>
+            <h1 className="text-3xl font-bold text-foreground mb-2">{text.title}</h1>
+            <p className="text-muted-foreground text-sm">{text.subtitle}</p>
+          </div>
+
+          {/* Login form */}
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-foreground">
+                {text.email}
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={text.emailPlaceholder}
+                value={credentials.email}
+                onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
+                required
+                className="bg-background border-border text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password" className="text-foreground">
+                {text.password}
+              </Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder={text.passwordPlaceholder}
+                  value={credentials.password}
+                  onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
+                  required
+                  className="bg-background border-border text-foreground pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"
+              disabled={isLoading}
+            >
+              {isLoading ? text.signingIn : text.signIn}
+            </Button>
+          </form>
+
+          {/* Footer */}
+          <div className="mt-8 space-y-2">
+            <p className="text-center text-xs text-muted-foreground">{text.footer}</p>
+            <p className="text-center text-xs text-muted-foreground/70">{text.securityNote}</p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/agent-factory/loading.tsx b/app/agent-factory/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/agent-factory/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/agent-factory/page.tsx b/app/agent-factory/page.tsx
new file mode 100644
index 0000000..5d703ad
--- /dev/null
+++ b/app/agent-factory/page.tsx
@@ -0,0 +1,458 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Bot, Cpu, MemoryStick, Zap } from "lucide-react"
+import { useLanguage } from "@/hooks/useLanguage"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { useToast } from "@/hooks/use-toast"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export default function AgentFactoryPage() {
+  const { t } = useLanguage()
+  const { toast } = useToast()
+  const [selectedAgent, setSelectedAgent] = useState<any>(null)
+  const [showDeployDialog, setShowDeployDialog] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [deployConfig, setDeployConfig] = useState({
+    agentCount: 1,
+    model: "gpt-4o-mini",
+    serviceGateway: "", // 新增服务网关字段
+  })
+  const [platformAgents, setPlatformAgents] = useState<any[]>([])
+  const [deployedCount, setDeployedCount] = useState(0)
+  const [stats, setStats] = useState({ cpu: 0, memory: 0 })
+
+  useEffect(() => {
+    loadAgents()
+  }, [])
+
+  const loadAgents = async () => {
+    try {
+      setLoading(true)
+      const result = await TaijiAPIClient.getPlatformAgents()
+      if (result?.success && result.data?.data) {
+        setPlatformAgents(result.data.data)
+      }
+      
+      // 加载已部署的Agent数量
+      try {
+        const agents = await TaijiAPIClient.getAgents(0, 100)
+        if (Array.isArray(agents)) {
+          setDeployedCount(agents.filter((a: any) => a.status === "active" || a.status === "running").length)
+        }
+      } catch (error) {
+        console.error("Failed to load deployed agents:", error)
+      }
+    } catch (error) {
+      console.error("Failed to load platform agents:", error)
+      toast({
+        title: t("加载失败", "Load Failed"),
+        description: t("无法加载Agent列表", "Failed to load agent list"),
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const defaultPlatformAgents = [
+    {
+      id: "weather-agent",
+      name: t("天气查询Agent", "Weather Query Agent"),
+      description: t("提供全球天气信息查询和预报服务", "Provide global weather information query and forecast service"),
+      capabilities: [
+        t("实时天气", "Real-time weather"),
+        t("7天预报", "7-day forecast"),
+        t("气象警告", "Weather alerts"),
+      ],
+      status: "available",
+      icon: "🌤️",
+    },
+    {
+      id: "data-analysis-agent",
+      name: t("数据分析Agent", "Data Analysis Agent"),
+      description: t("执行数据分析、可视化和报告生成", "Perform data analysis, visualization and report generation"),
+      capabilities: [
+        t("数据清洗", "Data cleaning"),
+        t("统计分析", "Statistical analysis"),
+        t("图表生成", "Chart generation"),
+      ],
+      status: "available",
+      icon: "📊",
+    },
+    {
+      id: "doc-processor-agent",
+      name: t("文档处理Agent", "Document Processing Agent"),
+      description: t("智能文档解析、提取和转换", "Intelligent document parsing, extraction and conversion"),
+      capabilities: [t("PDF解析", "PDF parsing"), t("文本提取", "Text extraction"), t("格式转换", "Format conversion")],
+      status: "available",
+      icon: "📄",
+    },
+    {
+      id: "email-agent",
+      name: t("邮件管理Agent", "Email Management Agent"),
+      description: t("自动化邮件处理和智能回复", "Automated email processing and intelligent reply"),
+      capabilities: [
+        t("邮件分类", "Email classification"),
+        t("自动回复", "Auto reply"),
+        t("内容总结", "Content summary"),
+      ],
+      status: "available",
+      icon: "📧",
+    },
+    {
+      id: "api-integration-agent",
+      name: t("API集成Agent", "API Integration Agent"),
+      description: t("连接和编排第三方API服务", "Connect and orchestrate third-party API services"),
+      capabilities: [t("API调用", "API calls"), t("数据转换", "Data transformation"), t("错误处理", "Error handling")],
+      status: "available",
+      icon: "🔌",
+    },
+    {
+      id: "database-agent",
+      name: t("数据库操作Agent", "Database Operations Agent"),
+      description: t("执行数据库查询和数据管理", "Execute database queries and data management"),
+      capabilities: [t("SQL查询", "SQL queries"), t("数据迁移", "Data migration"), t("备份恢复", "Backup & restore")      ],
+      status: "available",
+      icon: "🗄️",
+    },
+  ]
+
+  const handleDeploy = (agent: any) => {
+    setSelectedAgent(agent)
+    setShowDeployDialog(true)
+  }
+
+  const handleConfirmDeploy = async () => {
+    if (!selectedAgent || !deployConfig.serviceGateway) {
+      toast({
+        title: t("错误", "Error"),
+        description: t("请选择服务网关", "Please select service gateway"),
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const result = await TaijiAPIClient.deployAgent({
+        agentId: selectedAgent.id,
+        instances: deployConfig.agentCount,
+        model: deployConfig.model,
+        gateway: deployConfig.serviceGateway as "MCP" | "A2A" | "API",
+      })
+
+      if (result?.success) {
+        toast({
+          title: t("部署成功", "Deployment Successful"),
+          description: t("Agent部署已启动", "Agent deployment started"),
+        })
+        setShowDeployDialog(false)
+        loadAgents() // 重新加载数据
+      } else {
+        throw new Error(result?.message || "Deployment failed")
+      }
+    } catch (error: any) {
+      toast({
+        title: t("部署失败", "Deployment Failed"),
+        description: error.message || t("无法部署Agent", "Failed to deploy agent"),
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t("代理工厂", "Agent Factory")}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t("平台原生Agent部署和资源管理", "Platform native agent deployment and resource management")}
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("可用Agent", "Available Agents")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-12 animate-pulse bg-muted rounded" />
+                ) : (
+                  platformAgents.length || defaultPlatformAgents.length
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("平台原生", "Platform native")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("已部署Agent", "Deployed Agents")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  deployedCount
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("运行中", "Running")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("总CPU使用", "Total CPU Usage")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.cpu || 0
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("核心", "Cores")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("总内存使用", "Total Memory Usage")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-16 animate-pulse bg-muted rounded" />
+                ) : (
+                  `${stats.memory || 0}GB`
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("已分配", "Allocated")}</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("平台原生Agent库", "Platform Native Agent Library")}</CardTitle>
+            <CardDescription>
+              {t("选择并部署预构建的Agent到您的资源", "Select and deploy pre-built agents to your resources")}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {[1, 2, 3].map((i) => (
+                  <Card key={i} className="animate-pulse">
+                    <CardHeader className="pb-3">
+                      <div className="h-4 w-24 bg-muted rounded" />
+                    </CardHeader>
+                    <CardContent>
+                      <div className="h-20 bg-muted rounded" />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {(platformAgents.length > 0 ? platformAgents : defaultPlatformAgents).map((agent) => (
+                  <Card key={agent.id} className="border-primary/20 hover:border-primary/40 transition-colors">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="text-4xl">{agent.icon}</div>
+                        <Badge className="bg-green-500/10 text-green-500">{agent.status}</Badge>
+                      </div>
+                      <CardTitle className="text-base">{agent.name}</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <p className="text-sm text-muted-foreground">{agent.description}</p>
+                      <div className="space-y-2">
+                        <p className="text-xs font-medium text-muted-foreground">{t("核心能力", "Core Capabilities")}:</p>
+                        <div className="flex flex-wrap gap-1">
+                          {agent.capabilities.map((cap: string) => (
+                            <Badge key={cap} variant="outline" className="text-xs">
+                              {cap}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                      <Button className="w-full gap-2" onClick={() => handleDeploy(agent)}>
+                        <Zap className="h-4 w-4" />
+                        {t("部署Agent", "Deploy Agent")}
+                      </Button>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 部署Agent对话框 */}
+      <Dialog open={showDeployDialog} onOpenChange={setShowDeployDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("部署", "Deploy")} {selectedAgent?.name}
+            </DialogTitle>
+            <DialogDescription>
+              {t("配置Agent的运行环境和实例数量", "Configure runtime environment and instance count for agent")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="rounded-lg bg-muted p-4">
+              <div className="flex items-start gap-3">
+                <div className="text-3xl">{selectedAgent?.icon}</div>
+                <div>
+                  <h3 className="font-semibold">{selectedAgent?.name}</h3>
+                  <p className="text-sm text-muted-foreground mt-1">{selectedAgent?.description}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t pt-4 space-y-4">
+              <h3 className="font-semibold flex items-center gap-2">
+                <Cpu className="h-4 w-4" />
+                {t("资源配置", "Resource Configuration")}
+              </h3>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>{t("Agent实例数", "Agent Instances")}</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="10"
+                    value={deployConfig.agentCount}
+                    onChange={(e) => setDeployConfig({ ...deployConfig, agentCount: Number.parseInt(e.target.value) })}
+                  />
+                  <p className="text-xs text-muted-foreground">{t("建议范围: 1-10", "Recommended: 1-10")}</p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t("使用的模型", "Model to Use")}</Label>
+                  <Select
+                    value={deployConfig.model}
+                    onValueChange={(value) => setDeployConfig({ ...deployConfig, model: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="gpt-4o">GPT-4o</SelectItem>
+                      <SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem>
+                      <SelectItem value="claude-3.5-sonnet">Claude 3.5 Sonnet</SelectItem>
+                      <SelectItem value="grok-4">Grok 4</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>{t("服务网关", "Service Gateway")} *</Label>
+                <Select
+                  value={deployConfig.serviceGateway}
+                  onValueChange={(value) => setDeployConfig({ ...deployConfig, serviceGateway: value })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("选择服务网关类型", "Select service gateway type")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="mcp">MCP</SelectItem>
+                    <SelectItem value="a2a">A2A</SelectItem>
+                    <SelectItem value="api">API</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  {t("选择Agent使用的服务网关协议", "Select the service gateway protocol for the agent")}
+                </p>
+              </div>
+
+              <div className="rounded-lg bg-primary/5 border border-primary/20 p-4">
+                <p className="font-medium mb-3 flex items-center gap-2">
+                  <Bot className="h-4 w-4" />
+                  {t("部署摘要", "Deployment Summary")}
+                </p>
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div className="flex items-center gap-2">
+                    <Zap className="h-4 w-4 text-muted-foreground" />
+                    <span>
+                      {deployConfig.agentCount} {t("个实例", "instances")}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Bot className="h-4 w-4 text-muted-foreground" />
+                    <span>{deployConfig.model}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Cpu className="h-4 w-4 text-muted-foreground" />
+                    <span>
+                      2 {t("核/实例", "cores/instance")} ({t("固定", "Fixed")})
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <MemoryStick className="h-4 w-4 text-muted-foreground" />
+                    <span>
+                      4GB/{t("实例", "instance")} ({t("固定", "Fixed")})
+                    </span>
+                  </div>
+                </div>
+                {deployConfig.serviceGateway && (
+                  <div className="mt-2 text-sm">
+                    <span className="text-muted-foreground">{t("服务网关", "Service Gateway")}: </span>
+                    <span className="font-medium uppercase">{deployConfig.serviceGateway}</span>
+                  </div>
+                )}
+                <div className="mt-3 pt-3 border-t border-primary/20">
+                  <p className="text-xs text-muted-foreground">
+                    {t("总资源", "Total resources")}: {deployConfig.agentCount * 2} {t("核", "cores")},{" "}
+                    {deployConfig.agentCount * 4}GB {t("内存", "memory")}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDeployDialog(false)}>
+              {t("取消", "Cancel")}
+            </Button>
+            <Button disabled={!deployConfig.serviceGateway} onClick={handleConfirmDeploy}>
+              {t("确认部署", "Confirm Deployment")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DashboardLayout>
+  )
+}
diff --git a/app/billing/page.tsx b/app/billing/page.tsx
new file mode 100644
index 0000000..814f5b8
--- /dev/null
+++ b/app/billing/page.tsx
@@ -0,0 +1,522 @@
+"use client"
+
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Zap, Download, Filter, Calendar, Plus, Wallet } from "lucide-react"
+import { Progress } from "@/components/ui/progress"
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, LineChart, Line } from "recharts"
+import { useLanguage } from "@/hooks/useLanguage"
+import { useState, useEffect } from "react"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { useToast } from "@/hooks/use-toast"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export default function BillingPage() {
+  const { t } = useLanguage()
+  const { toast } = useToast()
+  const [loading, setLoading] = useState(true)
+  const [showFilterDialog, setShowFilterDialog] = useState(false)
+  const [showDateDialog, setShowDateDialog] = useState(false)
+  const [showExportDialog, setShowExportDialog] = useState(false)
+  const [showRechargeDialog, setShowRechargeDialog] = useState(false)
+  const [rechargeAmount, setRechargeAmount] = useState("")
+  const [balance, setBalance] = useState({ balance: 0, monthlySpent: 0, euBalance: 0 })
+  const [euUsageData, setEuUsageData] = useState<Array<{ date: string; eu: number }>>([])
+  const [costBreakdown, setCostBreakdown] = useState<Array<{ category: string; cost: number; eu: number }>>([])
+  const [resourceUsage, setResourceUsage] = useState({
+    cpu: { used: 0, total: 100 },
+    memory: { used: 0, total: 200 },
+    storage: { used: 0, total: 1000 },
+    apiCalls: { used: 0, total: 100000 },
+  })
+
+  useEffect(() => {
+    loadBillingData()
+  }, [])
+
+  const loadBillingData = async () => {
+    try {
+      setLoading(true)
+      
+      // 并行加载数据
+      const [balanceResult, historyResult, costResult] = await Promise.allSettled([
+        TaijiAPIClient.getBillingBalance(),
+        TaijiAPIClient.getBillingHistory({
+          startTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+          endTime: new Date().toISOString(),
+        }),
+        TaijiAPIClient.getBillingHistory({
+          startTime: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString(),
+          endTime: new Date().toISOString(),
+        }),
+      ])
+
+      // 处理余额
+      if (balanceResult.status === "fulfilled" && balanceResult.value?.success) {
+        const data = balanceResult.value.data
+        setBalance({
+          balance: data.balance || 0,
+          monthlySpent: data.monthlySpent || 0,
+          euBalance: data.euBalance || 0,
+        })
+      }
+
+      // 处理历史数据（用于图表）
+      if (historyResult.status === "fulfilled" && historyResult.value?.success) {
+        const records = historyResult.value.data?.records || []
+        // 按日期聚合EU消耗
+        const dailyEu: Record<string, number> = {}
+        records.forEach((record: any) => {
+          const date = new Date(record.timestamp).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+          dailyEu[date] = (dailyEu[date] || 0) + (record.eu || 0)
+        })
+        setEuUsageData(
+          Object.entries(dailyEu).map(([date, eu]) => ({ date, eu })).slice(-8),
+        )
+      }
+
+      // 处理费用明细
+      if (costResult.status === "fulfilled" && costResult.value?.success) {
+        const records = costResult.value.data?.records || []
+        // 按类别聚合费用
+        const categoryCosts: Record<string, { cost: number; eu: number }> = {}
+        records.forEach((record: any) => {
+          const category = record.agentType || "Other"
+          if (!categoryCosts[category]) {
+            categoryCosts[category] = { cost: 0, eu: 0 }
+          }
+          categoryCosts[category].cost += record.cost || 0
+          categoryCosts[category].eu += record.eu || 0
+        })
+        setCostBreakdown(
+          Object.entries(categoryCosts).map(([category, data]) => ({
+            category,
+            ...data,
+          })),
+        )
+      }
+    } catch (error) {
+      console.error("Failed to load billing data:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRecharge = async () => {
+    if (!rechargeAmount || Number.parseFloat(rechargeAmount) <= 0) {
+      toast({
+        title: t("错误", "Error"),
+        description: t("请输入有效的充值金额", "Please enter a valid amount"),
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const result = await TaijiAPIClient.rechargeBalance(Number.parseFloat(rechargeAmount))
+      if (result?.success) {
+        toast({
+          title: t("充值成功", "Recharge Successful"),
+          description: t("余额已更新", "Balance updated"),
+        })
+        setShowRechargeDialog(false)
+        setRechargeAmount("")
+        loadBillingData()
+      } else {
+        throw new Error(result?.message || "Recharge failed")
+      }
+    } catch (error: any) {
+      toast({
+        title: t("充值失败", "Recharge Failed"),
+        description: error.message || t("无法完成充值", "Failed to recharge"),
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t("计费与资源平面", "Billing & Resources Plane")}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t("即用即付，按实际消费计费", "Pay-as-you-go, billing based on actual consumption")}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" className="gap-2 bg-transparent" onClick={() => setShowDateDialog(true)}>
+              <Calendar className="h-4 w-4" />
+              {t("时间查询", "Date Query")}
+            </Button>
+            <Button variant="outline" className="gap-2 bg-transparent" onClick={() => setShowFilterDialog(true)}>
+              <Filter className="h-4 w-4" />
+              {t("筛选", "Filter")}
+            </Button>
+            <Button variant="outline" className="gap-2 bg-transparent" onClick={() => setShowExportDialog(true)}>
+              <Download className="h-4 w-4" />
+              {t("导出", "Export")}
+            </Button>
+          </div>
+        </div>
+
+        <Card className="bg-gradient-to-r from-primary/10 to-primary/5 border-primary/20">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="flex items-center gap-2">
+                  <Wallet className="h-5 w-5" />
+                  {t("账户余额", "Account Balance")}
+                </CardTitle>
+                <CardDescription className="mt-2">
+                  {t("即用即付模式，按实际消费扣费", "Pay-as-you-go mode, deducted based on actual consumption")}
+                </CardDescription>
+              </div>
+              <Button className="gap-2" onClick={() => setShowRechargeDialog(true)}>
+                <Plus className="h-4 w-4" />
+                {t("充值", "Recharge")}
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-4xl font-bold">
+              {loading ? (
+                <span className="inline-block h-10 w-32 animate-pulse bg-muted rounded" />
+              ) : (
+                `¥${balance.balance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+              )}
+            </div>
+            <p className="text-sm text-muted-foreground mt-2">
+              {loading ? (
+                <span className="inline-block h-4 w-40 animate-pulse bg-muted rounded" />
+              ) : (
+                t("本月已消费", "This month consumed") + `: ¥${balance.monthlySpent.toFixed(2)}`
+              )}
+            </p>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4 md:grid-cols-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{t("EU余额", "EU Balance")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-16 animate-pulse bg-muted rounded" />
+                ) : (
+                  balance.euBalance.toLocaleString()
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("可用单位", "Available units")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{t("本月", "This Month")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-16 animate-pulse bg-muted rounded" />
+                ) : (
+                  `¥${balance.monthlySpent.toFixed(2)}`
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                {loading ? "" : `${Math.round(balance.monthlySpent * 100)} EU ${t("已消费", "consumed")}`}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("平均每日费用", "Avg Daily Cost")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">$34</div>
+              <p className="text-xs text-green-500 mt-1">-5% {t("vs上月", "vs last month")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{t("预计", "Projected")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">$1,050</div>
+              <p className="text-xs text-muted-foreground mt-1">{t("月底", "End of month")}</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("EU消费历史", "EU Consumption History")}</CardTitle>
+            <CardDescription>{t("执行单位使用情况随时间变化", "Execution Units usage over time")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <LineChart data={euUsageData.length > 0 ? euUsageData : [{ date: "", eu: 0 }]}>
+                <XAxis dataKey="date" stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+                <YAxis stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "oklch(0.15 0 0)",
+                    border: "1px solid oklch(0.22 0 0)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="eu"
+                  stroke="oklch(0.60 0.20 264)"
+                  strokeWidth={2}
+                  dot={{ fill: "oklch(0.60 0.20 264)", r: 4 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("费用明细", "Cost Breakdown")}</CardTitle>
+              <CardDescription>{t("当月支出（按类别）", "Current month spending by category")}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={250}>
+                <BarChart data={costBreakdown.length > 0 ? costBreakdown : [{ category: "", cost: 0, eu: 0 }]}>
+                  <XAxis dataKey="category" stroke="oklch(0.45 0 0)" fontSize={11} tickLine={false} />
+                  <YAxis stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "oklch(0.15 0 0)",
+                      border: "1px solid oklch(0.22 0 0)",
+                      borderRadius: "8px",
+                    }}
+                  />
+                  <Bar dataKey="cost" fill="oklch(0.65 0.16 220)" radius={[8, 8, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("资源使用", "Resource Usage")}</CardTitle>
+              <CardDescription>{t("当前分配和限制", "Current allocation and limits")}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[
+                {
+                  name: "CPU",
+                  used: resourceUsage.cpu.used,
+                  total: resourceUsage.cpu.total,
+                  unit: t("核", "cores"),
+                },
+                {
+                  name: t("内存", "Memory"),
+                  used: resourceUsage.memory.used,
+                  total: resourceUsage.memory.total,
+                  unit: "GB",
+                },
+                {
+                  name: t("存储", "Storage"),
+                  used: resourceUsage.storage.used,
+                  total: resourceUsage.storage.total,
+                  unit: "GB",
+                },
+                {
+                  name: t("API调用", "API Calls"),
+                  used: resourceUsage.apiCalls.used,
+                  total: resourceUsage.apiCalls.total,
+                  unit: t("次", "calls"),
+                },
+              ].map((resource) => (
+                <div key={resource.name}>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm font-medium">{resource.name}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {resource.used} / {resource.total} {resource.unit}
+                    </span>
+                  </div>
+                  <Progress value={(resource.used / resource.total) * 100} className="h-2" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("EU定价详情", "EU Pricing Details")}</CardTitle>
+            <CardDescription>{t("了解执行单位", "Understanding Execution Units")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+              {[
+                {
+                  service: t("模型推理", "Model Inference"),
+                  rate: "0.025 EU/call",
+                  desc: t("LLM API调用", "LLM API calls"),
+                },
+                {
+                  service: t("API工具", "API Tools"),
+                  rate: "0.001 EU/call",
+                  desc: t("外部API使用", "External API usage"),
+                },
+                {
+                  service: t("VM计算", "VM Compute"),
+                  rate: "0.5 EU/hour",
+                  desc: t("Firecracker VM运行时", "Firecracker VM runtime"),
+                },
+                {
+                  service: t("数据存储", "Data Storage"),
+                  rate: "0.01 EU/GB/day",
+                  desc: t("持久存储", "Persistent storage"),
+                },
+              ].map((pricing) => (
+                <div key={pricing.service} className="rounded-lg border border-border bg-muted/30 p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Zap className="h-4 w-4 text-primary" />
+                    <h3 className="font-semibold text-sm">{pricing.service}</h3>
+                  </div>
+                  <p className="text-lg font-mono font-bold mb-1">{pricing.rate}</p>
+                  <p className="text-xs text-muted-foreground">{pricing.desc}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("筛选选项", "Filter Options")}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div>
+                <Label>{t("客户名称", "Customer Name")}</Label>
+                <Input placeholder={t("输入客户名称", "Enter customer name")} />
+              </div>
+              <div>
+                <Label>{t("最小调用次数", "Min Calls")}</Label>
+                <Input type="number" placeholder="0" />
+              </div>
+              <div>
+                <Label>{t("最大调用次数", "Max Calls")}</Label>
+                <Input type="number" placeholder="10000" />
+              </div>
+              <Button className="w-full">{t("应用筛选", "Apply Filter")}</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={showDateDialog} onOpenChange={setShowDateDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("时间范围", "Date & Time Range")}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div>
+                <Label>{t("开始时间 (年-月-日 时:分)", "Start Date & Time (YYYY-MM-DD HH:MM)")}</Label>
+                <Input type="datetime-local" />
+              </div>
+              <div>
+                <Label>{t("结束时间 (年-月-日 时:分)", "End Date & Time (YYYY-MM-DD HH:MM)")}</Label>
+                <Input type="datetime-local" />
+              </div>
+              <Button className="w-full">{t("查询", "Query")}</Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("导出格式", "Export Format")}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <p className="text-sm text-muted-foreground">{t("选择导出文件格式", "Select export file format")}</p>
+              <div className="grid grid-cols-2 gap-3">
+                <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                  <Download className="h-5 w-5" />
+                  <span>Excel (.xlsx)</span>
+                </Button>
+                <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                  <Download className="h-5 w-5" />
+                  <span>CSV (.csv)</span>
+                </Button>
+                <Button variant="outline" className="h-20 flex-col gap-2 col-span-2 bg-transparent">
+                  <Download className="h-5 w-5" />
+                  <span>PDF (.pdf)</span>
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={showRechargeDialog} onOpenChange={setShowRechargeDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("账户充值", "Account Recharge")}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div>
+                <Label>{t("充值金额 (USD)", "Recharge Amount (USD)")}</Label>
+                <Input
+                  type="number"
+                  placeholder="100"
+                  value={rechargeAmount}
+                  onChange={(e) => setRechargeAmount(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground mt-1">{t("最低充值金额: $10", "Minimum recharge: $10")}</p>
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {[50, 100, 500, 1000].map((amount) => (
+                  <Button
+                    key={amount}
+                    variant="outline"
+                    onClick={() => setRechargeAmount(amount.toString())}
+                    className="bg-transparent"
+                  >
+                    ${amount}
+                  </Button>
+                ))}
+              </div>
+              <div className="rounded-lg bg-muted p-3 space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span>{t("充值金额", "Recharge Amount")}</span>
+                  <span className="font-medium">${rechargeAmount || "0.00"}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span>{t("当前余额", "Current Balance")}</span>
+                  <span className="font-medium">$2,487.50</span>
+                </div>
+                <div className="flex justify-between text-sm font-bold pt-2 border-t">
+                  <span>{t("充值后余额", "Balance After Recharge")}</span>
+                  <span>${(2487.5 + Number.parseFloat(rechargeAmount || "0")).toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowRechargeDialog(false)}>
+                {t("取消", "Cancel")}
+              </Button>
+              <Button onClick={handleRecharge}>{t("确认充值", "Confirm Recharge")}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </DashboardLayout>
+  )
+}
diff --git a/app/channel/dashboard/loading.tsx b/app/channel/dashboard/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/channel/dashboard/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/channel/dashboard/page.tsx b/app/channel/dashboard/page.tsx
new file mode 100644
index 0000000..487f656
--- /dev/null
+++ b/app/channel/dashboard/page.tsx
@@ -0,0 +1,2109 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  X,
+  Database,
+  Calendar,
+  Filter,
+  Download,
+  Globe,
+  LogOut,
+  Settings,
+  Plus,
+  Eye,
+  Edit,
+  UserPlus,
+  Check,
+  Search,
+  MoreVertical,
+  Building2,
+  Users,
+  DollarSign,
+  Activity,
+  TrendingUp,
+  Wallet,
+  CreditCard,
+} from "lucide-react" // Added X, Database, Globe, LogOut, Settings, Plus, Eye, Edit, UserPlus, Check, Search, MoreVertical, Building2, Users, DollarSign, Activity, TrendingUp, Wallet, CreditCard icons
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useLanguage } from "@/contexts/language-context"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+
+export default function ChannelDashboard() {
+  const router = useRouter()
+  const { language, setLanguage } = useLanguage()
+  const [isAddTenantOpen, setIsAddTenantOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState("overview")
+  // ADD STATE VARIABLES FOR RESOURCES MANAGEMENT
+  const [computeConfigOpen, setComputeConfigOpen] = useState(false)
+  const [selectedAgent, setSelectedAgent] = useState<any>(null)
+  const [isAddProviderOpen, setIsAddProviderOpen] = useState(false)
+  const [providerType, setProviderType] = useState<"model" | "data">("model")
+  const [providerForm, setProviderForm] = useState({
+    name: "",
+    apiUrl: "",
+    apiKey: "",
+    models: "",
+    rpm: "",
+    tpm: "",
+  })
+  const [providerApplications, setProviderApplications] = useState<any[]>([])
+  const [isApplicationDialogOpen, setIsApplicationDialogOpen] = useState(false)
+  const [applicationForm, setApplicationForm] = useState({
+    providerName: "",
+    reason: "",
+    expectedModels: "",
+    type: "model", // Added for application type
+    agentType: "", // Added for agent application
+    agentQuantity: 0, // Added for agent application
+    rpm: 0, // Added for model application
+    tpm: 0, // Added for model application
+  })
+  const [allocateAgentDialogOpen, setAllocateAgentDialogOpen] = useState(false)
+  const [selectedTenantForAgentAllocation, setSelectedTenantForAgentAllocation] = useState<any>(null)
+  const [tenantAgentAllocations, setTenantAgentAllocations] = useState<{
+    [key: string]: { [key: string]: number }
+  }>({})
+  const [tenantModelAllocations, setTenantModelAllocations] = useState<
+    Record<string, Array<{ modelName: string; rpm: number; tpm: number }>>
+  >({})
+
+  // Settings related states
+  const [isPermissionDialogOpen, setIsPermissionDialogOpen] = useState(false)
+  const [selectedRole, setSelectedRole] = useState<string>("billing")
+  const [rolePermissions, setRolePermissions] = useState<Record<string, string[]>>({
+    billing: ["overview", "tenants", "billing"],
+    operations: ["overview", "tenants", "resources"],
+  })
+  const [isAddAdminOpen, setIsAddAdminOpen] = useState(false)
+
+  // ADD STATE FOR BILLING MANAGEMENT DIALOG
+  const [billingManagementDialogOpen, setBillingManagementDialogOpen] = useState(false)
+  const [selectedTenantForBilling, setSelectedTenantForBilling] = useState<any>(null)
+  const [tenantBillingSettings, setTenantBillingSettings] = useState<{
+    [key: string]: { tier: string; discount: number }
+  }>({})
+
+  const [customAgentResources, setCustomAgentResources] = useState<Record<string, { cpu: number; memory: number }>>({})
+
+  // CHANGE: Add state variables for dialogs
+  const [showFilterDialog, setShowFilterDialog] = useState(false)
+  const [showDateDialog, setShowDateDialog] = useState(false)
+  const [showExportDialog, setShowExportDialog] = useState(false)
+
+  const [showRechargeDialog, setShowRechargeDialog] = useState(false)
+  const [showCreditDialog, setShowCreditDialog] = useState(false)
+  const [selectedTenantForRecharge, setSelectedTenantForRecharge] = useState<any>(null)
+  const [rechargeAmount, setRechargeAmount] = useState("")
+  const [creditLimit, setCreditLimit] = useState("")
+
+  const translations = {
+    en: {
+      title: "Channel Partner Portal",
+      subtitle: "Enterprise Solutions Inc",
+      dashboard: "Dashboard",
+      myTenants: "My Tenants",
+      providers: "Providers",
+      billing: "Billing",
+      settings: "Settings",
+      logout: "Logout",
+      totalTenants: "Total Tenants",
+      activeTenants: "Active Tenants",
+      monthlyRevenue: "Monthly Revenue",
+      commission: "Commission Earned",
+      searchTenants: "Search tenants...",
+      tenantName: "Tenant Name",
+      status: "Status",
+      plan: "Plan",
+      users: "Users",
+      revenue: "Revenue",
+      actions: "Actions",
+      active: "Active",
+      suspended: "Suspended",
+      enterprise: "Enterprise",
+      professional: "Professional",
+      starter: "Starter",
+      viewDetails: "View Details",
+      edit: "Edit",
+      manageBilling: "Manage Billing",
+      addTenant: "Add Tenant",
+      createTenant: "Create New Tenant",
+      createTenantDesc: "Add a new tenant to your portfolio",
+      companyName: "Company Name",
+      contactPerson: "Contact Person",
+      contactEmail: "Contact Email",
+      selectPlan: "Select Plan",
+      cancel: "Cancel",
+      create: "Create",
+      modelProviders: "Model Providers",
+      dataProviders: "Data Providers",
+      platformProviders: "Platform Providers",
+      customProviders: "Custom Providers",
+      addProvider: "Add Provider",
+      addModelProvider: "Add Model Provider",
+      addDataProvider: "Add Data Provider",
+      providerName: "Provider Name",
+      apiKey: "API Key",
+      apiEndpoint: "API Endpoint",
+      description: "Description",
+      enabled: "Enabled",
+      disabled: "Disabled",
+      totalRequests: "Total Requests",
+      avgLatency: "Avg Latency",
+      uptime: "Uptime",
+      capacity: "Capacity",
+      applyForModelProvider: "Apply for Model Provider",
+      applicationReason: "Application Reason",
+      expectedModels: "Expected Models",
+      submitApplication: "Submit Application",
+      approved: "Approved",
+      pending: "Pending",
+      allocateAgents: "Allocate Agents",
+      allocationSummary: "Allocation Summary",
+      availableAgents: "Available Agents",
+    },
+    zh: {
+      title: "渠道合作伙伴平台",
+      subtitle: "企业解决方案公司",
+      dashboard: "仪表板",
+      myTenants: "我的租户",
+      providers: "供应商",
+      billing: "计费",
+      settings: "设置",
+      logout: "退出",
+      totalTenants: "总租户数",
+      activeTenants: "活跃租户",
+      monthlyRevenue: "月度收入",
+      commission: "已获佣金",
+      searchTenants: "搜索租户...",
+      tenantName: "租户名称",
+      status: "状态",
+      plan: "方案",
+      users: "用户数",
+      revenue: "收入",
+      actions: "操作",
+      active: "活跃",
+      suspended: "已暂停",
+      enterprise: "企业版",
+      professional: "专业版",
+      starter: "入门版",
+      viewDetails: "查看详情",
+      edit: "编辑",
+      manageBilling: "管理计费",
+      addTenant: "添加租户",
+      createTenant: "创建新租户",
+      createTenantDesc: "向您的租户组合添加新租户",
+      companyName: "公司名称",
+      contactPerson: "联系人",
+      contactEmail: "联系邮箱",
+      selectPlan: "选择方案",
+      cancel: "取消",
+      create: "创建",
+      modelProviders: "模型供应商",
+      dataProviders: "数据供应商",
+      platformProviders: "平台供应商",
+      customProviders: "自定义供应商",
+      addProvider: "添加供应商",
+      addModelProvider: "添加模型供应商",
+      addDataProvider: "添加数据供应商",
+      providerName: "供应商名称",
+      apiKey: "API密钥",
+      apiEndpoint: "API端点",
+      description: "描述",
+      enabled: "已启用",
+      disabled: "已禁用",
+      totalRequests: "总请求数",
+      avgLatency: "平均延迟",
+      uptime: "在线率",
+      capacity: "容量",
+      applyForModelProvider: "申请模型供应商",
+      applicationReason: "申请理由",
+      expectedModels: "期望使用的模型",
+      submitApplication: "提交申请",
+      approved: "已授权",
+      pending: "待审批",
+      allocateAgents: "分配Agent",
+      allocationSummary: "分配摘要",
+      availableAgents: "可用Agent",
+    },
+  }
+
+  const text = translations[language]
+
+  useEffect(() => {
+    const token = localStorage.getItem("channel_token")
+    if (!token) {
+      router.push("/channel/login")
+    }
+  }, [router])
+
+  const handleLogout = () => {
+    localStorage.removeItem("channel_token")
+    router.push("/channel/login")
+  }
+
+  const stats = [
+    {
+      title: text.totalTenants,
+      value: "45",
+      change: "+3 this month",
+      icon: Users,
+      trend: "up",
+    },
+    {
+      title: text.activeTenants,
+      value: "42",
+      change: "+5.2%",
+      icon: Activity,
+      trend: "up",
+    },
+    {
+      title: text.monthlyRevenue,
+      value: "$45.2K",
+      change: "+12.8%",
+      icon: DollarSign,
+      trend: "up",
+    },
+    {
+      title: text.commission,
+      value: "$6.78K",
+      change: "15% rate",
+      icon: TrendingUp,
+      trend: "stable",
+    },
+  ]
+
+  const tenants = [
+    {
+      id: 1,
+      name: "Acme Corporation",
+      status: "active",
+      plan: "enterprise",
+      users: 45,
+      revenue: "$3,200",
+      balance: "500.00",
+      creditLimit: "2000.00",
+    },
+    {
+      id: 2,
+      name: "TechStart Inc",
+      status: "active",
+      plan: "professional",
+      users: 28,
+      revenue: "$1,800",
+      balance: "150.00",
+      creditLimit: "1000.00",
+    },
+    {
+      id: 3,
+      name: "Innovation Labs",
+      status: "active",
+      plan: "professional",
+      users: 32,
+      revenue: "$1,800",
+      balance: "200.00",
+      creditLimit: "1500.00",
+    },
+    {
+      id: 4,
+      name: "Digital Solutions",
+      status: "active",
+      plan: "starter",
+      users: 12,
+      revenue: "$890",
+      balance: "50.00",
+      creditLimit: "500.00",
+    },
+    {
+      id: 5,
+      name: "Global Systems",
+      status: "suspended",
+      plan: "enterprise",
+      users: 38,
+      revenue: "$3,200",
+      balance: "0.00",
+      creditLimit: "3000.00",
+    },
+    {
+      id: 6,
+      name: "CloudTech Pro",
+      status: "active",
+      plan: "professional",
+      users: 25,
+      revenue: "$1,800",
+      balance: "300.00",
+      creditLimit: "1200.00",
+    },
+    {
+      id: 7,
+      name: "Data Dynamics",
+      status: "active",
+      plan: "starter",
+      users: 8,
+      revenue: "$890",
+      balance: "25.00",
+      creditLimit: "750.00",
+    },
+    {
+      id: 8,
+      name: "Smart Analytics",
+      status: "active",
+      plan: "professional",
+      users: 30,
+      revenue: "$1,800",
+      balance: "180.00",
+      creditLimit: "1100.00",
+    },
+  ]
+
+  const platformModelProviders = [
+    { id: 1, name: "OpenAI", status: "active", requests: 52000, latency: 150, uptime: "99.9%", icon: "🤖" },
+    { id: 2, name: "Anthropic", status: "active", requests: 38000, latency: 180, uptime: "99.8%", icon: "🧠" },
+    { id: 3, name: "Google AI", status: "active", requests: 25000, latency: 120, uptime: "99.95%", icon: "🔍" },
+    { id: 4, name: "Meta Llama", status: "active", requests: 15000, latency: 95, uptime: "99.7%", icon: "🦙" },
+  ]
+
+  const platformDataProviders = [
+    { id: 1, name: "RapidAPI", status: "active", apis: 8000, calls: 2200000, capacity: "95%", icon: "⚡" },
+    { id: 2, name: "API Hub", status: "active", apis: 5000, calls: 1500000, capacity: "87%", icon: "🔗" },
+    { id: 3, name: "OpenData", status: "active", apis: 3000, calls: 800000, capacity: "92%", icon: "📊" },
+  ]
+
+  const customProviders = {
+    model: [
+      { id: 101, name: "Internal AI Model", status: "active", requests: 5000, latency: 80, uptime: "99.5%" },
+      { id: 102, name: "Custom LLM Endpoint", status: "active", requests: 3200, latency: 200, uptime: "98.9%" },
+    ],
+    data: [
+      { id: 201, name: "Internal Data API", status: "active", apis: 12, calls: 450000, capacity: "70%" },
+      { id: 202, name: "Third-party Data Source", status: "active", apis: 8, calls: 320000, capacity: "65%" },
+    ],
+  }
+
+  const availableAgents = [
+    { name: "Weather Query Agent", description: "用于查询天气信息", available: 100, color: "bg-blue-500", icon: "☁️" },
+    { name: "Data Analysis Agent", description: "用于数据分析", available: 150, color: "bg-green-500", icon: "📊" },
+    {
+      name: "Document Processing Agent",
+      description: "用于文档处理",
+      available: 80,
+      color: "bg-yellow-500",
+      icon: "📄",
+    },
+    { name: "Email Management Agent", description: "用于邮件管理", available: 120, color: "bg-red-500", icon: "✉️" },
+    { name: "API Integration Agent", description: "用于API集成", available: 200, color: "bg-purple-500", icon: "🔗" },
+    {
+      name: "Database Operations Agent",
+      description: "用于数据库操作",
+      available: 50,
+      color: "bg-orange-500",
+      icon: "💾",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur-sm">
+        <div className="flex items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+                <Building2 className="h-5 w-5 text-white" />
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-foreground">{text.title}</h1>
+                <p className="text-xs text-muted-foreground">{text.subtitle}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Select value={language} onValueChange={(value: "en" | "zh") => setLanguage(value)}>
+              <SelectTrigger className="w-[120px] bg-background border-border">
+                <Globe className="mr-2 h-4 w-4" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="en">English</SelectItem>
+                <SelectItem value="zh">中文</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Button variant="ghost" size="sm">
+              <Settings className="h-4 w-4 mr-2" />
+              {text.settings}
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLogout}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              {text.logout}
+            </Button>
+          </div>
+        </div>
+
+        <div className="px-6 py-2 border-t border-border">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="bg-transparent border-b border-border rounded-none">
+              <TabsTrigger
+                value="overview"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
+              >
+                {text.dashboard}
+              </TabsTrigger>
+              <TabsTrigger
+                value="tenants"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
+              >
+                {text.myTenants}
+              </TabsTrigger>
+              {/* UPDATE TABNAVIGATION: REPLACE "PROVIDERS" WITH "RESOURCES" */}
+              <TabsTrigger
+                value="resources"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
+              >
+                {language === "zh" ? "资源管理" : "Resource Management"}
+              </TabsTrigger>
+              {/* CHANGE: Add billing and settings tabs to navigation */}
+              <TabsTrigger
+                value="billing"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
+              >
+                {language === "zh" ? "计费" : "Billing"}
+              </TabsTrigger>
+              <TabsTrigger
+                value="settings"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
+              >
+                {language === "zh" ? "设置" : "Settings"}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="p-6">
+        {activeTab === "overview" && (
+          <div className="space-y-6">
+            {/* Stats grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {stats.map((stat, index) => (
+                <Card key={index} className="p-6 bg-card border-border">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <p className="text-sm text-muted-foreground mb-1">{stat.title}</p>
+                      <p className="text-3xl font-bold text-foreground mb-2">{stat.value}</p>
+                      <div className="flex items-center gap-1">
+                        <TrendingUp className="h-3 w-3 text-green-500" />
+                        <span className="text-xs text-green-500">{stat.change}</span>
+                      </div>
+                    </div>
+                    <div className="p-3 rounded-lg bg-primary/10">
+                      <stat.icon className="h-5 w-5 text-primary" />
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            <div>
+              <h3 className="text-xl font-bold text-foreground mb-4">
+                {language === "zh" ? "可分配Agent概览" : "Assignable Agents Overview"}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {[
+                  { name: "Weather Query Agent", nameZh: "天气查询代理", allocated: 10, icon: "☁️" },
+                  { name: "Data Analysis Agent", nameZh: "数据分析代理", allocated: 15, icon: "📊" },
+                  { name: "Document Processing Agent", nameZh: "文档处理代理", allocated: 8, icon: "📄" },
+                  { name: "Email Management Agent", nameZh: "邮件管理代理", allocated: 12, icon: "✉️" },
+                  { name: "API Integration Agent", nameZh: "API集成代理", allocated: 20, icon: "🔗" },
+                  { name: "Database Operations Agent", nameZh: "数据库操作代理", allocated: 5, icon: "💾" },
+                ].map((agent) => (
+                  <Card key={agent.name} className="p-5 bg-card border-border">
+                    <div className="flex items-start gap-3">
+                      <div className="text-3xl">{agent.icon}</div>
+                      <div className="flex-1">
+                        <h4 className="font-semibold text-foreground mb-1">
+                          {language === "zh" ? agent.nameZh : agent.name}
+                        </h4>
+                        <div className="flex items-center justify-between mt-3">
+                          <span className="text-sm text-muted-foreground">
+                            {language === "zh" ? "可分配数量" : "Available Instances"}
+                          </span>
+                          <span className="text-2xl font-bold text-primary">{agent.allocated}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === "tenants" && (
+          <Card className="p-6 bg-card border-border">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-xl font-semibold text-foreground">{text.myTenants}</h2>
+              <div className="flex items-center gap-3">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input placeholder={text.searchTenants} className="pl-9 w-[240px] bg-background border-border" />
+                </div>
+                <Dialog open={isAddTenantOpen} onOpenChange={setIsAddTenantOpen}>
+                  <DialogTrigger asChild>
+                    <Button className="bg-primary text-primary-foreground">
+                      <Plus className="h-4 w-4 mr-2" />
+                      {text.addTenant}
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="bg-card border-border">
+                    <DialogHeader>
+                      <DialogTitle>{text.createTenant}</DialogTitle>
+                      <DialogDescription>{text.createTenantDesc}</DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="companyName">{text.companyName}</Label>
+                        <Input id="companyName" placeholder="Acme Corp" className="bg-background" />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="contactPerson">{text.contactPerson}</Label>
+                        <Input id="contactPerson" placeholder="John Doe" className="bg-background" />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="email">{text.contactEmail}</Label>
+                        <Input id="email" type="email" placeholder="contact@acme.com" className="bg-background" />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="plan">{text.selectPlan}</Label>
+                        <Select defaultValue="professional">
+                          <SelectTrigger className="bg-background">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="starter">{text.starter} - $890/mo</SelectItem>
+                            <SelectItem value="professional">{text.professional} - $1,800/mo</SelectItem>
+                            <SelectItem value="enterprise">{text.enterprise} - $3,200/mo</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <DialogFooter>
+                      <Button variant="outline" onClick={() => setIsAddTenantOpen(false)}>
+                        {text.cancel}
+                      </Button>
+                      <Button className="bg-primary text-primary-foreground" onClick={() => setIsAddTenantOpen(false)}>
+                        {text.create}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              {tenants.map((tenant) => (
+                <div
+                  key={tenant.id}
+                  className="flex items-center justify-between p-4 rounded-lg bg-background border border-border hover:border-primary/50 transition-colors"
+                >
+                  <div className="flex items-center gap-4 flex-1">
+                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                      <Users className="h-5 w-5 text-primary" />
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium text-foreground">{tenant.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {tenant.users} {text.users} · {text[tenant.plan as keyof typeof text] || tenant.plan}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className={`h-2 w-2 rounded-full ${tenant.status === "active" ? "bg-green-500" : "bg-gray-500"}`}
+                      />
+                      <span className="text-sm text-muted-foreground">
+                        {language === "zh" ? (tenant.status === "active" ? "活跃" : "已暂停") : tenant.status}
+                      </span>
+                    </div>
+                    <p className="text-sm font-medium text-foreground min-w-[80px] text-right">{tenant.revenue}/mo</p>
+                  </div>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem>
+                        <Eye className="h-4 w-4 mr-2" />
+                        {text.viewDetails}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Edit className="h-4 w-4 mr-2" />
+                        {text.edit}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <UserPlus className="h-4 w-4 mr-2" />
+                        {language === "zh" ? "管理用户" : "Manage Users"}
+                      </DropdownMenuItem>
+                      {/* <DropdownMenuItem>
+                        <Cpu className="h-4 w-4 mr-2" />
+                        {text.allocateAgents}
+                      </DropdownMenuItem> */}
+                      {/* Update the tenant action menu item text from "分配Agent" to "分配资源" */}
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setSelectedTenantForAgentAllocation(tenant)
+                          setAllocateAgentDialogOpen(true)
+                        }}
+                      >
+                        <Database className="mr-2 h-4 w-4" />
+                        {language === "zh" ? "分配资源" : "Allocate Resources"}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setSelectedTenantForRecharge(tenant)
+                          setShowRechargeDialog(true)
+                        }}
+                      >
+                        <Wallet className="mr-2 h-4 w-4" />
+                        {language === "zh" ? "充值" : "Recharge"}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setSelectedTenantForRecharge(tenant)
+                          setShowCreditDialog(true)
+                        }}
+                      >
+                        <CreditCard className="mr-2 h-4 w-4" />
+                        {language === "zh" ? "授信额度" : "Credit Limit"}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setSelectedTenantForBilling(tenant)
+                          setBillingManagementDialogOpen(true)
+                        }}
+                      >
+                        <DollarSign className="mr-2 h-4 w-4" />
+                        {language === "zh" ? "管理计费" : "Manage Billing"}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              ))}
+            </div>
+          </Card>
+        )}
+
+        {/* REPLACE PROVIDERS TAB CONTENT WITH RESOURCES MANAGEMENT (ALIGNED WITH ADMIN) */}
+        {activeTab === "resources" && (
+          <div className="space-y-8">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-2xl font-bold text-foreground">
+                  {language === "zh" ? "资源管理" : "Resource Management"}
+                </h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {language === "zh"
+                    ? "监控已分配资源并申请新的模型或Agent"
+                    : "Monitor allocated resources and apply for new models or agents"}
+                </p>
+              </div>
+              <Button className="bg-primary text-primary-foreground" onClick={() => setIsApplicationDialogOpen(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                {language === "zh" ? "提交申请" : "Submit Application"}
+              </Button>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold text-foreground mb-4">
+                {language === "zh" ? "Agent 配额监控" : "Agent Quota Monitoring"}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {availableAgents.map((agent) => (
+                  <Card key={agent.name} className="p-4 bg-card border-border">
+                    <div className="flex items-start justify-between mb-3">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <span className="text-2xl">{agent.icon}</span>
+                          <h4 className="font-semibold text-foreground">{agent.name}</h4>
+                        </div>
+                        <p className="text-xs text-muted-foreground">{agent.description}</p>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="text-muted-foreground">
+                          {language === "zh" ? "剩余配额" : "Remaining Quota"}:
+                        </span>
+                        <span className="text-lg font-bold text-foreground">{agent.available}</span>
+                      </div>
+                      <div className="w-full bg-muted rounded-full h-2">
+                        <div
+                          className={`${agent.color} h-2 rounded-full`}
+                          style={{ width: `${(agent.available / 500) * 100}%` }}
+                        />
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold text-foreground mb-4">
+                {language === "zh" ? "模型管理" : "Model Management"}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {[
+                  {
+                    name: "OpenAI",
+                    type: "Official",
+                    models: ["gpt-4", "gpt-3.5-turbo"],
+                    rpm: 10000,
+                    tpm: 500000,
+                    status: "approved",
+                  },
+                  {
+                    name: "Anthropic",
+                    type: "Official",
+                    models: ["claude-3-opus", "claude-2"],
+                    rpm: 5000,
+                    tpm: 300000,
+                    status: "approved",
+                  },
+                  {
+                    name: "Google AI",
+                    type: "GCP",
+                    models: ["gemini-pro", "palm-2"],
+                    rpm: 8000,
+                    tpm: 400000,
+                    status: "pending",
+                  },
+                ].map((provider) => (
+                  <Card
+                    key={provider.name}
+                    className="p-4 bg-card border-border hover:border-primary/50 transition-colors"
+                  >
+                    <div className="flex items-start justify-between mb-3">
+                      <div>
+                        <h4 className="font-semibold text-foreground">{provider.name}</h4>
+                        <p className="text-xs text-muted-foreground">{provider.type}</p>
+                      </div>
+                      <Badge
+                        variant={provider.status === "approved" ? "default" : "secondary"}
+                        className={
+                          provider.status === "approved"
+                            ? "bg-green-500/10 text-green-500 border-green-500/20"
+                            : "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
+                        }
+                      >
+                        {provider.status === "approved"
+                          ? language === "zh"
+                            ? "已授权"
+                            : "Approved"
+                          : language === "zh"
+                            ? "待审批"
+                            : "Pending"}
+                      </Badge>
+                    </div>
+                    <div className="space-y-2 text-sm">
+                      <div className="flex items-center justify-between">
+                        <span className="text-muted-foreground">{language === "zh" ? "支持模型" : "Models"}:</span>
+                        <span className="text-foreground font-medium">{provider.models.length}</span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-muted-foreground">
+                          {language === "zh" ? "授权 RPM" : "Approved RPM"}:
+                        </span>
+                        <span className="text-foreground font-medium">{provider.rpm.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-muted-foreground">
+                          {language === "zh" ? "授权 TPM" : "Approved TPM"}:
+                        </span>
+                        <span className="text-foreground font-medium">{provider.tpm.toLocaleString()}</span>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            <Dialog open={isApplicationDialogOpen} onOpenChange={setIsApplicationDialogOpen}>
+              <DialogContent className="bg-background border-border max-w-2xl">
+                <DialogHeader>
+                  <DialogTitle className="text-foreground">
+                    {language === "zh" ? "提交资源申请" : "Submit Resource Application"}
+                  </DialogTitle>
+                  <DialogDescription>
+                    {language === "zh"
+                      ? "您可以申请新的模型或Agent资源。超级管理员审核通过后，资源将分配给您的渠道。"
+                      : "You can apply for new model or agent resources. After admin approval, resources will be allocated to your channel."}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-foreground">
+                      {language === "zh" ? "申请类型" : "Application Type"}
+                    </label>
+                    <Select
+                      value={applicationForm.type || "model"}
+                      onValueChange={(value) => setApplicationForm({ ...applicationForm, type: value })}
+                    >
+                      <SelectTrigger className="bg-background border-border text-foreground">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="model">{language === "zh" ? "模型供应商" : "Model Provider"}</SelectItem>
+                        <SelectItem value="agent">{language === "zh" ? "Agent 配额" : "Agent Quota"}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* Adding RPM and TPM fields to model application form */}
+                  {applicationForm.type === "model" ? (
+                    <>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-foreground">
+                          {language === "zh" ? "模型供应商名称" : "Model Provider Name"}
+                        </label>
+                        <Input
+                          placeholder={
+                            language === "zh"
+                              ? "例如: OpenAI, Anthropic, Azure OpenAI"
+                              : "e.g., OpenAI, Anthropic, Azure OpenAI"
+                          }
+                          value={applicationForm.providerName}
+                          onChange={(e) => setApplicationForm({ ...applicationForm, providerName: e.target.value })}
+                          className="bg-background border-border text-foreground"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-foreground">
+                          {language === "zh" ? "期望使用的模型" : "Expected Models"}
+                        </label>
+                        <Input
+                          placeholder={language === "zh" ? "例如: gpt-4, gpt-3.5-turbo" : "e.g., gpt-4, gpt-3.5-turbo"}
+                          value={applicationForm.expectedModels}
+                          onChange={(e) => setApplicationForm({ ...applicationForm, expectedModels: e.target.value })}
+                          className="bg-background border-border text-foreground"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          {language === "zh" ? "请用逗号分隔多个模型" : "Separate multiple models with commas"}
+                        </p>
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="space-y-2">
+                          <label className="text-sm font-medium text-foreground">
+                            {language === "zh" ? "RPM (每分钟请求数)" : "RPM (Requests Per Minute)"}
+                          </label>
+                          <Input
+                            type="number"
+                            min="1"
+                            placeholder={language === "zh" ? "例如: 1000" : "e.g., 1000"}
+                            value={applicationForm.rpm || ""}
+                            onChange={(e) =>
+                              setApplicationForm({ ...applicationForm, rpm: Number.parseInt(e.target.value) })
+                            }
+                            className="bg-background border-border text-foreground"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <label className="text-sm font-medium text-foreground">
+                            {language === "zh" ? "TPM (每分钟令牌数)" : "TPM (Tokens Per Minute)"}
+                          </label>
+                          <Input
+                            type="number"
+                            min="1"
+                            placeholder={language === "zh" ? "例如: 100000" : "e.g., 100000"}
+                            value={applicationForm.tpm || ""}
+                            onChange={(e) =>
+                              setApplicationForm({ ...applicationForm, tpm: Number.parseInt(e.target.value) })
+                            }
+                            className="bg-background border-border text-foreground"
+                          />
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-foreground">
+                          {language === "zh" ? "Agent 类型" : "Agent Type"}
+                        </label>
+                        <Select
+                          value={applicationForm.agentType}
+                          onValueChange={(value) => setApplicationForm({ ...applicationForm, agentType: value })}
+                        >
+                          <SelectTrigger className="bg-background border-border text-foreground">
+                            <SelectValue placeholder={language === "zh" ? "选择 Agent 类型" : "Select Agent Type"} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="weather">
+                              {language === "zh" ? "天气查询 Agent" : "Weather Query Agent"}
+                            </SelectItem>
+                            <SelectItem value="data">
+                              {language === "zh" ? "数据分析 Agent" : "Data Analysis Agent"}
+                            </SelectItem>
+                            <SelectItem value="document">
+                              {language === "zh" ? "文档处理 Agent" : "Document Processing Agent"}
+                            </SelectItem>
+                            <SelectItem value="email">
+                              {language === "zh" ? "邮件管理 Agent" : "Email Management Agent"}
+                            </SelectItem>
+                            <SelectItem value="api">
+                              {language === "zh" ? "API集成 Agent" : "API Integration Agent"}
+                            </SelectItem>
+                            <SelectItem value="database">
+                              {language === "zh" ? "数据库操作 Agent" : "Database Operations Agent"}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-foreground">
+                          {language === "zh" ? "申请数量" : "Requested Quantity"}
+                        </label>
+                        <Input
+                          type="number"
+                          min="1"
+                          placeholder={language === "zh" ? "输入需要的Agent数量" : "Enter number of agents needed"}
+                          value={applicationForm.agentQuantity || ""}
+                          onChange={(e) =>
+                            setApplicationForm({ ...applicationForm, agentQuantity: Number.parseInt(e.target.value) })
+                          }
+                          className="bg-background border-border text-foreground"
+                        />
+                      </div>
+                    </>
+                  )}
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-foreground">
+                      {language === "zh" ? "申请理由" : "Application Reason"}
+                    </label>
+                    <textarea
+                      placeholder={
+                        language === "zh"
+                          ? "请说明您需要此资源的原因..."
+                          : "Please explain why you need this resource..."
+                      }
+                      value={applicationForm.reason}
+                      onChange={(e) => setApplicationForm({ ...applicationForm, reason: e.target.value })}
+                      className="w-full min-h-[100px] px-3 py-2 rounded-md bg-background border border-border text-foreground"
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-end gap-3 mt-6">
+                  <Button variant="outline" onClick={() => setIsApplicationDialogOpen(false)}>
+                    {language === "zh" ? "取消" : "Cancel"}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setIsApplicationDialogOpen(false)
+                    }}
+                  >
+                    {language === "zh" ? "提交申请" : "Submit Application"}
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
+        {/* CHANGE: Add billing tab content - tenant and call record dimensions only */}
+        {activeTab === "billing" && (
+          <div className="space-y-6">
+            {/* CHANGE: Add control buttons */}
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-2xl font-bold text-foreground mb-2">
+                  {language === "zh" ? "计费管理" : "Billing Management"}
+                </h2>
+                <p className="text-sm text-muted-foreground">
+                  {language === "zh"
+                    ? "查看租户计费详情和调用记录。1 EU = 10秒调用时长"
+                    : "View tenant billing details and call records. 1 EU = 10 seconds"}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowDateDialog(true)}
+                >
+                  <Calendar className="h-4 w-4" />
+                  {language === "zh" ? "时间查询" : "Date Query"}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowFilterDialog(true)}
+                >
+                  <Filter className="h-4 w-4" />
+                  {language === "zh" ? "筛选" : "Filter"}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-transparent"
+                  onClick={() => setShowExportDialog(true)}
+                >
+                  <Download className="h-4 w-4" />
+                  {language === "zh" ? "导出" : "Export"}
+                </Button>
+              </div>
+            </div>
+
+            {/* Tenant Billing Dimension */}
+            <div>
+              <h3 className="text-lg font-semibold text-foreground mb-4">
+                {language === "zh" ? "租户计费统计" : "Tenant Billing Statistics"}
+              </h3>
+              <div className="space-y-3">
+                {[
+                  { name: "Acme Corp", id: "T001", calls: 1250, eu: 3750, price: 375.0 },
+                  { name: "TechStart Inc", id: "T002", calls: 850, eu: 2125, price: 212.5 },
+                  { name: "DataFlow Ltd", id: "T003", calls: 2100, eu: 6300, price: 630.0 },
+                  { name: "CloudSync Co", id: "T004", calls: 450, eu: 900, price: 90.0 },
+                ].map((tenant) => (
+                  <Card key={tenant.id} className="p-4 bg-card border-border">
+                    <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
+                      <div>
+                        <p className="text-sm text-muted-foreground mb-1">
+                          {language === "zh" ? "租户名称" : "Tenant Name"}
+                        </p>
+                        <p className="font-semibold text-foreground">{tenant.name}</p>
+                        <p className="text-xs text-muted-foreground">{tenant.id}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground mb-1">
+                          {language === "zh" ? "调用次数" : "Total Calls"}
+                        </p>
+                        <p className="text-lg font-bold text-foreground">{tenant.calls.toLocaleString()}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground mb-1">{language === "zh" ? "总 EU" : "Total EU"}</p>
+                        <p className="text-lg font-bold text-foreground">{tenant.eu.toLocaleString()}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground mb-1">
+                          {language === "zh" ? "租户总价" : "Tenant Total"}
+                        </p>
+                        <p className="text-lg font-bold text-primary">¥{tenant.price.toFixed(2)}</p>
+                      </div>
+                      <div className="flex items-end">
+                        <Button variant="outline" size="sm" className="w-full bg-transparent">
+                          {language === "zh" ? "查看明细" : "View Details"}
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+
+            {/* Call Record Dimension */}
+            <div>
+              <h3 className="text-lg font-semibold text-foreground mb-4">
+                {language === "zh" ? "调用记录明细" : "Call Records Detail"}
+              </h3>
+              <Card className="bg-card border-border">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="border-b border-border">
+                      <tr className="text-left">
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">
+                          {language === "zh" ? "时间戳" : "Timestamp"}
+                        </th>
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">
+                          {language === "zh" ? "租户" : "Tenant"}
+                        </th>
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">
+                          {language === "zh" ? "Agent类型" : "Agent Type"}
+                        </th>
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">
+                          {language === "zh" ? "调用时长(秒)" : "Duration (s)"}
+                        </th>
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">EU</th>
+                        <th className="p-3 text-sm font-semibold text-muted-foreground">
+                          {language === "zh" ? "单次调用总价" : "Call Price"}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {[
+                        {
+                          time: "2025-01-15 14:32:18",
+                          tenant: "Acme Corp",
+                          agent: "Data Analysis",
+                          duration: 45,
+                          eu: 4.5,
+                          price: 0.45,
+                        },
+                        {
+                          time: "2025-01-15 14:28:05",
+                          tenant: "TechStart Inc",
+                          agent: "Weather Query",
+                          duration: 12,
+                          eu: 1.2,
+                          price: 0.12,
+                        },
+                        {
+                          time: "2025-01-15 14:15:42",
+                          tenant: "DataFlow Ltd",
+                          agent: "Document Processing",
+                          duration: 85,
+                          eu: 8.5,
+                          price: 0.85,
+                        },
+                        {
+                          time: "2025-01-15 14:10:33",
+                          tenant: "CloudSync Co",
+                          agent: "Email Management",
+                          duration: 28,
+                          eu: 2.8,
+                          price: 0.28,
+                        },
+                        {
+                          time: "2025-01-15 14:05:21",
+                          tenant: "Acme Corp",
+                          agent: "API Integration",
+                          duration: 67,
+                          eu: 6.7,
+                          price: 0.67,
+                        },
+                      ].map((record, idx) => (
+                        <tr key={idx} className="border-b border-border last:border-0 hover:bg-muted/50">
+                          <td className="p-3 text-sm text-foreground font-mono">{record.time}</td>
+                          <td className="p-3 text-sm text-foreground">{record.tenant}</td>
+                          <td className="p-3 text-sm text-foreground">{record.agent}</td>
+                          <td className="p-3 text-sm text-foreground">{record.duration}s</td>
+                          <td className="p-3 text-sm text-foreground font-medium">{record.eu}</td>
+                          <td className="p-3 text-sm text-primary font-semibold">¥{record.price.toFixed(2)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </Card>
+            </div>
+
+            {/* CHANGE: Add filter dialog */}
+            <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle className="text-foreground">
+                    {language === "zh" ? "筛选选项" : "Filter Options"}
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div>
+                    <Label htmlFor="filter-customer">{language === "zh" ? "客户名称" : "Customer Name"}</Label>
+                    <Input
+                      id="filter-customer"
+                      placeholder={language === "zh" ? "输入客户名称" : "Enter customer name"}
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="filter-min-calls">{language === "zh" ? "最小调用次数" : "Min Calls"}</Label>
+                    <Input id="filter-min-calls" type="number" placeholder="0" />
+                  </div>
+                  <div>
+                    <Label htmlFor="filter-max-calls">{language === "zh" ? "最大调用次数" : "Max Calls"}</Label>
+                    <Input id="filter-max-calls" type="number" placeholder="10000" />
+                  </div>
+                  <Button className="w-full">{language === "zh" ? "应用筛选" : "Apply Filter"}</Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            {/* CHANGE: Add datetime dialog */}
+            <Dialog open={showDateDialog} onOpenChange={setShowDateDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle className="text-foreground">
+                    {language === "zh" ? "时间范围" : "Date & Time Range"}
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div>
+                    <Label htmlFor="start-datetime">
+                      {language === "zh" ? "开始时间 (年-月-日 时:分)" : "Start Date & Time (YYYY-MM-DD HH:MM)"}
+                    </Label>
+                    <Input id="start-datetime" type="datetime-local" className="bg-background border-border" />
+                  </div>
+                  <div>
+                    <Label htmlFor="end-datetime">
+                      {language === "zh" ? "结束时间 (年-月-日 时:分)" : "End Date & Time (YYYY-MM-DD HH:MM)"}
+                    </Label>
+                    <Input id="end-datetime" type="datetime-local" className="bg-background border-border" />
+                  </div>
+                  <Button className="w-full">{language === "zh" ? "查询" : "Query"}</Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            {/* CHANGE: Add export format dialog */}
+            <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
+              <DialogContent className="bg-background border-border">
+                <DialogHeader>
+                  <DialogTitle className="text-foreground">
+                    {language === "zh" ? "导出格式" : "Export Format"}
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <p className="text-sm text-muted-foreground">
+                    {language === "zh" ? "选择导出文件格式" : "Select export file format"}
+                  </p>
+                  <div className="grid grid-cols-2 gap-3">
+                    <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>Excel (.xlsx)</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex-col gap-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>CSV (.csv)</span>
+                    </Button>
+                    <Button variant="outline" className="h-20 flex-col gap-2 col-span-2 bg-transparent">
+                      <Download className="h-5 w-5" />
+                      <span>PDF (.pdf)</span>
+                    </Button>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )}
+
+        {/* CHANGE: Add settings tab content - only billing admin and operations admin roles */}
+        {activeTab === "settings" && (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold text-foreground mb-2">
+                {language === "zh" ? "系统设置" : "System Settings"}
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {language === "zh" ? "管理用户身份和访问权限" : "Manage user roles and access permissions"}
+              </p>
+            </div>
+
+            {/* Role Management */}
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold text-foreground">
+                  {language === "zh" ? "用户身份设置" : "User Role Settings"}
+                </h3>
+                <Button className="bg-primary text-primary-foreground" onClick={() => setIsAddAdminOpen(true)}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  {language === "zh" ? "添加管理员" : "Add Admin"}
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                {[
+                  {
+                    role: "billing",
+                    name: language === "zh" ? "计费管理员" : "Billing Admin",
+                    description: language === "zh" ? "管理计费和财务数据" : "Manage billing and financial data",
+                    icon: DollarSign,
+                    color: "text-green-500",
+                  },
+                  {
+                    role: "operations",
+                    name: language === "zh" ? "运营管理员" : "Operations Admin",
+                    description: language === "zh" ? "管理租户和资源分配" : "Manage tenants and resource allocation",
+                    icon: Users,
+                    color: "text-blue-500",
+                  },
+                ].map((roleInfo) => (
+                  <Card
+                    key={roleInfo.role}
+                    className="p-5 bg-card border-border hover:border-primary/50 transition-colors cursor-pointer"
+                    onClick={() => {
+                      setSelectedRole(roleInfo.role)
+                      setIsPermissionDialogOpen(true)
+                    }}
+                  >
+                    <div className="flex items-start gap-4">
+                      <div className={`p-3 rounded-lg bg-muted ${roleInfo.color}`}>
+                        <roleInfo.icon className="h-6 w-6" />
+                      </div>
+                      <div className="flex-1">
+                        <h4 className="font-semibold text-foreground mb-1">{roleInfo.name}</h4>
+                        <p className="text-sm text-muted-foreground">{roleInfo.description}</p>
+                        <Button variant="outline" size="sm" className="mt-3 bg-transparent">
+                          {language === "zh" ? "配置权限" : "Configure Permissions"}
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+
+              {/* Permission Configuration Dialog */}
+              <Dialog open={isPermissionDialogOpen} onOpenChange={setIsPermissionDialogOpen}>
+                <DialogContent className="bg-background border-border max-w-2xl">
+                  <DialogHeader>
+                    <DialogTitle className="text-foreground">
+                      {language === "zh" ? "配置访问权限" : "Configure Access Permissions"}
+                    </DialogTitle>
+                    <DialogDescription>
+                      {language === "zh"
+                        ? `为${selectedRole === "billing" ? "计费管理员" : "运营管理员"}设置可访问的标签页`
+                        : `Set accessible tabs for ${selectedRole === "billing" ? "Billing Admin" : "Operations Admin"}`}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid grid-cols-2 gap-3 py-4">
+                    {[
+                      { id: "overview", name: language === "zh" ? "概览" : "Overview" },
+                      { id: "tenants", name: language === "zh" ? "租户管理" : "Tenant Management" },
+                      { id: "resources", name: language === "zh" ? "资源管理" : "Resource Management" },
+                      { id: "billing", name: language === "zh" ? "计费" : "Billing" },
+                      { id: "settings", name: language === "zh" ? "设置" : "Settings" },
+                    ].map((tab) => (
+                      <Card
+                        key={tab.id}
+                        className={`p-4 cursor-pointer transition-all ${
+                          rolePermissions[selectedRole]?.includes(tab.id)
+                            ? "bg-primary/10 border-primary"
+                            : "bg-card border-border hover:border-muted-foreground"
+                        }`}
+                        onClick={() => {
+                          setRolePermissions((prev) => ({
+                            ...prev,
+                            [selectedRole]: prev[selectedRole]?.includes(tab.id)
+                              ? prev[selectedRole].filter((t) => t !== tab.id)
+                              : [...(prev[selectedRole] || []), tab.id],
+                          }))
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          {rolePermissions[selectedRole]?.includes(tab.id) && (
+                            <Check className="h-4 w-4 text-primary" />
+                          )}
+                          <span className="font-medium text-foreground">{tab.name}</span>
+                        </div>
+                      </Card>
+                    ))}
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => setIsPermissionDialogOpen(false)}>
+                      {language === "zh" ? "取消" : "Cancel"}
+                    </Button>
+                    <Button
+                      className="bg-primary text-primary-foreground"
+                      onClick={() => {
+                        setIsPermissionDialogOpen(false)
+                      }}
+                    >
+                      {language === "zh" ? "保存权限" : "Save Permissions"}
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+
+              {/* Add Admin Dialog */}
+              <Dialog open={isAddAdminOpen} onOpenChange={setIsAddAdminOpen}>
+                <DialogContent className="bg-background border-border">
+                  <DialogHeader>
+                    <DialogTitle className="text-foreground">
+                      {language === "zh" ? "添加管理员" : "Add Administrator"}
+                    </DialogTitle>
+                    <DialogDescription>
+                      {language === "zh" ? "创建新的管理员账户" : "Create a new administrator account"}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-4 py-4">
+                    <div>
+                      <label className="text-sm font-medium text-foreground mb-2 block">
+                        {language === "zh" ? "姓名" : "Name"}
+                      </label>
+                      <Input placeholder={language === "zh" ? "输入管理员姓名" : "Enter admin name"} />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-foreground mb-2 block">
+                        {language === "zh" ? "邮箱" : "Email"}
+                      </label>
+                      <Input type="email" placeholder={language === "zh" ? "输入邮箱地址" : "Enter email address"} />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-foreground mb-2 block">
+                        {language === "zh" ? "密码" : "Password"}
+                      </label>
+                      <Input type="password" placeholder={language === "zh" ? "设置登录密码" : "Set login password"} />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-foreground mb-2 block">
+                        {language === "zh" ? "角色" : "Role"}
+                      </label>
+                      <div className="grid grid-cols-1 gap-2">
+                        {[
+                          { value: "billing", label: language === "zh" ? "计费管理员" : "Billing Admin" },
+                          { value: "operations", label: language === "zh" ? "运营管理员" : "Operations Admin" },
+                        ].map((role) => (
+                          <Card
+                            key={role.value}
+                            className="p-3 cursor-pointer border-border hover:border-primary transition-colors"
+                          >
+                            <span className="text-sm font-medium text-foreground">{role.label}</span>
+                          </Card>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => setIsAddAdminOpen(false)}>
+                      {language === "zh" ? "取消" : "Cancel"}
+                    </Button>
+                    <Button
+                      className="bg-primary text-primary-foreground"
+                      onClick={() => {
+                        setIsAddAdminOpen(false)
+                      }}
+                    >
+                      {language === "zh" ? "创建管理员" : "Create Admin"}
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        )}
+
+        {/* Renaming "分配Agent" to "分配资源" and replacing with comprehensive resource allocation */}
+        <Dialog open={allocateAgentDialogOpen} onOpenChange={setAllocateAgentDialogOpen}>
+          <DialogContent className="bg-card border-border max-w-3xl">
+            <DialogHeader>
+              <DialogTitle>
+                {language === "zh"
+                  ? `为 ${selectedTenantForAgentAllocation?.name} 分配资源`
+                  : `Allocate Resources for ${selectedTenantForAgentAllocation?.name}`}
+              </DialogTitle>
+              <DialogDescription>
+                {language === "zh"
+                  ? "为该租户分配Agent和模型资源，并设置相应的配额"
+                  : "Allocate agent and model resources to this tenant with appropriate quotas"}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-6 py-4 max-h-[600px] overflow-y-auto">
+              {/* Agent分配部分 */}
+              <div className="space-y-3">
+                <h3 className="text-lg font-semibold text-foreground">
+                  {language === "zh" ? "Agent 配额分配" : "Agent Quota Allocation"}
+                </h3>
+                <div className="space-y-3">
+                  {availableAgents.map((agent) => {
+                    const currentAllocation =
+                      tenantAgentAllocations[selectedTenantForAgentAllocation?.id]?.[agent.name] || 0
+
+                    return (
+                      <div key={agent.name} className="p-4 rounded-lg border border-border bg-background">
+                        <div className="flex items-center justify-between mb-3">
+                          <div className="flex items-center gap-3">
+                            <div className={`w-10 h-10 rounded-lg ${agent.color} flex items-center justify-center`}>
+                              {agent.icon}
+                            </div>
+                            <div>
+                              <p className="font-medium text-foreground">{agent.name}</p>
+                              <p className="text-xs text-muted-foreground">{agent.description}</p>
+                            </div>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {language === "zh" ? `可用: ${agent.available}个` : `Available: ${agent.available}`}
+                          </div>
+                        </div>
+
+                        <div className="space-y-2">
+                          <Label htmlFor={`agent-${agent.name}`}>
+                            {language === "zh" ? "分配数量" : "Allocated Quantity"}
+                          </Label>
+                          <Input
+                            id={`agent-${agent.name}`}
+                            type="number"
+                            min="0"
+                            max={agent.available}
+                            value={currentAllocation}
+                            onChange={(e) => {
+                              const value = Math.min(Math.max(0, Number.parseInt(e.target.value) || 0), agent.available)
+                              setTenantAgentAllocations((prev) => ({
+                                ...prev,
+                                [selectedTenantForAgentAllocation?.id]: {
+                                  ...prev[selectedTenantForAgentAllocation?.id],
+                                  [agent.name]: value,
+                                },
+                              }))
+                            }}
+                            className="bg-background"
+                            placeholder={language === "zh" ? `0-${agent.available}` : `0-${agent.available}`}
+                          />
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <h3 className="text-lg font-semibold text-foreground">
+                  {language === "zh" ? "自定义Agent资源分配" : "Custom Agent Resource Allocation"}
+                </h3>
+                <div className="p-4 rounded-lg border border-border bg-background space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    {language === "zh"
+                      ? "为该租户的自定义Agent配置CPU和内存资源"
+                      : "Configure CPU and memory resources for custom agents"}
+                  </p>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="custom-agent-cpu">
+                        {language === "zh" ? "CPU (核数/Agent)" : "CPU (Cores/Agent)"}
+                      </Label>
+                      <Input
+                        id="custom-agent-cpu"
+                        type="number"
+                        min="0.5"
+                        max="16"
+                        step="0.5"
+                        placeholder="2"
+                        value={customAgentResources[selectedTenantForAgentAllocation?.id]?.cpu || ""}
+                        onChange={(e) => {
+                          const value = Number.parseFloat(e.target.value) || 0
+                          setCustomAgentResources((prev) => ({
+                            ...prev,
+                            [selectedTenantForAgentAllocation?.id]: {
+                              ...prev[selectedTenantForAgentAllocation?.id],
+                              cpu: value,
+                            },
+                          }))
+                        }}
+                        className="bg-background"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        {language === "zh" ? "推荐范围: 0.5-16核" : "Recommended: 0.5-16 cores"}
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="custom-agent-memory">
+                        {language === "zh" ? "内存 (GB/Agent)" : "Memory (GB/Agent)"}
+                      </Label>
+                      <Input
+                        id="custom-agent-memory"
+                        type="number"
+                        min="0.5"
+                        max="64"
+                        step="0.5"
+                        placeholder="4"
+                        value={customAgentResources[selectedTenantForAgentAllocation?.id]?.memory || ""}
+                        onChange={(e) => {
+                          const value = Number.parseFloat(e.target.value) || 0
+                          setCustomAgentResources((prev) => ({
+                            ...prev,
+                            [selectedTenantForAgentAllocation?.id]: {
+                              ...prev[selectedTenantForAgentAllocation?.id],
+                              memory: value,
+                            },
+                          }))
+                        }}
+                        className="bg-background"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        {language === "zh" ? "推荐范围: 0.5-64GB" : "Recommended: 0.5-64GB"}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="p-3 rounded bg-muted/30">
+                    <p className="text-xs text-muted-foreground">
+                      {language === "zh"
+                        ? "💡 提示：此配置将应用于该租户创建的所有自定义Agent实例"
+                        : "💡 Tip: This configuration applies to all custom agent instances created by this tenant"}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* 模型分配部分 */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-foreground">
+                    {language === "zh" ? "模型配额分配" : "Model Quota Allocation"}
+                  </h3>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      const tenantId = selectedTenantForAgentAllocation?.id
+                      setTenantModelAllocations((prev) => ({
+                        ...prev,
+                        [tenantId]: [...(prev[tenantId] || []), { modelName: "", rpm: 0, tpm: 0 }],
+                      }))
+                    }}
+                  >
+                    <Plus className="w-4 h-4 mr-2" />
+                    {language === "zh" ? "添加模型" : "Add Model"}
+                  </Button>
+                </div>
+
+                <div className="space-y-3">
+                  {(tenantModelAllocations[selectedTenantForAgentAllocation?.id] || []).map((model, index) => (
+                    <div key={index} className="p-4 rounded-lg border border-border bg-background space-y-3">
+                      <div className="flex items-center justify-between">
+                        <Label>{language === "zh" ? `模型 ${index + 1}` : `Model ${index + 1}`}</Label>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            const tenantId = selectedTenantForAgentAllocation?.id
+                            setTenantModelAllocations((prev) => ({
+                              ...prev,
+                              [tenantId]: prev[tenantId].filter((_, i) => i !== index),
+                            }))
+                          }}
+                        >
+                          <X className="w-4 h-4" />
+                        </Button>
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor={`model-name-${index}`}>{language === "zh" ? "模型型号" : "Model Name"}</Label>
+                        <Input
+                          id={`model-name-${index}`}
+                          placeholder={language === "zh" ? "例如: gpt-4, claude-3" : "e.g., gpt-4, claude-3"}
+                          value={model.modelName}
+                          onChange={(e) => {
+                            const tenantId = selectedTenantForAgentAllocation?.id
+                            setTenantModelAllocations((prev) => ({
+                              ...prev,
+                              [tenantId]: prev[tenantId].map((m, i) =>
+                                i === index ? { ...m, modelName: e.target.value } : m,
+                              ),
+                            }))
+                          }}
+                          className="bg-background"
+                        />
+                      </div>
+
+                      <div className="grid grid-cols-2 gap-3">
+                        <div className="space-y-2">
+                          <Label htmlFor={`model-rpm-${index}`}>{language === "zh" ? "RPM" : "RPM"}</Label>
+                          <Input
+                            id={`model-rpm-${index}`}
+                            type="number"
+                            min="0"
+                            placeholder="1000"
+                            value={model.rpm || ""}
+                            onChange={(e) => {
+                              const tenantId = selectedTenantForAgentAllocation?.id
+                              setTenantModelAllocations((prev) => ({
+                                ...prev,
+                                [tenantId]: prev[tenantId].map((m, i) =>
+                                  i === index ? { ...m, rpm: Number.parseInt(e.target.value) || 0 } : m,
+                                ),
+                              }))
+                            }}
+                            className="bg-background"
+                          />
+                          <p className="text-xs text-muted-foreground">
+                            {language === "zh" ? "每分钟请求数" : "Requests per minute"}
+                          </p>
+                        </div>
+
+                        <div className="space-y-2">
+                          <Label htmlFor={`model-tpm-${index}`}>{language === "zh" ? "TPM" : "TPM"}</Label>
+                          <Input
+                            id={`model-tpm-${index}`}
+                            type="number"
+                            min="0"
+                            placeholder="100000"
+                            value={model.tpm || ""}
+                            onChange={(e) => {
+                              const tenantId = selectedTenantForAgentAllocation?.id
+                              setTenantModelAllocations((prev) => ({
+                                ...prev,
+                                [tenantId]: prev[tenantId].map((m, i) =>
+                                  i === index ? { ...m, tpm: Number.parseInt(e.target.value) || 0 } : m,
+                                ),
+                              }))
+                            }}
+                            className="bg-background"
+                          />
+                          <p className="text-xs text-muted-foreground">
+                            {language === "zh" ? "每分钟令牌数" : "Tokens per minute"}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+
+                  {(!tenantModelAllocations[selectedTenantForAgentAllocation?.id] ||
+                    tenantModelAllocations[selectedTenantForAgentAllocation?.id].length === 0) && (
+                    <div className="p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg">
+                      {language === "zh" ? "尚未添加任何模型配额" : "No model quotas added yet"}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 分配摘要 */}
+              <div className="p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="text-sm font-medium mb-2">{language === "zh" ? "分配摘要" : "Allocation Summary"}</p>
+                <div className="space-y-2">
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">
+                      {language === "zh" ? "Agent配额:" : "Agent Quotas:"}
+                    </p>
+                    {Object.entries(tenantAgentAllocations[selectedTenantForAgentAllocation?.id] || {}).map(
+                      ([agentName, quantity]) =>
+                        quantity > 0 && (
+                          <p key={agentName} className="text-sm text-muted-foreground ml-2">
+                            • {agentName}: {quantity} {language === "zh" ? "个" : "units"}
+                          </p>
+                        ),
+                    )}
+                    {!Object.keys(tenantAgentAllocations[selectedTenantForAgentAllocation?.id] || {}).length && (
+                      <p className="text-sm text-muted-foreground ml-2">
+                        {language === "zh" ? "尚未分配Agent" : "No agents allocated"}
+                      </p>
+                    )}
+                  </div>
+
+                  {customAgentResources[selectedTenantForAgentAllocation?.id]?.cpu > 0 ||
+                  customAgentResources[selectedTenantForAgentAllocation?.id]?.memory > 0 ? (
+                    <div>
+                      <p className="text-xs font-medium text-muted-foreground mb-1">
+                        {language === "zh" ? "自定义Agent资源:" : "Custom Agent Resources:"}
+                      </p>
+                      <p className="text-sm text-muted-foreground ml-2">
+                        • CPU: {customAgentResources[selectedTenantForAgentAllocation?.id]?.cpu || 0}{" "}
+                        {language === "zh" ? "核/Agent" : "cores/agent"}
+                      </p>
+                      <p className="text-sm text-muted-foreground ml-2">
+                        • {language === "zh" ? "内存" : "Memory"}:{" "}
+                        {customAgentResources[selectedTenantForAgentAllocation?.id]?.memory || 0} GB/Agent
+                      </p>
+                    </div>
+                  ) : null}
+
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">
+                      {language === "zh" ? "模型配额:" : "Model Quotas:"}
+                    </p>
+                    {(tenantModelAllocations[selectedTenantForAgentAllocation?.id] || []).map((model, index) => (
+                      <p key={index} className="text-sm text-muted-foreground ml-2">
+                        • {model.modelName || language === "zh" ? "未命名模型" : "Unnamed model"}: RPM {model.rpm}, TPM{" "}
+                        {model.tpm}
+                      </p>
+                    ))}
+                    {(!tenantModelAllocations[selectedTenantForAgentAllocation?.id] ||
+                      tenantModelAllocations[selectedTenantForAgentAllocation?.id].length === 0) && (
+                      <p className="text-sm text-muted-foreground ml-2">
+                        {language === "zh" ? "尚未分配模型" : "No models allocated"}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setAllocateAgentDialogOpen(false)}>
+                {language === "zh" ? "取消" : "Cancel"}
+              </Button>
+              <Button
+                className="bg-primary text-primary-foreground"
+                onClick={() => {
+                  setAllocateAgentDialogOpen(false)
+                }}
+              >
+                {language === "zh" ? "确认分配" : "Confirm Allocation"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* CHANGE: Added billing management dialog */}
+        <Dialog open={billingManagementDialogOpen} onOpenChange={setBillingManagementDialogOpen}>
+          <DialogContent className="bg-card border-border max-w-md">
+            <DialogHeader>
+              <DialogTitle>
+                {language === "zh"
+                  ? `管理 ${selectedTenantForBilling?.name} 计费`
+                  : `Manage Billing for ${selectedTenantForBilling?.name}`}
+              </DialogTitle>
+              <DialogDescription>
+                {language === "zh"
+                  ? "设置租户的订阅层级和折扣比例"
+                  : "Set subscription tier and discount for the tenant"}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-6 py-4">
+              {/* Subscription Tier Selection */}
+              <div className="space-y-3">
+                <Label>{language === "zh" ? "订阅层级" : "Subscription Tier"}</Label>
+                <div className="grid gap-2">
+                  {[
+                    {
+                      value: "free",
+                      label: language === "zh" ? "免费版" : "Free",
+                      price: "$0/mo",
+                      desc: language === "zh" ? "基础功能" : "Basic features",
+                    },
+                    {
+                      value: "professional",
+                      label: language === "zh" ? "专业版" : "Professional",
+                      price: "$1,800/mo",
+                      desc: language === "zh" ? "适合中小企业" : "For SMBs",
+                    },
+                    {
+                      value: "enterprise",
+                      label: language === "zh" ? "企业版" : "Enterprise",
+                      price: "$3,200/mo",
+                      desc: language === "zh" ? "无限制" : "Unlimited",
+                    },
+                  ].map((tier) => (
+                    <div
+                      key={tier.value}
+                      onClick={() => {
+                        setTenantBillingSettings((prev) => ({
+                          ...prev,
+                          [selectedTenantForBilling?.id]: {
+                            ...prev[selectedTenantForBilling?.id],
+                            tier: tier.value,
+                          },
+                        }))
+                      }}
+                      className={`p-4 rounded-lg border cursor-pointer transition-all ${
+                        tenantBillingSettings[selectedTenantForBilling?.id]?.tier === tier.value
+                          ? "border-primary bg-primary/10"
+                          : "border-border bg-background hover:border-primary/50"
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="font-medium text-foreground">{tier.label}</p>
+                          <p className="text-sm text-muted-foreground">{tier.desc}</p>
+                        </div>
+                        <p className="text-sm font-medium text-foreground">{tier.price}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Discount Setting */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="discount">{language === "zh" ? "折扣比例" : "Discount"}</Label>
+                  <span className="text-sm text-muted-foreground">
+                    {tenantBillingSettings[selectedTenantForBilling?.id]?.discount || 0}%
+                  </span>
+                </div>
+                <Input
+                  id="discount"
+                  type="number"
+                  min="0"
+                  max="100"
+                  value={tenantBillingSettings[selectedTenantForBilling?.id]?.discount || 0}
+                  onChange={(e) => {
+                    const value = Math.min(Math.max(0, Number.parseInt(e.target.value) || 0), 100)
+                    setTenantBillingSettings((prev) => ({
+                      ...prev,
+                      [selectedTenantForBilling?.id]: {
+                        ...prev[selectedTenantForBilling?.id],
+                        discount: value,
+                      },
+                    }))
+                  }}
+                  className="bg-background"
+                  placeholder={language === "zh" ? "输入0-100的折扣百分比" : "Enter discount 0-100"}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {language === "zh" ? "例如：输入10表示九折优惠（减免10%）" : "E.g., enter 10 for 10% off"}
+                </p>
+              </div>
+
+              {/* Summary */}
+              {tenantBillingSettings[selectedTenantForBilling?.id]?.tier && (
+                <div className="p-4 rounded-lg bg-muted/30 border border-border">
+                  <p className="text-sm font-medium mb-2">{language === "zh" ? "计费摘要" : "Billing Summary"}</p>
+                  <div className="space-y-1 text-sm text-muted-foreground">
+                    <p>
+                      {language === "zh" ? "订阅层级: " : "Tier: "}
+                      {tenantBillingSettings[selectedTenantForBilling?.id]?.tier === "free"
+                        ? language === "zh"
+                          ? "免费版"
+                          : "Free"
+                        : tenantBillingSettings[selectedTenantForBilling?.id]?.tier === "professional"
+                          ? language === "zh"
+                            ? "专业版"
+                            : "Professional"
+                          : language === "zh"
+                            ? "企业版"
+                            : "Enterprise"}
+                    </p>
+                    <p>
+                      {language === "zh" ? "折扣: " : "Discount: "}
+                      {tenantBillingSettings[selectedTenantForBilling?.id]?.discount || 0}%
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setBillingManagementDialogOpen(false)}>
+                {language === "zh" ? "取消" : "Cancel"}
+              </Button>
+              <Button
+                className="bg-primary text-primary-foreground"
+                onClick={() => {
+                  setBillingManagementDialogOpen(false)
+                }}
+              >
+                {language === "zh" ? "保存设置" : "Save Settings"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={showRechargeDialog} onOpenChange={setShowRechargeDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{language === "zh" ? "为租户充值" : "Recharge for Tenant"}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="rounded-lg bg-muted p-3">
+                <p className="text-sm font-medium">{selectedTenantForRecharge?.name}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {language === "zh" ? "当前余额" : "Current Balance"}: ${selectedTenantForRecharge?.balance || "0.00"}
+                </p>
+              </div>
+              <div>
+                <Label>{language === "zh" ? "充值金额 (USD)" : "Recharge Amount (USD)"}</Label>
+                <Input
+                  type="number"
+                  placeholder="100"
+                  value={rechargeAmount}
+                  onChange={(e) => setRechargeAmount(e.target.value)}
+                />
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {[50, 100, 500, 1000].map((amount) => (
+                  <Button
+                    key={amount}
+                    variant="outline"
+                    onClick={() => setRechargeAmount(amount.toString())}
+                    className="bg-transparent"
+                  >
+                    ${amount}
+                  </Button>
+                ))}
+              </div>
+              <div className="rounded-lg bg-muted p-3 space-y-1">
+                <div className="flex justify-between text-sm font-bold">
+                  <span>{language === "zh" ? "充值后余额" : "Balance After Recharge"}</span>
+                  <span>
+                    $
+                    {(
+                      Number.parseFloat(selectedTenantForRecharge?.balance || "0") +
+                      Number.parseFloat(rechargeAmount || "0")
+                    ).toFixed(2)}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowRechargeDialog(false)}>
+                {language === "zh" ? "取消" : "Cancel"}
+              </Button>
+              <Button onClick={() => setShowRechargeDialog(false)}>
+                {language === "zh" ? "确认充值" : "Confirm Recharge"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={showCreditDialog} onOpenChange={setShowCreditDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{language === "zh" ? "设置授信额度" : "Set Credit Limit"}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="rounded-lg bg-muted p-3">
+                <p className="text-sm font-medium">{selectedTenantForRecharge?.name}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {language === "zh" ? "当前授信额度" : "Current Credit Limit"}: $
+                  {selectedTenantForRecharge?.creditLimit || "0.00"}
+                </p>
+              </div>
+              <div>
+                <Label>{language === "zh" ? "授信额度 (USD)" : "Credit Limit (USD)"}</Label>
+                <Input
+                  type="number"
+                  placeholder="1000"
+                  value={creditLimit}
+                  onChange={(e) => setCreditLimit(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  {language === "zh"
+                    ? "授信额度允许租户在余额不足时继续使用服务"
+                    : "Credit limit allows tenants to continue using services when balance is insufficient"}
+                </p>
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {[500, 1000, 5000, 10000].map((amount) => (
+                  <Button
+                    key={amount}
+                    variant="outline"
+                    onClick={() => setCreditLimit(amount.toString())}
+                    className="bg-transparent"
+                  >
+                    ${amount}
+                  </Button>
+                ))}
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowCreditDialog(false)}>
+                {language === "zh" ? "取消" : "Cancel"}
+              </Button>
+              <Button onClick={() => setShowCreditDialog(false)}>{language === "zh" ? "确认设置" : "Confirm"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </main>
+    </div>
+  )
+}
diff --git a/app/channel/login/page.tsx b/app/channel/login/page.tsx
new file mode 100644
index 0000000..8cb87a4
--- /dev/null
+++ b/app/channel/login/page.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card } from "@/components/ui/card"
+import { Building2, Globe, Eye, EyeOff } from "lucide-react"
+import { useLanguage } from "@/contexts/language-context"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export default function ChannelLogin() {
+  const router = useRouter()
+  const { language, setLanguage } = useLanguage()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const translations = {
+    en: {
+      title: "Channel Partner Portal",
+      subtitle: "Manage your tenant portfolio",
+      email: "Email Address",
+      password: "Password",
+      login: "Sign In",
+      loggingIn: "Signing In...",
+      forgotPassword: "Forgot password?",
+      contactSupport: "Contact Support",
+      emailPlaceholder: "channel@company.com",
+      passwordPlaceholder: "Enter your password",
+    },
+    zh: {
+      title: "渠道合作伙伴平台",
+      subtitle: "管理您的租户组合",
+      email: "邮箱地址",
+      password: "密码",
+      login: "登录",
+      loggingIn: "登录中...",
+      forgotPassword: "忘记密码？",
+      contactSupport: "联系支持",
+      emailPlaceholder: "channel@company.com",
+      passwordPlaceholder: "请输入密码",
+    },
+  }
+
+  const text = translations[language]
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    // Simulate API call
+    setTimeout(() => {
+      localStorage.setItem("channel_token", "mock_channel_token")
+      router.push("/channel/dashboard")
+    }, 1500)
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4 relative overflow-hidden">
+      {/* Background pattern */}
+      <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:50px_50px]" />
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent" />
+
+      {/* Language selector */}
+      <div className="absolute top-6 right-6 z-10">
+        <Select value={language} onValueChange={(value: "en" | "zh") => setLanguage(value)}>
+          <SelectTrigger className="w-[140px] bg-card border-border">
+            <Globe className="mr-2 h-4 w-4" />
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="zh">中文</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card className="w-full max-w-md bg-card border-border shadow-2xl relative z-10">
+        <div className="p-8">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 mb-4">
+              <Building2 className="h-8 w-8 text-white" />
+            </div>
+            <h1 className="text-2xl font-bold text-foreground mb-2">{text.title}</h1>
+            <p className="text-sm text-muted-foreground">{text.subtitle}</p>
+          </div>
+
+          {/* Login form */}
+          <form onSubmit={handleLogin} className="space-y-5">
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-foreground">
+                {text.email}
+              </label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={text.emailPlaceholder}
+                className="bg-background border-border"
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium text-foreground">
+                {text.password}
+              </label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={text.passwordPlaceholder}
+                  className="bg-background border-border pr-10"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between text-sm">
+              <button type="button" className="text-primary hover:underline">
+                {text.forgotPassword}
+              </button>
+              <button type="button" className="text-muted-foreground hover:text-foreground">
+                {text.contactSupport}
+              </button>
+            </div>
+
+            <Button type="submit" disabled={isLoading} className="w-full bg-primary text-primary-foreground h-11">
+              {isLoading ? text.loggingIn : text.login}
+            </Button>
+          </form>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/data-tools/loading.tsx b/app/data-tools/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/data-tools/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/data-tools/page.tsx b/app/data-tools/page.tsx
new file mode 100644
index 0000000..4e68b99
--- /dev/null
+++ b/app/data-tools/page.tsx
@@ -0,0 +1,567 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useLanguage } from "@/hooks/useLanguage"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Plus, Search, ExternalLink, Trash2, FileJson, Cloud, Cpu, Code2, Boxes, Workflow } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export default function DataToolsPage() {
+  const { t } = useLanguage()
+  const [tools, setTools] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState({ totalApis: 0, generatedTools: 0, activePods: 0 })
+
+  const [showNewToolDialog, setShowNewToolDialog] = useState(false)
+  const [showTemplateDialog, setShowTemplateDialog] = useState(false)
+  const [templateType, setTemplateType] = useState<"json" | "storage">("json")
+  const [podConfig, setPodConfig] = useState({
+    agentCount: 1,
+    cpuCores: 1,
+    memoryGB: 2,
+    maxAgents: 5,
+    model: "gpt-4o-mini",
+  })
+  const [selectedFramework, setSelectedFramework] = useState<string>("")
+  const [selectedServiceGateway, setSelectedServiceGateway] = useState<string>("")
+
+  useEffect(() => {
+    loadTools()
+    loadStats()
+  }, [])
+
+  const loadTools = async () => {
+    try {
+      setLoading(true)
+      const result = await TaijiAPIClient.getTools()
+      if (Array.isArray(result)) {
+        setTools(result)
+      }
+    } catch (error) {
+      console.error("Failed to load tools:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadStats = async () => {
+    try {
+      const result = await TaijiAPIClient.getStats()
+      if (result) {
+        setStats({
+          totalApis: result.total_apis || 0,
+          generatedTools: result.generated_tools || 0,
+          activePods: result.active_pods || 0,
+        })
+      }
+    } catch (error) {
+      console.error("Failed to load stats:", error)
+    }
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t("数据与工具", "Data & Tools")}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t("API市场和工具生成平台", "API marketplace and tool generation platform")}
+            </p>
+          </div>
+          <Button onClick={() => setShowNewToolDialog(true)} className="gap-2">
+            <Plus className="h-4 w-4" />
+            {t("生成新工具", "Generate New Tool")}
+          </Button>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{t("总API数", "Total APIs")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-12 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.totalApis
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                {loading ? "" : `${stats.totalApis - stats.generatedTools} ${t("个已处理", "processed")}`}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("生成的工具", "Generated Tools")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.generatedTools
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("可以使用", "Ready to use")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("活跃Pod数", "Active Pods")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.activePods
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("运行中", "Running")}</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Tabs defaultValue="tools" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="tools">{t("可用工具", "Available Tools")}</TabsTrigger>
+            <TabsTrigger value="templates">{t("数据模板", "Data Templates")}</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="tools" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle>{t("工具注册表", "Tool Registry")}</CardTitle>
+                    <CardDescription>
+                      {t("管理和监控生成的API工具", "Manage and monitor generated API tools")}
+                    </CardDescription>
+                  </div>
+                  <div className="flex gap-2">
+                    <Input placeholder={t("搜索工具...", "Search tools...")} className="w-64" />
+                    <Button variant="outline" size="icon">
+                      <Search className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t("工具名称", "Tool Name")}</TableHead>
+                      <TableHead>{t("类别", "Category")}</TableHead>
+                      <TableHead>{t("方法", "Method")}</TableHead>
+                      <TableHead>{t("端点", "Endpoint")}</TableHead>
+                      <TableHead>{t("状态", "Status")}</TableHead>
+                      <TableHead>{t("创建时间", "Created")}</TableHead>
+                      <TableHead className="text-right">{t("操作", "Actions")}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {loading ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="text-center py-8">
+                          <span className="text-muted-foreground">{t("加载中...", "Loading...")}</span>
+                        </TableCell>
+                      </TableRow>
+                    ) : tools.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="text-center py-8">
+                          <span className="text-muted-foreground">{t("暂无工具", "No tools available")}</span>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      tools.map((tool) => (
+                      <TableRow key={tool.name}>
+                        <TableCell className="font-medium">{tool.name}</TableCell>
+                        <TableCell>
+                          <Badge variant="secondary">{tool.category}</Badge>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="outline">{tool.method}</Badge>
+                        </TableCell>
+                        <TableCell className="text-xs text-muted-foreground">{tool.url}</TableCell>
+                        <TableCell>
+                          <Badge className="bg-green-500/10 text-green-500">{tool.status}</Badge>
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">{tool.created}</TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-2">
+                            <Button variant="ghost" size="icon">
+                              <ExternalLink className="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" size="icon">
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    )}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="templates" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle>{t("数据模板管理", "Data Template Management")}</CardTitle>
+                    <CardDescription>
+                      {t("配置JSON接口和云存储数据源", "Configure JSON interfaces and cloud storage data sources")}
+                    </CardDescription>
+                  </div>
+                  <Button onClick={() => setShowTemplateDialog(true)} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {t("创建数据模板", "Create Data Template")}
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card className="border-primary/20 bg-primary/5">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center gap-2">
+                        <FileJson className="h-5 w-5 text-primary" />
+                        <CardTitle className="text-base">{t("JSON API 模板", "JSON API Template")}</CardTitle>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        {t(
+                          "通过提供数据接口URL和查询参数来配置JSON API访问",
+                          "Configure JSON API access by providing interface URL and query parameters",
+                        )}
+                      </p>
+                      <Badge variant="secondary">{t("3个已配置", "3 configured")}</Badge>
+                    </CardContent>
+                  </Card>
+
+                  <Card className="border-blue-500/20 bg-blue-500/5">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center gap-2">
+                        <Cloud className="h-5 w-5 text-blue-500" />
+                        <CardTitle className="text-base">
+                          {t("云存储与数据库模板", "Cloud Storage & Database Template")}
+                        </CardTitle>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        {t(
+                          "支持Azure、Google、AWS存储服务和各种原生数据库",
+                          "Support Azure, Google, AWS storage services and various native databases",
+                        )}
+                      </p>
+                      <Badge variant="secondary">{t("5个已配置", "5 configured")}</Badge>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* 生成新工具对话框 - 包含Pod配置 */}
+      <Dialog open={showNewToolDialog} onOpenChange={setShowNewToolDialog}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{t("生成新工具并部署Pod", "Generate New Tool and Deploy Pod")}</DialogTitle>
+            <DialogDescription>
+              {t(
+                "根据Agent框架注册工具并配置Pod资源",
+                "Register tool based on agent framework and configure pod resources",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>{t("Agent框架模板", "Agent Framework Template")}</Label>
+              <Select value={selectedFramework} onValueChange={setSelectedFramework}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("选择框架模板", "Select framework template")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="mcp">
+                    <div className="flex items-center gap-2">
+                      <Code2 className="h-4 w-4" />
+                      MCP - Model Context Protocol
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="a2a">
+                    <div className="flex items-center gap-2">
+                      <Boxes className="h-4 w-4" />
+                      A2A - Agent-to-Agent Protocol
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="api">
+                    <div className="flex items-center gap-2">
+                      <Workflow className="h-4 w-4" />
+                      API - Standard REST API
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {t("根据选择的框架注册相应的工具", "Register tools according to selected framework")}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("工具名称", "Tool Name")}</Label>
+              <Input placeholder={t("输入工具名称", "Enter tool name")} />
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("API端点", "API Endpoint")}</Label>
+              <Input placeholder="https://api.example.com/endpoint" />
+            </div>
+
+            <div className="border-t pt-4 space-y-4">
+              <h3 className="font-semibold flex items-center gap-2">
+                <Cpu className="h-4 w-4" />
+                {t("Pod资源配置", "Pod Resource Configuration")}
+              </h3>
+
+              <div className="space-y-2">
+                <Label>{t("服务网关", "Service Gateway")}</Label>
+                <Select value={selectedServiceGateway} onValueChange={setSelectedServiceGateway}>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("选择服务网关", "Select service gateway")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="mcp-gateway">MCP Gateway</SelectItem>
+                    <SelectItem value="a2a-gateway">A2A Gateway</SelectItem>
+                    <SelectItem value="api-gateway">API Gateway</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  {t("选择Pod使用的服务网关", "Select service gateway for the pod")}
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>{t("Agent个数", "Agent Count")}</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="10"
+                    value={podConfig.agentCount}
+                    onChange={(e) => setPodConfig({ ...podConfig, agentCount: Number.parseInt(e.target.value) })}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t("CPU核数", "CPU Cores")}</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="16"
+                    value={podConfig.cpuCores}
+                    onChange={(e) => setPodConfig({ ...podConfig, cpuCores: Number.parseInt(e.target.value) })}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t("内存大小 (GB)", "Memory Size (GB)")}</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="64"
+                    value={podConfig.memoryGB}
+                    onChange={(e) => setPodConfig({ ...podConfig, memoryGB: Number.parseInt(e.target.value) })}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t("可扩展Agent数量", "Scalable Agent Count")}</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    max="100"
+                    value={podConfig.maxAgents}
+                    onChange={(e) => setPodConfig({ ...podConfig, maxAgents: Number.parseInt(e.target.value) })}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>{t("使用的模型", "Model to Use")}</Label>
+                <Select value={podConfig.model} onValueChange={(value) => setPodConfig({ ...podConfig, model: value })}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="gpt-4o">GPT-4o</SelectItem>
+                    <SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem>
+                    <SelectItem value="claude-3.5-sonnet">Claude 3.5 Sonnet</SelectItem>
+                    <SelectItem value="grok-4">Grok 4</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="rounded-lg bg-muted p-4 text-sm">
+                <p className="font-medium mb-2">{t("配置摘要", "Configuration Summary")}</p>
+                <div className="grid grid-cols-2 gap-2 text-muted-foreground">
+                  <div className="col-span-2">
+                    {t("框架", "Framework")}: {selectedFramework || t("未选择", "Not selected")}
+                  </div>
+                  <div className="col-span-2">
+                    {t("网关", "Gateway")}: {selectedServiceGateway || t("未选择", "Not selected")}
+                  </div>
+                  <div>
+                    {t("Agent数量", "Agent Count")}: {podConfig.agentCount}
+                  </div>
+                  <div>
+                    {t("CPU", "CPU")}: {podConfig.cpuCores} {t("核", "cores")}
+                  </div>
+                  <div>
+                    {t("内存", "Memory")}: {podConfig.memoryGB}GB
+                  </div>
+                  <div>
+                    {t("最大扩展", "Max Scale")}: {podConfig.maxAgents}
+                  </div>
+                  <div className="col-span-2">
+                    {t("模型", "Model")}: {podConfig.model}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewToolDialog(false)}>
+              {t("取消", "Cancel")}
+            </Button>
+            <Button onClick={() => setShowNewToolDialog(false)}>{t("部署工具和Pod", "Deploy Tool & Pod")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 数据模板对话框 */}
+      <Dialog open={showTemplateDialog} onOpenChange={setShowTemplateDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{t("创建数据模板", "Create Data Template")}</DialogTitle>
+            <DialogDescription>
+              {t("选择模板类型并填写配置信息", "Select template type and fill in configuration information")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>{t("模板类型", "Template Type")}</Label>
+              <Select value={templateType} onValueChange={(value: "json" | "storage") => setTemplateType(value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="json">
+                    <div className="flex items-center gap-2">
+                      <FileJson className="h-4 w-4" />
+                      {t("JSON API 模板", "JSON API Template")}
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="storage">
+                    <div className="flex items-center gap-2">
+                      <Cloud className="h-4 w-4" />
+                      {t("云存储与数据库模板", "Cloud Storage & Database Template")}
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("模板名称", "Template Name")}</Label>
+              <Input placeholder={t("输入模板名称", "Enter template name")} />
+            </div>
+
+            {templateType === "json" ? (
+              <>
+                <div className="space-y-2">
+                  <Label>{t("数据接口URL", "Data Interface URL")}</Label>
+                  <Input placeholder="https://api.example.com/data" />
+                </div>
+                <div className="space-y-2">
+                  <Label>{t("查询参数", "Query Parameters")}</Label>
+                  <textarea
+                    className="w-full h-24 rounded-md border border-input bg-background px-3 py-2 text-sm"
+                    placeholder={t(
+                      "输入查询参数，例如: page=1&limit=10",
+                      "Enter query parameters, e.g., page=1&limit=10",
+                    )}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="space-y-2">
+                  <Label>{t("存储服务", "Storage Service")}</Label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("选择服务", "Select service")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="azure-blob">Azure Blob Storage</SelectItem>
+                      <SelectItem value="google-cloud">Google Cloud Storage</SelectItem>
+                      <SelectItem value="aws-s3">AWS S3</SelectItem>
+                      <SelectItem value="postgresql">PostgreSQL</SelectItem>
+                      <SelectItem value="mysql">MySQL</SelectItem>
+                      <SelectItem value="mongodb">MongoDB</SelectItem>
+                      <SelectItem value="snowflake">Snowflake</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label>{t("连接字符串", "Connection String")}</Label>
+                  <Input placeholder={t("输入连接字符串", "Enter connection string")} type="password" />
+                </div>
+              </>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowTemplateDialog(false)}>
+              {t("取消", "Cancel")}
+            </Button>
+            <Button onClick={() => setShowTemplateDialog(false)}>{t("创建模板", "Create Template")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DashboardLayout>
+  )
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..a694b7c
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0.15 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+  --primary: oklch(0.45 0.19 264);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.55 0.15 220);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.45 0.19 264);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.9 0 0);
+  --ring: oklch(0.45 0.19 264);
+  --chart-1: oklch(0.55 0.2 264);
+  --chart-2: oklch(0.6 0.15 220);
+  --chart-3: oklch(0.5 0.18 300);
+  --chart-4: oklch(0.65 0.18 160);
+  --chart-5: oklch(0.58 0.16 50);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(0.45 0.19 264);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.45 0.19 264);
+}
+
+.dark {
+  --background: oklch(0.12 0 0);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.15 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.15 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.6 0.2 264);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.65 0.16 220);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.2 0 0);
+  --muted-foreground: oklch(0.65 0 0);
+  --accent: oklch(0.6 0.2 264);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.5 0.2 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.22 0 0);
+  --input: oklch(0.22 0 0);
+  --ring: oklch(0.6 0.2 264);
+  --chart-1: oklch(0.6 0.2 264);
+  --chart-2: oklch(0.65 0.16 220);
+  --chart-3: oklch(0.55 0.18 300);
+  --chart-4: oklch(0.7 0.18 160);
+  --chart-5: oklch(0.63 0.16 50);
+  --sidebar: oklch(0.14 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.6 0.2 264);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.2 0 0);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.22 0 0);
+  --sidebar-ring: oklch(0.6 0.2 264);
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..2bfe6b9
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,52 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import { Analytics } from "@vercel/analytics/next"
+import { LanguageProvider } from "@/contexts/language-context"
+import { AuthGuard } from "@/components/auth-guard"
+import { Toaster } from "@/components/ui/toaster"
+import "./globals.css"
+
+const _geist = Geist({ subsets: ["latin"] })
+const _geistMono = Geist_Mono({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Taiji AI Platform - Agent Empowerment",
+  description: "Enterprise-grade AI Agent orchestration and management platform",
+  generator: "v0.app",
+  icons: {
+    icon: [
+      {
+        url: "/icon-light-32x32.png",
+        media: "(prefers-color-scheme: light)",
+      },
+      {
+        url: "/icon-dark-32x32.png",
+        media: "(prefers-color-scheme: dark)",
+      },
+      {
+        url: "/icon.svg",
+        type: "image/svg+xml",
+      },
+    ],
+    apple: "/apple-icon.png",
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`font-sans antialiased`}>
+        <LanguageProvider>
+          <AuthGuard>{children}</AuthGuard>
+        </LanguageProvider>
+        <Toaster />
+        <Analytics />
+      </body>
+    </html>
+  )
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..901d346
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,169 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card } from "@/components/ui/card"
+import { useLanguage } from "@/contexts/language-context"
+import { Eye, EyeOff, Globe } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { useToast } from "@/hooks/use-toast"
+
+export default function LoginPage() {
+  const { language, setLanguage, t } = useLanguage()
+  const { toast } = useToast()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+
+    try {
+      // 默认使用 user 角色登录，可以根据需要调整
+      const result = await TaijiAPIClient.login(email, password, "user")
+      
+      if (result && result.success) {
+        toast({
+          title: t("登录成功", "Login successful"),
+          description: t("欢迎回来", "Welcome back"),
+        })
+        // Redirect to dashboard on success
+        window.location.href = "/"
+      } else {
+        toast({
+          title: t("登录失败", "Login failed"),
+          description: (result as any)?.message || t("请检查您的邮箱和密码", "Please check your email and password"),
+          variant: "destructive",
+        })
+      }
+    } catch (error: any) {
+      console.error("Login error:", error)
+      let errorMessage = error.message || t("网络错误，请稍后重试", "Network error, please try again")
+      
+      // 检查是否是连接错误
+      if (errorMessage.includes("无法连接到后端服务") || errorMessage.includes("Failed to fetch")) {
+        errorMessage = t(
+          "无法连接到后端服务，请确保后端服务正在运行",
+          "Cannot connect to backend service, please ensure the backend is running"
+        )
+      }
+      
+      toast({
+        title: t("登录失败", "Login failed"),
+        description: errorMessage,
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4 relative">
+      {/* Language Switcher */}
+      <div className="absolute top-6 right-6">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2 bg-transparent">
+              <Globe className="h-4 w-4" />
+              {language === "zh" ? "中文" : "English"}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setLanguage("zh")}>中文</DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setLanguage("en")}>English</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="w-full max-w-md">
+        {/* Logo and Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
+            <div className="w-8 h-8 rounded-full bg-primary" />
+          </div>
+          <h1 className="text-3xl font-bold text-foreground mb-2">{t("Taiji AI 平台", "Taiji AI Platform")}</h1>
+          <p className="text-muted-foreground">{t("企业级 AI Agent 赋能平台", "Enterprise AI Agent Empowerment")}</p>
+        </div>
+
+        {/* Login Card */}
+        <Card className="p-8">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email">{t("邮箱地址", "Email Address")}</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={t("请输入邮箱", "Enter your email")}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="h-11"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">{t("密码", "Password")}</Label>
+                <Button type="button" variant="link" className="px-0 text-sm text-primary hover:text-primary/80">
+                  {t("忘记密码?", "Forgot password?")}
+                </Button>
+              </div>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder={t("请输入密码", "Enter your password")}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  className="h-11 pr-10"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <Eye className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <Button type="submit" className="w-full h-11" disabled={isLoading}>
+              {isLoading ? (
+                <span className="flex items-center gap-2">
+                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                  {t("登录中...", "Signing in...")}
+                </span>
+              ) : (
+                t("登录", "Sign In")
+              )}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-muted-foreground">
+            {t("如需账号，请联系管理员", "Please contact administrator for account access")}
+          </div>
+        </Card>
+
+        {/* Footer */}
+        <div className="mt-8 text-center text-xs text-muted-foreground">
+          {t("© 2025 Taiji AI Platform. 保留所有权利。", "© 2025 Taiji AI Platform. All rights reserved.")}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/model-gateway/page.tsx b/app/model-gateway/page.tsx
new file mode 100644
index 0000000..24a8d75
--- /dev/null
+++ b/app/model-gateway/page.tsx
@@ -0,0 +1,575 @@
+"use client"
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { GitBranch, Activity, Code2, Boxes, Workflow, Plus, Upload } from "lucide-react"
+import { Progress } from "@/components/ui/progress"
+import { useLanguage } from "@/hooks/useLanguage"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { useToast } from "@/hooks/use-toast"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useState, useEffect } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+export default function ModelGatewayPage() {
+  const { t } = useLanguage()
+  const { toast } = useToast()
+  const [selectedGateway, setSelectedGateway] = useState<string>("")
+  const [showGatewayDialog, setShowGatewayDialog] = useState(false)
+  const [showApiDialog, setShowApiDialog] = useState(false)
+  const [apiUploadMethod, setApiUploadMethod] = useState<"file" | "url">("file")
+  const [jsonFile, setJsonFile] = useState<File | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [frameworks, setFrameworks] = useState<any[]>([])
+  const [providers, setProviders] = useState<any[]>([])
+  const [gatewayAPIs, setGatewayAPIs] = useState<any[]>([])
+  const [monitoring, setMonitoring] = useState<any>(null)
+  const [stats, setStats] = useState({ availableGateways: 0, endpoints: 0, avgLatency: 0, requestsToday: 0 })
+
+  useEffect(() => {
+    loadGatewayData()
+  }, [])
+
+  const loadGatewayData = async () => {
+    try {
+      setLoading(true)
+      // 并行加载数据
+      const [apisResult, monitoringResult, providersResult] = await Promise.allSettled([
+        TaijiAPIClient.getGatewayAPIs(),
+        TaijiAPIClient.getGatewayMonitoring(),
+        TaijiAPIClient.getModelProviders(),
+      ])
+
+      // 加载网关API列表
+      if (apisResult.status === "fulfilled" && apisResult.value?.success) {
+        setGatewayAPIs(apisResult.value.data?.apis || [])
+      }
+
+      // 加载监控数据
+      if (monitoringResult.status === "fulfilled" && monitoringResult.value?.success) {
+        const data = monitoringResult.value.data
+        setMonitoring(data)
+        setStats({
+          availableGateways: 3, // 默认值
+          endpoints: gatewayAPIs.length,
+          avgLatency: data.averageLatency || 0,
+          requestsToday: data.requestsPerMinute ? data.requestsPerMinute * 60 * 24 : 0,
+        })
+      }
+
+      // 加载模型提供商
+      if (providersResult && providersResult.status === "fulfilled" && providersResult.value?.success) {
+        const providersData = providersResult.value.data?.providers || []
+        setProviders(
+          providersData.map((p: any) => ({
+            name: p.name,
+            requests: p.requests || 0,
+            latency: p.latency || 0,
+            status: p.status || "healthy",
+          })),
+        )
+      }
+    } catch (error) {
+      console.error("Failed to load gateway data:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const defaultFrameworks = [
+    {
+      name: "MCP",
+      fullName: "Model Context Protocol",
+      icon: Code2,
+      endpoints: 8,
+      usage: 42,
+      status: "active",
+      description: "适用于需要上下文理解的复杂对话场景",
+    },
+    {
+      name: "A2A",
+      fullName: "Agent-to-Agent Protocol",
+      icon: Boxes,
+      endpoints: 5,
+      usage: 28,
+      status: "active",
+      description: "适用于多Agent协同工作的场景",
+    },
+    {
+      name: "API",
+      fullName: "Standard API Gateway",
+      icon: Workflow,
+      endpoints: 6,
+      usage: 30,
+      status: "active",
+      description: "标准REST API，适用于简单的请求响应场景",
+    },
+  ]
+
+  const frameworksToUse = frameworks.length > 0 ? frameworks : defaultFrameworks
+  const providersToUse = providers.length > 0 ? providers : []
+
+  const handleSelectGateway = async (gatewayType: string) => {
+    try {
+      const result = await TaijiAPIClient.selectGateway(gatewayType as "MCP" | "A2A" | "API")
+      if (result?.success) {
+        setSelectedGateway(gatewayType)
+        toast({
+          title: t("选择成功", "Success"),
+          description: t("服务网关已选择", "Service gateway selected"),
+        })
+        setShowGatewayDialog(false)
+      }
+    } catch (error: any) {
+      toast({
+        title: t("选择失败", "Failed"),
+        description: error.message || t("无法选择服务网关", "Failed to select gateway"),
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleCreateAPI = async (apiData: { name: string; method: "json" | "url"; content: string }) => {
+    try {
+      const result = await TaijiAPIClient.createGatewayAPI(apiData.name, apiData.method, apiData.content)
+      if (result?.success) {
+        toast({
+          title: t("创建成功", "Success"),
+          description: t("API已创建", "API created"),
+        })
+        setShowApiDialog(false)
+        loadGatewayData()
+      }
+    } catch (error: any) {
+      toast({
+        title: t("创建失败", "Failed"),
+        description: error.message || t("无法创建API", "Failed to create API"),
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t("服务网关", "Service Gateway")}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t("选择服务方式并管理API路由", "Select service type and manage API routing")}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button onClick={() => setShowApiDialog(true)} variant="outline" className="gap-2">
+              <Plus className="h-4 w-4" />
+              {t("创建API", "Create API")}
+            </Button>
+            <Dialog open={showGatewayDialog} onOpenChange={setShowGatewayDialog}>
+              <DialogTrigger asChild>
+                <Button className="gap-2">
+                  <Plus className="h-4 w-4" />
+                  {t("选择服务网关", "Select Service Gateway")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-[500px]">
+                <DialogHeader>
+                  <DialogTitle>{t("选择服务网关类型", "Select Service Gateway Type")}</DialogTitle>
+                  <DialogDescription>
+                    {t("选择适合您业务需求的网关服务方式", "Choose the gateway service type that fits your needs")}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <RadioGroup value={selectedGateway} onValueChange={setSelectedGateway}>
+                    {frameworksToUse.map((framework) => {
+                      const Icon = framework.icon
+                      return (
+                        <div
+                          key={framework.name}
+                          className={`flex items-start space-x-3 rounded-lg border p-4 cursor-pointer transition-colors ${
+                            selectedGateway === framework.name
+                              ? "border-primary bg-primary/5"
+                              : "border-border hover:bg-accent"
+                          }`}
+                          onClick={() => handleSelectGateway(framework.name)}
+                        >
+                          <RadioGroupItem value={framework.name} id={framework.name} className="mt-1" />
+                          <div className="flex-1 space-y-1">
+                            <Label htmlFor={framework.name} className="flex items-center gap-2 cursor-pointer">
+                              <Icon className="h-4 w-4" />
+                              <span className="font-semibold">{framework.name}</span>
+                              <span className="text-xs text-muted-foreground">- {framework.fullName}</span>
+                            </Label>
+                            <p className="text-sm text-muted-foreground">{framework.description}</p>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </RadioGroup>
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button variant="outline" onClick={() => setShowGatewayDialog(false)}>
+                    {t("取消", "Cancel")}
+                  </Button>
+                  <Button onClick={() => handleSelectGateway(selectedGateway)} disabled={!selectedGateway}>
+                    {t("确认选择", "Confirm")}
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("可用网关", "Available Gateways")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-4 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.availableGateways
+                )}
+              </div>
+              <p className="text-xs text-green-500 mt-1">{t("全部运行", "All operational")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("服务端点", "Service Endpoints")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.endpoints
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("可用接口", "Available interfaces")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("平均延迟", "Avg Latency")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-12 animate-pulse bg-muted rounded" />
+                ) : (
+                  `${stats.avgLatency}ms`
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("过去24小时", "Last 24 hours")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("今日调用", "Requests Today")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-16 animate-pulse bg-muted rounded" />
+                ) : (
+                  stats.requestsToday > 1000
+                    ? `${(stats.requestsToday / 1000).toFixed(1)}K`
+                    : stats.requestsToday
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("总请求数", "Total requests")}</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Tabs defaultValue="frameworks" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="frameworks">{t("网关类型", "Gateway Types")}</TabsTrigger>
+            <TabsTrigger value="monitoring">{t("监控", "Monitoring")}</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="frameworks" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("服务网关选择", "Service Gateway Selection")}</CardTitle>
+                <CardDescription>
+                  {t("选择适合您需求的服务网关类型", "Choose the service gateway type that fits your needs")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {frameworksToUse.map((framework) => {
+                  const Icon = framework.icon
+                  return (
+                    <div
+                      key={framework.name}
+                      className="flex items-center justify-between rounded-lg border border-border bg-card p-4"
+                    >
+                      <div className="flex items-center gap-4 flex-1">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                          <Icon className="h-6 w-6 text-primary" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h3 className="font-semibold text-lg">{framework.name}</h3>
+                            <Badge className="bg-green-500/10 text-green-500 text-xs">{framework.status}</Badge>
+                          </div>
+                          <p className="text-sm text-muted-foreground mb-1">{framework.fullName}</p>
+                          <p className="text-xs text-muted-foreground">{framework.description}</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-6">
+                        <div className="text-right">
+                          <div className="text-2xl font-bold">{framework.endpoints}</div>
+                          <p className="text-xs text-muted-foreground">{t("端点", "Endpoints")}</p>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-2xl font-bold">{framework.usage}%</div>
+                          <p className="text-xs text-muted-foreground">{t("使用率", "Usage")}</p>
+                        </div>
+                        <Button variant="outline" size="sm">
+                          {t("查看文档", "View Docs")}
+                        </Button>
+                      </div>
+                    </div>
+                  )
+                })}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("网关使用分布", "Gateway Usage Distribution")}</CardTitle>
+                <CardDescription>{t("各网关的请求占比", "Request distribution by gateway")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                    {frameworksToUse.map((framework) => (
+                  <div key={framework.name}>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium">{framework.name}</span>
+                      <span className="text-sm text-muted-foreground">{framework.usage}%</span>
+                    </div>
+                    <Progress value={framework.usage} className="h-2" />
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="monitoring" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("模型提供商监控", "Model Provider Monitoring")}</CardTitle>
+                <CardDescription>{t("实时性能和健康状态", "Real-time performance and health status")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {providersToUse.length === 0 ? (
+                  <div className="text-center py-8 text-muted-foreground">
+                    {t("暂无数据", "No data available")}
+                  </div>
+                ) : (
+                  providersToUse.map((provider) => (
+                  <div
+                    key={provider.name}
+                    className="flex items-center justify-between rounded-lg border border-border bg-card p-4"
+                  >
+                    <div className="flex items-center gap-4 flex-1">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                        <GitBranch className="h-5 w-5 text-primary" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="font-semibold">{provider.name}</h3>
+                          <Badge className="bg-green-500/10 text-green-500 text-xs">{provider.status}</Badge>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {provider.requests.toLocaleString()} {t("请求", "requests")}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Activity className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm font-mono">{provider.latency}ms</span>
+                    </div>
+                  </div>
+                  ))
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("请求负载分布", "Request Load Distribution")}</CardTitle>
+                <CardDescription>{t("各提供商的流量占比", "Traffic distribution by provider")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {providersToUse.length === 0 ? (
+                  <div className="text-center py-8 text-muted-foreground">
+                    {t("暂无数据", "No data available")}
+                  </div>
+                ) : (
+                  providersToUse.map((provider) => {
+                  const total = providersToUse.reduce((sum, p) => sum + p.requests, 0)
+                  const percentage = total > 0 ? Math.round((provider.requests / total) * 100) : 0
+                  return (
+                    <div key={provider.name}>
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-sm font-medium">{provider.name}</span>
+                        <span className="text-sm text-muted-foreground">{percentage}%</span>
+                      </div>
+                      <Progress value={percentage} className="h-2" />
+                    </div>
+                  )
+                })
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <Dialog open={showApiDialog} onOpenChange={setShowApiDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{t("创建API", "Create API")}</DialogTitle>
+            <DialogDescription>
+              {t(
+                "上传JSON文档或提供请求URL来创建API接口",
+                "Upload JSON document or provide request URL to create API interface",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>{t("API名称", "API Name")}</Label>
+              <Input placeholder={t("输入API名称", "Enter API name")} />
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("上传方式", "Upload Method")}</Label>
+              <RadioGroup value={apiUploadMethod} onValueChange={(v: "file" | "url") => setApiUploadMethod(v)}>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="file" id="file" />
+                  <Label htmlFor="file" className="font-normal cursor-pointer">
+                    {t("上传JSON文件", "Upload JSON File")}
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="url" id="url" />
+                  <Label htmlFor="url" className="font-normal cursor-pointer">
+                    {t("提供请求URL", "Provide Request URL")}
+                  </Label>
+                </div>
+              </RadioGroup>
+            </div>
+
+            {apiUploadMethod === "file" ? (
+              <div className="space-y-2">
+                <Label>{t("JSON文档", "JSON Document")}</Label>
+                <div className="border-2 border-dashed rounded-lg p-6 text-center">
+                  <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground mb-2">
+                    {jsonFile ? jsonFile.name : t("点击或拖拽上传JSON文件", "Click or drag to upload JSON file")}
+                  </p>
+                  <input
+                    type="file"
+                    accept=".json"
+                    className="hidden"
+                    id="json-upload"
+                    onChange={(e) => setJsonFile(e.target.files?.[0] || null)}
+                  />
+                  <Button variant="outline" size="sm" onClick={() => document.getElementById("json-upload")?.click()}>
+                    {t("选择文件", "Select File")}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className="space-y-2">
+                  <Label>{t("请求URL", "Request URL")}</Label>
+                  <Input placeholder="https://api.example.com/endpoint" />
+                </div>
+                <div className="space-y-2">
+                  <Label>{t("请求方法", "Request Method")}</Label>
+                  <RadioGroup defaultValue="GET">
+                    <div className="flex gap-4">
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="GET" id="get" />
+                        <Label htmlFor="get" className="font-normal cursor-pointer">
+                          GET
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="POST" id="post" />
+                        <Label htmlFor="post" className="font-normal cursor-pointer">
+                          POST
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="PUT" id="put" />
+                        <Label htmlFor="put" className="font-normal cursor-pointer">
+                          PUT
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="DELETE" id="delete" />
+                        <Label htmlFor="delete" className="font-normal cursor-pointer">
+                          DELETE
+                        </Label>
+                      </div>
+                    </div>
+                  </RadioGroup>
+                </div>
+                <div className="space-y-2">
+                  <Label>{t("请求参数 (JSON)", "Request Parameters (JSON)")}</Label>
+                  <Textarea
+                    placeholder={t("输入JSON格式的请求参数", "Enter request parameters in JSON format")}
+                    className="h-24 font-mono text-xs"
+                  />
+                </div>
+              </>
+            )}
+
+            <div className="space-y-2">
+              <Label>{t("描述", "Description")}</Label>
+              <Textarea placeholder={t("输入API描述...", "Enter API description...")} />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowApiDialog(false)}>
+              {t("取消", "Cancel")}
+            </Button>
+            <Button onClick={() => setShowApiDialog(false)}>{t("创建API", "Create API")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DashboardLayout>
+  )
+}
diff --git a/app/orchestration/page.tsx b/app/orchestration/page.tsx
new file mode 100644
index 0000000..fdbd632
--- /dev/null
+++ b/app/orchestration/page.tsx
@@ -0,0 +1,422 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Network, Plus, Play, Save, Trash2, ArrowRight } from "lucide-react"
+import { useLanguage } from "@/hooks/useLanguage"
+import { TaijiAPIClient } from "@/lib/api-client"
+import { useToast } from "@/hooks/use-toast"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
+export default function OrchestrationPage() {
+  const { t } = useLanguage()
+  const { toast } = useToast()
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [workflowNodes, setWorkflowNodes] = useState<string[]>([])
+  const [workflowName, setWorkflowName] = useState("")
+  const [selectedGateway, setSelectedGateway] = useState<string>("")
+  const [loading, setLoading] = useState(true)
+  const [availableAgents, setAvailableAgents] = useState<any[]>([])
+  const [workflows, setWorkflows] = useState<any[]>([])
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      // 并行加载Agent列表和工作流列表
+      const [agentsResult] = await Promise.allSettled([
+        TaijiAPIClient.getPlatformAgents(),
+        // TODO: 添加获取工作流列表的API调用
+      ])
+
+      // 加载平台Agent列表
+      if (agentsResult.status === "fulfilled" && agentsResult.value?.success) {
+        const data = agentsResult.value.data?.data || []
+        setAvailableAgents(data)
+      }
+
+      // 加载工作流列表
+      // TODO: 当后端API可用时，取消注释
+      // if (workflowsResult.status === "fulfilled" && workflowsResult.value?.success) {
+      //   setWorkflows(workflowsResult.value.data || [])
+      // }
+    } catch (error) {
+      console.error("Failed to load data:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const defaultAvailableAgents = [
+    { id: "weather-agent", name: t("天气查询Agent", "Weather Query Agent"), icon: "🌤️" },
+    { id: "data-analysis-agent", name: t("数据分析Agent", "Data Analysis Agent"), icon: "📊" },
+    { id: "doc-processor-agent", name: t("文档处理Agent", "Document Processing Agent"), icon: "📄" },
+    { id: "email-agent", name: t("邮件管理Agent", "Email Management Agent"), icon: "📧" },
+    { id: "api-integration-agent", name: t("API集成Agent", "API Integration Agent"), icon: "🔌" },
+    { id: "database-agent", name: t("数据库操作Agent", "Database Operations Agent"), icon: "🗄️" },
+    { id: "custom-agent-1", name: t("我的自定义Agent 1", "My Custom Agent 1"), icon: "⚙️", custom: true },
+    { id: "custom-agent-2", name: t("我的自定义Agent 2", "My Custom Agent 2"), icon: "⚙️", custom: true },
+  ]
+
+  // 使用真实数据或默认数据
+  const agentsToUse = availableAgents.length > 0 ? availableAgents : defaultAvailableAgents
+
+  const addNode = (agentId: string) => {
+    if (workflowNodes.length < 3 && !workflowNodes.includes(agentId)) {
+      setWorkflowNodes([...workflowNodes, agentId])
+    }
+  }
+
+  const removeNode = (index: number) => {
+    setWorkflowNodes(workflowNodes.filter((_, i) => i !== index))
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t("编排中心", "Orchestration Hub")}</h1>
+            <p className="text-muted-foreground mt-1">
+              {t("创建和管理Agent工作流（最多3个节点）", "Create and manage agent workflows (max 3 nodes)")}
+            </p>
+          </div>
+          <Button onClick={() => setShowCreateDialog(true)} className="gap-2">
+            <Plus className="h-4 w-4" />
+            {t("创建工作流", "Create Workflow")}
+          </Button>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-4">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("总工作流", "Total Workflows")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  workflows.length
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("已创建", "Created")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{t("运行中", "Running")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-4 animate-pulse bg-muted rounded" />
+                ) : (
+                  workflows.filter((w) => w.status === "running").length
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("活跃工作流", "Active workflows")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("最大节点数", "Max Nodes")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">3</div>
+              <p className="text-xs text-muted-foreground mt-1">{t("每个工作流", "Per workflow")}</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {t("可用Agent", "Available Agents")}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {loading ? (
+                  <span className="inline-block h-7 w-8 animate-pulse bg-muted rounded" />
+                ) : (
+                  agentsToUse.length
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">{t("平台和自定义", "Platform & Custom")}</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("我的工作流", "My Workflows")}</CardTitle>
+              <CardDescription>{t("管理和执行Agent工作流", "Manage and execute agent workflows")}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {loading ? (
+                <div className="space-y-4">
+                  {[1, 2].map((i) => (
+                    <div key={i} className="h-20 animate-pulse bg-muted rounded-lg" />
+                  ))}
+                </div>
+              ) : workflows.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t("暂无工作流", "No workflows yet")}
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {workflows.map((workflow) => (
+                    <div
+                      key={workflow.id}
+                      className="flex items-center justify-between rounded-lg border border-border bg-card p-4"
+                    >
+                      <div className="flex items-center gap-4 flex-1">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                          <Network className="h-5 w-5 text-primary" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-2">
+                            <h3 className="font-semibold">{workflow.name}</h3>
+                            <Badge
+                              className={
+                                workflow.status === "running"
+                                  ? "bg-green-500/10 text-green-500"
+                                  : "bg-gray-500/10 text-gray-500"
+                              }
+                            >
+                              {workflow.status}
+                            </Badge>
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {t("节点数", "Nodes")}: {workflow.nodes.length}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Button variant="outline" size="sm" className="gap-2 bg-transparent">
+                          <Play className="h-4 w-4" />
+                          {t("运行", "Run")}
+                        </Button>
+                        <Button variant="ghost" size="icon">
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("工作流限制", "Workflow Limitations")}</CardTitle>
+              <CardDescription>{t("当前系统限制说明", "Current system limitations")}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between rounded-lg bg-muted/30 p-3">
+                  <span className="text-sm font-medium">{t("最大Agent节点数", "Max Agent Nodes")}</span>
+                  <Badge variant="outline">3</Badge>
+                </div>
+                <div className="flex items-center justify-between rounded-lg bg-muted/30 p-3">
+                  <span className="text-sm font-medium">{t("支持的Agent类型", "Supported Agent Types")}</span>
+                  <Badge variant="outline">{t("平台和自定义", "Platform & Custom")}</Badge>
+                </div>
+                <div className="flex items-center justify-between rounded-lg bg-muted/30 p-3">
+                  <span className="text-sm font-medium">{t("并发执行", "Concurrent Execution")}</span>
+                  <Badge variant="outline">{t("不支持", "Not Supported")}</Badge>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 创建工作流对话框 */}
+        <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+          <DialogContent className="max-w-3xl">
+            <DialogHeader>
+              <DialogTitle>{t("创建新工作流", "Create New Workflow")}</DialogTitle>
+              <DialogDescription>
+                {t("选择最多3个Agent来构建工作流", "Select up to 3 agents to build your workflow")}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label>{t("工作流名称", "Workflow Name")}</Label>
+                <Input
+                  placeholder={t("输入工作流名称", "Enter workflow name")}
+                  value={workflowName}
+                  onChange={(e) => setWorkflowName(e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>{t("选择服务网关", "Select Service Gateway")}</Label>
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { id: "mcp", name: "MCP", desc: t("模型上下文协议", "Model Context Protocol") },
+                    { id: "a2a", name: "A2A", desc: t("Agent到Agent通信", "Agent-to-Agent Communication") },
+                    { id: "api", name: "API", desc: t("标准REST API", "Standard REST API") },
+                  ].map((gateway) => (
+                    <button
+                      key={gateway.id}
+                      onClick={() => setSelectedGateway(gateway.id)}
+                      className={`p-4 rounded-lg border text-left transition-all ${
+                        selectedGateway === gateway.id
+                          ? "border-primary bg-primary/5 shadow-sm"
+                          : "border-border hover:border-primary/50 hover:bg-muted/50"
+                      }`}
+                    >
+                      <div className="font-semibold mb-1">{gateway.name}</div>
+                      <div className="text-xs text-muted-foreground">{gateway.desc}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>{t("选择Agent（最多3个）", "Select Agents (max 3)")}</Label>
+                <div className="grid grid-cols-2 gap-2 max-h-64 overflow-y-auto p-1">
+                  {agentsToUse.map((agent) => (
+                    <button
+                      key={agent.id}
+                      onClick={() => addNode(agent.id)}
+                      disabled={workflowNodes.length >= 3 || workflowNodes.includes(agent.id)}
+                      className="flex items-center gap-3 p-3 rounded-lg border border-border hover:border-primary hover:bg-primary/5 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-left"
+                    >
+                      <span className="text-2xl">{agent.icon}</span>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{agent.name}</p>
+                        {agent.custom && (
+                          <Badge variant="secondary" className="text-xs mt-1">
+                            {t("自定义", "Custom")}
+                          </Badge>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>{t("工作流结构", "Workflow Structure")}</Label>
+                <div className="rounded-lg border border-border bg-muted/30 p-4 min-h-[120px]">
+                  {workflowNodes.length === 0 ? (
+                    <p className="text-sm text-muted-foreground text-center py-8">
+                      {t("请从上方选择Agent添加到工作流", "Select agents from above to add to workflow")}
+                    </p>
+                  ) : (
+                    <div className="flex items-center justify-center gap-2">
+                      {workflowNodes.map((nodeId, index) => {
+                        const agent = agentsToUse.find((a) => a.id === nodeId)
+                        return (
+                          <div key={index} className="flex items-center gap-2">
+                            <div className="relative group">
+                              <div className="flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-lg px-3 py-2">
+                                <span className="text-xl">{agent?.icon}</span>
+                                <span className="text-sm font-medium">{agent?.name}</span>
+                              </div>
+                              <button
+                                onClick={() => removeNode(index)}
+                                className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-xs"
+                              >
+                                ×
+                              </button>
+                            </div>
+                            {index < workflowNodes.length - 1 && <ArrowRight className="h-5 w-5 text-primary" />}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t("已选择", "Selected")}: {workflowNodes.length}/3
+                </p>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
+                {t("取消", "Cancel")}
+              </Button>
+              <Button
+                onClick={async () => {
+                  if (workflowNodes.length === 0 || !workflowName || !selectedGateway) {
+                    return
+                  }
+
+                  try {
+                    const result = await TaijiAPIClient.createWorkflow({
+                      name: workflowName,
+                      gateway: selectedGateway as "MCP" | "A2A" | "API",
+                      nodes: workflowNodes.map((nodeId, index) => {
+                        const agent = agentsToUse.find((a) => a.id === nodeId)
+                        return {
+                          agentId: nodeId,
+                          agentType: agent?.type === "custom" ? "custom" : "platform",
+                          agentName: agent?.name || "",
+                          order: index + 1,
+                        }
+                      }),
+                    })
+
+                    if (result?.success) {
+                      toast({
+                        title: t("创建成功", "Success"),
+                        description: t("工作流已创建", "Workflow created"),
+                      })
+                      setShowCreateDialog(false)
+                      setWorkflowNodes([])
+                      setWorkflowName("")
+                      setSelectedGateway("")
+                      loadData()
+                    } else {
+                      throw new Error(result?.message || "Failed to create workflow")
+                    }
+                  } catch (error: any) {
+                    toast({
+                      title: t("创建失败", "Failed"),
+                      description: error.message || t("无法创建工作流", "Failed to create workflow"),
+                      variant: "destructive",
+                    })
+                  }
+                }}
+                disabled={workflowNodes.length === 0 || !workflowName || !selectedGateway}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                {t("保存工作流", "Save Workflow")}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </DashboardLayout>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..56f0e39
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { isAuthenticated } from "@/lib/auth"
+import { DashboardLayout } from "@/components/dashboard-layout"
+import { DashboardOverview } from "@/components/dashboard-overview"
+
+export default function Home() {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      router.push("/login")
+    }
+  }, [router])
+
+  if (!isAuthenticated()) {
+    return null
+  }
+
+  return (
+    <DashboardLayout>
+      <DashboardOverview />
+    </DashboardLayout>
+  )
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..4ee62ee
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/components/auth-guard.tsx b/components/auth-guard.tsx
new file mode 100644
index 0000000..2612310
--- /dev/null
+++ b/components/auth-guard.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter, usePathname } from "next/navigation"
+import { isAuthenticated } from "@/lib/auth"
+
+interface AuthGuardProps {
+  children: React.ReactNode
+  requireAuth?: boolean
+  redirectTo?: string
+}
+
+export function AuthGuard({ children, requireAuth = true, redirectTo = "/login" }: AuthGuardProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  // 检查是否是登录页面
+  const isLoginPage = pathname === "/login" || pathname === "/channel/login" || pathname === "/admin/login"
+
+  useEffect(() => {
+    // 登录页面不需要认证
+    if (isLoginPage) {
+      // 如果已登录，重定向到首页
+      if (isAuthenticated()) {
+        if (pathname === "/channel/login") {
+          router.push("/channel/dashboard")
+        } else if (pathname === "/admin/login") {
+          router.push("/admin/dashboard")
+        } else {
+          router.push("/")
+        }
+      }
+      return
+    }
+
+    // 需要认证的页面
+    if (requireAuth && !isAuthenticated()) {
+      // 根据路径判断重定向到哪个登录页
+      if (pathname.startsWith("/channel")) {
+        router.push("/channel/login")
+      } else if (pathname.startsWith("/admin")) {
+        router.push("/admin/login")
+      } else {
+        router.push(redirectTo)
+      }
+    }
+  }, [pathname, requireAuth, redirectTo, router, isLoginPage])
+
+  // 如果是登录页面且已登录，不渲染内容（等待重定向）
+  if (isLoginPage && isAuthenticated()) {
+    return null
+  }
+
+  // 如果是登录页面，直接渲染（不需要认证）
+  if (isLoginPage) {
+    return <>{children}</>
+  }
+
+  // 如果需要认证但未登录，不渲染内容（等待重定向）
+  if (requireAuth && !isAuthenticated()) {
+    return null
+  }
+
+  return <>{children}</>
+}
+
diff --git a/components/dashboard-layout.tsx b/components/dashboard-layout.tsx
new file mode 100644
index 0000000..0413ee4
--- /dev/null
+++ b/components/dashboard-layout.tsx
@@ -0,0 +1,280 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { useLanguage } from "@/contexts/language-context"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
+  LayoutDashboard,
+  Database,
+  GitBranch,
+  Boxes,
+  Network,
+  CreditCard,
+  ChevronLeft,
+  Bell,
+  Settings,
+  Activity,
+  Zap,
+  Globe,
+  LogOut,
+  User,
+  Key,
+  Copy,
+  RefreshCw,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+const navigationItems = [
+  { nameKey: { zh: "概览", en: "Overview" }, href: "/", icon: LayoutDashboard },
+  { nameKey: { zh: "服务网关", en: "Service Gateway" }, href: "/model-gateway", icon: GitBranch },
+  { nameKey: { zh: "数据与工具", en: "Data & Tools" }, href: "/data-tools", icon: Database },
+  { nameKey: { zh: "代理工厂", en: "Agent Factory" }, href: "/agent-factory", icon: Boxes },
+  { nameKey: { zh: "编排中心", en: "Orchestration Hub" }, href: "/orchestration", icon: Network },
+  { nameKey: { zh: "计费与资源", en: "Billing & Resources" }, href: "/billing", icon: CreditCard },
+]
+
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const [collapsed, setCollapsed] = useState(false)
+  const pathname = usePathname()
+  const { language, setLanguage, t } = useLanguage()
+  const [showApiKeyDialog, setShowApiKeyDialog] = useState(false)
+  const [apiKey, setApiKey] = useState("sk_live_1234567890abcdefghijklmnopqrstuvwxyz")
+  const [serviceEndpoint, setServiceEndpoint] = useState("https://api.taiji-ai.com/v1")
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+  }
+
+  const regenerateApiKey = () => {
+    const newKey = `sk_live_${Math.random().toString(36).substring(2, 15)}${Math.random().toString(36).substring(2, 15)}`
+    setApiKey(newKey)
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          "flex flex-col border-r border-border bg-card transition-all duration-300",
+          collapsed ? "w-16" : "w-64",
+        )}
+      >
+        {/* Logo */}
+        <div className="flex h-16 items-center justify-between border-b border-border px-4">
+          {!collapsed && (
+            <Link href="/" className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+                <Zap className="h-5 w-5 text-primary-foreground" />
+              </div>
+              <span className="text-lg font-semibold">Taiji AI</span>
+            </Link>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setCollapsed(!collapsed)}
+            className={cn("h-8 w-8", collapsed && "mx-auto")}
+          >
+            <ChevronLeft className={cn("h-4 w-4 transition-transform", collapsed && "rotate-180")} />
+          </Button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 p-2 overflow-y-auto">
+          {navigationItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link key={item.href} href={item.href}>
+                <div
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                  )}
+                >
+                  <item.icon className="h-5 w-5 shrink-0" />
+                  {!collapsed && <span>{t(item.nameKey.zh, item.nameKey.en)}</span>}
+                </div>
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* Footer */}
+        <div className="border-t border-border p-2">
+          <Button variant="ghost" className={cn("w-full justify-start", collapsed && "justify-center px-0")}>
+            <Settings className="h-5 w-5 shrink-0" />
+            {!collapsed && <span className="ml-3">{t("设置", "Settings")}</span>}
+          </Button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Top Bar */}
+        <header className="flex h-16 items-center justify-between border-b border-border bg-card px-6">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Activity className="h-4 w-4 text-green-500" />
+              <span className="text-sm text-muted-foreground">{t("API 延迟", "API Latency")}: 45ms</span>
+            </div>
+            <div className="h-4 w-px bg-border" />
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-green-500" />
+              <span className="text-sm text-muted-foreground">{t("所有系统正常运行", "All Systems Operational")}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {/* Language Switcher */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Globe className="h-4 w-4" />
+                  <span className="hidden sm:inline">{language === "zh" ? "中文" : "English"}</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setLanguage("zh")}>中文</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setLanguage("en")}>English</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Badge variant="outline" className="gap-2">
+              <Zap className="h-3 w-3" />
+              <span className="font-mono">2,487 EU</span>
+            </Badge>
+            <Button variant="ghost" size="icon" className="relative">
+              <Bell className="h-5 w-5" />
+              <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" />
+            </Button>
+
+            {/* User Menu with Logout */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="rounded-full">
+                  <Avatar className="h-8 w-8">
+                    <AvatarFallback className="bg-primary text-primary-foreground text-xs">AD</AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem>
+                  <User className="mr-2 h-4 w-4" />
+                  {t("个人资料", "Profile")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setShowApiKeyDialog(true)}>
+                  <Key className="mr-2 h-4 w-4" />
+                  {t("密钥管理", "API Keys")}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Settings className="mr-2 h-4 w-4" />
+                  {t("设置", "Settings")}
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/login" className="flex items-center">
+                    <LogOut className="mr-2 h-4 w-4" />
+                    {t("退出登录", "Sign Out")}
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+      </div>
+
+      <Dialog open={showApiKeyDialog} onOpenChange={setShowApiKeyDialog}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>{t("密钥管理", "API Key Management")}</DialogTitle>
+            <DialogDescription>
+              {t("查看和管理您的API密钥和服务终结点", "View and manage your API keys and service endpoints")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-4">
+            {/* Service Endpoint */}
+            <div className="space-y-2">
+              <Label>{t("服务终结点", "Service Endpoint")}</Label>
+              <div className="flex gap-2">
+                <Input value={serviceEndpoint} readOnly className="font-mono text-sm" />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => copyToClipboard(serviceEndpoint)}
+                  title={t("复制", "Copy")}
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t("使用此终结点访问Taiji AI API服务", "Use this endpoint to access Taiji AI API services")}
+              </p>
+            </div>
+
+            {/* API Key */}
+            <div className="space-y-2">
+              <Label>{t("API密钥", "API Key")}</Label>
+              <div className="flex gap-2">
+                <Input value={apiKey} readOnly className="font-mono text-sm" type="password" />
+                <Button variant="outline" size="icon" onClick={() => copyToClipboard(apiKey)} title={t("复制", "Copy")}>
+                  <Copy className="h-4 w-4" />
+                </Button>
+                <Button variant="outline" size="icon" onClick={regenerateApiKey} title={t("重新生成", "Regenerate")}>
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "请妥善保管您的API密钥。重新生成后，旧密钥将立即失效。",
+                  "Keep your API key secure. Regenerating will immediately invalidate the old key.",
+                )}
+              </p>
+            </div>
+
+            {/* Usage Example */}
+            <div className="space-y-2">
+              <Label>{t("使用示例", "Usage Example")}</Label>
+              <div className="rounded-md bg-muted p-3">
+                <code className="text-xs">
+                  curl -X POST {serviceEndpoint}/chat/completions \\
+                  <br />
+                  &nbsp;&nbsp;-H "Authorization: Bearer {apiKey.substring(0, 20)}..." \\
+                  <br />
+                  &nbsp;&nbsp;-H "Content-Type: application/json" \\
+                  <br />
+                  &nbsp;&nbsp;-d '{"{"}"model": "gpt-4", "messages": [...]{"}"}'
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button onClick={() => setShowApiKeyDialog(false)}>{t("关闭", "Close")}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/components/dashboard-overview.tsx b/components/dashboard-overview.tsx
new file mode 100644
index 0000000..906e4a7
--- /dev/null
+++ b/components/dashboard-overview.tsx
@@ -0,0 +1,380 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Activity, Zap, GitBranch, Boxes } from "lucide-react"
+import { useLanguage } from "@/contexts/language-context"
+import { TaijiAPIClient } from "@/lib/api-client"
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  Tooltip,
+  AreaChart,
+  Area,
+} from "recharts"
+
+// 默认数据（加载时显示）
+const defaultEuConsumptionData = [
+  { time: "00:00", value: 0 },
+  { time: "04:00", value: 0 },
+  { time: "08:00", value: 0 },
+  { time: "12:00", value: 0 },
+  { time: "16:00", value: 0 },
+  { time: "20:00", value: 0 },
+  { time: "24:00", value: 0 },
+]
+
+const defaultModelDistribution = [
+  { name: "GPT-4o", value: 0, color: "oklch(0.60 0.20 264)" },
+  { name: "Claude 3.5", value: 0, color: "oklch(0.65 0.16 220)" },
+  { name: "Llama-3", value: 0, color: "oklch(0.55 0.18 300)" },
+]
+
+const defaultApiCallsData = [
+  { time: "Mon", calls: 0 },
+  { time: "Tue", calls: 0 },
+  { time: "Wed", calls: 0 },
+  { time: "Thu", calls: 0 },
+  { time: "Fri", calls: 0 },
+  { time: "Sat", calls: 0 },
+  { time: "Sun", calls: 0 },
+]
+
+export function DashboardOverview() {
+  const { t } = useLanguage()
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState({
+    activeAgents: 0,
+    totalRequests: 0,
+    euBalance: 0,
+    systemHealth: 0,
+  })
+  const [euConsumptionData, setEuConsumptionData] = useState(defaultEuConsumptionData)
+  const [modelDistribution, setModelDistribution] = useState(defaultModelDistribution)
+  const [apiCallsData, setApiCallsData] = useState(defaultApiCallsData)
+  const [systemComponents, setSystemComponents] = useState<Array<{ name: string; status: string; latency: string }>>([])
+
+  useEffect(() => {
+    loadDashboardData()
+  }, [])
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true)
+      
+      // 并行加载数据
+      const [dashboardStats, monitoringDashboard, billingBalance] = await Promise.allSettled([
+        TaijiAPIClient.getUserDashboardStats(),
+        TaijiAPIClient.getMonitoringDashboard(),
+        TaijiAPIClient.getBillingBalance(),
+      ])
+
+      // 处理仪表板统计
+      if (dashboardStats.status === "fulfilled" && dashboardStats.value?.success) {
+        const data = dashboardStats.value.data
+        setStats({
+          activeAgents: data.activeAgents || 0,
+          totalRequests: data.totalRequests || 0,
+          euBalance: data.euBalance || 0,
+          systemHealth: data.systemHealth || 0,
+        })
+      }
+
+      // 处理监控数据
+      if (monitoringDashboard.status === "fulfilled" && monitoringDashboard.value) {
+        const monitoring = monitoringDashboard.value
+        // 可以从监控数据中提取系统组件状态
+        if (monitoring.health?.services) {
+          const components = Object.entries(monitoring.health.services).map(([name, status]) => ({
+            name,
+            status: status === "healthy" ? t("正常运行", "Operational") : t("异常", "Error"),
+            latency: "0ms", // 可以从metrics中获取
+          }))
+          setSystemComponents(components)
+        }
+      }
+
+      // 处理余额数据
+      if (billingBalance.status === "fulfilled" && billingBalance.value?.success) {
+        const balance = billingBalance.value.data
+        setStats((prev) => ({
+          ...prev,
+          euBalance: balance.euBalance || balance.balance || 0,
+        }))
+      }
+
+      // 加载趋势数据
+      try {
+        const trends = await TaijiAPIClient.getMonitoringTrends({
+          metric: "eu_consumption",
+          period: "24h",
+          interval: "1h",
+        })
+        if (trends?.data) {
+          // 转换趋势数据为图表格式
+          const formatted = trends.data.map((item: any, index: number) => ({
+            time: `${index * 4}:00`,
+            value: item.count || 0,
+          }))
+          if (formatted.length > 0) {
+            setEuConsumptionData(formatted)
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load trends:", error)
+      }
+
+    } catch (error) {
+      console.error("Failed to load dashboard data:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Hero Stats */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card className="bg-card">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("活跃代理", "Active Agents")}
+            </CardTitle>
+            <Boxes className="h-4 w-4 text-primary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {loading ? (
+                <span className="inline-block h-8 w-16 animate-pulse bg-muted rounded" />
+              ) : (
+                stats.activeAgents.toLocaleString()
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {loading ? "" : t("活跃代理", "Active Agents")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("全局 API 调用", "Global API Calls")}
+            </CardTitle>
+            <Activity className="h-4 w-4 text-secondary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {loading ? (
+                <span className="inline-block h-8 w-20 animate-pulse bg-muted rounded" />
+              ) : (
+                stats.totalRequests > 1000
+                  ? `${(stats.totalRequests / 1000).toFixed(1)}K`
+                  : stats.totalRequests.toLocaleString()
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {loading ? "" : t("总请求数", "Total Requests")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("EU 余额", "EU Balance")}
+            </CardTitle>
+            <Zap className="h-4 w-4 text-chart-4" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {loading ? (
+                <span className="inline-block h-8 w-20 animate-pulse bg-muted rounded" />
+              ) : (
+                stats.euBalance.toLocaleString()
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {loading ? "" : t("可用余额", "Available Balance")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {t("系统健康度", "System Health")}
+            </CardTitle>
+            <GitBranch className="h-4 w-4 text-chart-2" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {loading ? (
+                <span className="inline-block h-8 w-12 animate-pulse bg-muted rounded" />
+              ) : (
+                `${stats.systemHealth}%`
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {loading ? "" : t("系统状态", "System Status")}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        {/* EU Consumption Chart */}
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle className="text-base">{t("执行单元 (EU) 消耗", "Execution Unit (EU) Consumption")}</CardTitle>
+            <p className="text-xs text-muted-foreground">{t("过去 24 小时", "Last 24 hours")}</p>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={250}>
+              <AreaChart data={euConsumptionData}>
+                <defs>
+                  <linearGradient id="colorEU" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="oklch(0.60 0.20 264)" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="oklch(0.60 0.20 264)" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <XAxis dataKey="time" stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+                <YAxis stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "oklch(0.15 0 0)",
+                    border: "1px solid oklch(0.22 0 0)",
+                    borderRadius: "8px",
+                  }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="value"
+                  stroke="oklch(0.60 0.20 264)"
+                  strokeWidth={2}
+                  fill="url(#colorEU)"
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        {/* Model Distribution Chart */}
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle className="text-base">{t("模型分布", "Model Distribution")}</CardTitle>
+            <p className="text-xs text-muted-foreground">{t("当前推理负载", "Current inference load")}</p>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={250}>
+              <PieChart>
+                <Pie
+                  data={modelDistribution}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={90}
+                  paddingAngle={2}
+                  dataKey="value"
+                >
+                  {modelDistribution.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "oklch(0.15 0 0)",
+                    border: "1px solid oklch(0.22 0 0)",
+                    borderRadius: "8px",
+                  }}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="mt-4 grid grid-cols-3 gap-4">
+              {modelDistribution.map((model) => (
+                <div key={model.name} className="flex flex-col items-center">
+                  <div className="flex items-center gap-2">
+                    <div className="h-3 w-3 rounded-full" style={{ backgroundColor: model.color }} />
+                    <span className="text-xs font-medium">{model.value}%</span>
+                  </div>
+                  <span className="text-xs text-muted-foreground mt-1">{model.name}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* API Calls Chart */}
+      <Card className="bg-card">
+        <CardHeader>
+          <CardTitle className="text-base">{t("每周 API 调用", "Weekly API Calls")}</CardTitle>
+          <p className="text-xs text-muted-foreground">{t("每日总调用次数", "Total calls per day")}</p>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={200}>
+            <LineChart data={apiCallsData}>
+              <XAxis dataKey="time" stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+              <YAxis stroke="oklch(0.45 0 0)" fontSize={12} tickLine={false} />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "oklch(0.15 0 0)",
+                  border: "1px solid oklch(0.22 0 0)",
+                  borderRadius: "8px",
+                }}
+              />
+              <Line
+                type="monotone"
+                dataKey="calls"
+                stroke="oklch(0.65 0.16 220)"
+                strokeWidth={2}
+                dot={{ fill: "oklch(0.65 0.16 220)", r: 4 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* System Status */}
+      <Card className="bg-card">
+        <CardHeader>
+          <CardTitle className="text-base">{t("系统组件", "System Components")}</CardTitle>
+          <p className="text-xs text-muted-foreground">{t("实时状态监控", "Real-time status monitoring")}</p>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+            {(systemComponents.length > 0
+              ? systemComponents
+              : [
+                  { name: "MCP Server", status: t("加载中", "Loading"), latency: "-" },
+                  { name: "Data Ingestion", status: t("加载中", "Loading"), latency: "-" },
+                  { name: "API Gateway", status: t("加载中", "Loading"), latency: "-" },
+                ]
+            ).map((component) => (
+              <div
+                key={component.name}
+                className="flex items-center justify-between rounded-lg border border-border bg-muted/30 p-3"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="h-2 w-2 rounded-full bg-green-500" />
+                  <div>
+                    <p className="text-sm font-medium">{component.name}</p>
+                    <p className="text-xs text-muted-foreground">{component.latency}</p>
+                  </div>
+                </div>
+                <span className="text-xs text-green-500">{component.status}</span>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..55c2f6e
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..e538a33
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..9704452
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
new file mode 100644
index 0000000..e6751ab
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..40bb120
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..aa98465
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..fc4126b
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..1750ff2
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100644
index 0000000..09d4430
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..f64632d
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..eaa373e
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute bg-popover inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            )
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..db7dd3c
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..d4a768e
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = 'horizontal',
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext],
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on('reInit', onSelect)
+    api.on('select', onSelect)
+
+    return () => {
+      api?.off('select', onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = 'outline',
+  size = 'icon',
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100644
index 0000000..421fe58
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === 'string'
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
+            }
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..37d340f
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..3cbdff6
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..4833ca8
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 0000000..9e536f2
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+'use client'
+
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..243fb19
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
new file mode 100644
index 0000000..307bdce
--- /dev/null
+++ b/components/ui/drawer.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/lib/utils'
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..a2096fa
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
new file mode 100644
index 0000000..2c57e94
--- /dev/null
+++ b/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        'flex max-w-sm flex-col items-center gap-2 text-center',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function EmptyMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn('text-lg font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
new file mode 100644
index 0000000..f4c2f21
--- /dev/null
+++ b/components/ui/field.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+import { useMemo } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+        horizontal: [
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+)
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-destructive text-sm font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..6233f94
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..55d6f76
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
new file mode 100644
index 0000000..183d297
--- /dev/null
+++ b/components/ui/input-group.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+        'h-9 has-[>textarea]:h-auto',
+
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+        // Focus state.
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end':
+          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  'text-sm shadow-none flex gap-2 items-center',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+)
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
new file mode 100644
index 0000000..3f6c477
--- /dev/null
+++ b/components/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { MinusIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..f199a06
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
new file mode 100644
index 0000000..efdf58c
--- /dev/null
+++ b/components/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn('my-0', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
+      },
+      size: {
+        default: 'p-4 gap-4 ',
+        sm: 'py-3 px-4 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/components/ui/kbd.tsx b/components/ui/kbd.tsx
new file mode 100644
index 0000000..9897f35
--- /dev/null
+++ b/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+        "[&_svg:not([class*='size-'])]:size-3",
+        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..5d66da2
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..791360c
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..53e7543
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
new file mode 100644
index 0000000..ce8f25d
--- /dev/null
+++ b/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..b4fc827
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..ab38305
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9af867
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..5c2f91d
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+import { GripVerticalIcon } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..dc98eb0
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..5db0bca
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..f43aaf5
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..51041fa
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..ee74343
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { PanelLeftIcon } from 'lucide-react'
+
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open],
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed'
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button'
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  size?: 'sm' | 'md'
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..e3beb90
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..773e064
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+        }
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={
+            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+          }
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..0626caf
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
new file mode 100644
index 0000000..e51fc6d
--- /dev/null
+++ b/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..3c4cfa3
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        }
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..fcdd10c
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..ff67104
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..3809775
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 0000000..40eedf5
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 0000000..3b91885
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useToast } from '@/hooks/use-toast'
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast'
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..0ab9971
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
new file mode 100644
index 0000000..ad6b286
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..877239c
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/components/ui/use-mobile.tsx b/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/components/ui/use-toast.ts
@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/contexts/language-context.tsx b/contexts/language-context.tsx
new file mode 100644
index 0000000..08b6ee7
--- /dev/null
+++ b/contexts/language-context.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import type React from "react"
+import { createContext, useContext, useState, useEffect } from "react"
+
+type Language = "zh" | "en"
+
+interface LanguageContextType {
+  language: Language
+  setLanguage: (lang: Language) => void
+  t: (zh: string, en: string) => string
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
+
+export function LanguageProvider({ children }: { children: React.ReactNode }) {
+  const [language, setLanguage] = useState<Language>("zh")
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem("language") as Language
+    if (savedLang) {
+      setLanguage(savedLang)
+    }
+  }, [])
+
+  const handleSetLanguage = (lang: Language) => {
+    setLanguage(lang)
+    localStorage.setItem("language", lang)
+  }
+
+  const t = (zh: string, en: string) => {
+    return language === "zh" ? zh : en
+  }
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  )
+}
+
+export function useLanguage() {
+  const context = useContext(LanguageContext)
+  if (!context) {
+    throw new Error("useLanguage must be used within a LanguageProvider")
+  }
+  return context
+}
diff --git a/docs/API_CLIENT_SUMMARY.md b/docs/API_CLIENT_SUMMARY.md
new file mode 100644
index 0000000..644d814
--- /dev/null
+++ b/docs/API_CLIENT_SUMMARY.md
@@ -0,0 +1,175 @@
+# API 客户端对接完成总结
+
+## ✅ 已完成的工作
+
+### 1. API 客户端完整实现 (`lib/api-client.ts`)
+
+已根据后端 API 接口文档完整实现了所有接口方法，包括：
+
+#### 认证模块 API (6个方法)
+- ✅ `login()` - 用户登录
+- ✅ `logout()` - 用户登出
+- ✅ `refreshToken()` - 刷新Token
+- ✅ `changePassword()` - 修改密码
+- ✅ `getApiKeyInfo()` - 获取API密钥信息
+- ✅ `regenerateApiKey()` - 重新生成API密钥
+
+#### 用户侧平台 API (14个方法)
+- ✅ `getUserDashboardStats()` - 获取仪表板统计
+- ✅ `getUserAgentActivity()` - 获取Agent活动数据
+- ✅ `selectGateway()` - 选择网关类型
+- ✅ `createGatewayAPI()` - 创建网关API
+- ✅ `getGatewayAPIs()` - 获取网关API列表
+- ✅ `getGatewayMonitoring()` - 获取网关监控数据
+- ✅ `generateTool()` - 生成工具
+- ✅ `createDataTemplate()` - 创建数据模板
+- ✅ `getPlatformAgents()` - 获取平台Agent列表
+- ✅ `deployAgent()` - 部署Agent
+- ✅ `createWorkflow()` - 创建工作流
+- ✅ `getBillingBalance()` - 获取余额信息
+- ✅ `rechargeBalance()` - 充值余额
+- ✅ `getBillingHistory()` - 获取计费历史
+
+#### 渠道合作伙伴 API (8个方法)
+- ✅ `getChannelTenants()` - 获取租户列表
+- ✅ `createChannelTenant()` - 创建租户
+- ✅ `allocateTenantResources()` - 分配租户资源
+- ✅ `updateTenantBilling()` - 更新租户计费设置
+- ✅ `rechargeTenant()` - 为租户充值
+- ✅ `setTenantCreditLimit()` - 设置租户授信额度
+- ✅ `applyForResources()` - 申请资源
+- ✅ `getChannelBillingStats()` - 获取渠道计费统计
+
+#### 超级管理员 API (10个方法)
+- ✅ `getAdminDashboardStats()` - 获取平台统计
+- ✅ `getAdminChannels()` - 获取渠道列表
+- ✅ `createAdminChannel()` - 创建渠道
+- ✅ `manageChannelResources()` - 统一管理渠道资源
+- ✅ `getAdminApplications()` - 获取所有申请
+- ✅ `reviewApplication()` - 审批申请
+- ✅ `getAdminModelProviders()` - 获取所有模型供应商
+- ✅ `getAdminAgentResources()` - 获取所有Agent资源
+- ✅ `getAdminAgentMonitoring()` - 监控Agent健康状态
+- ✅ `getAdminBillingOverview()` - 获取三维度计费统计
+
+#### 供应商管理 API (6个方法)
+- ✅ `getModelProviders()` - 获取模型供应商列表
+- ✅ `createModelProvider()` - 创建模型供应商
+- ✅ `getProviderDetails()` - 获取供应商详情
+- ✅ `updateProvider()` - 更新供应商配置
+- ✅ `deleteProvider()` - 删除供应商
+- ✅ `testProviderConnection()` - 测试供应商连接
+
+#### Data Ingestion 服务 API (12个方法)
+- ✅ `getHealth()` - 健康检查
+- ✅ `syncRapidAPI()` - 同步RapidAPI
+- ✅ `testRapidAPI()` - 测试RapidAPI端点
+- ✅ `parseOpenAPI()` - 解析OpenAPI规范
+- ✅ `processAPILLAMA()` - APILLAMA处理API文档
+- ✅ `generateTool()` - 生成工具定义
+- ✅ `getTools()` - 获取工具列表
+- ✅ `getTool()` - 获取特定工具定义
+- ✅ `deleteTool()` - 删除工具
+- ✅ `getStats()` - 获取统计信息
+- ✅ `clearCache()` - 清除缓存
+- ✅ `getMetrics()` - 获取Prometheus Metrics
+
+#### MCP Server 服务 API (11个方法)
+- ✅ `getMCPHealth()` - MCP Server健康检查
+- ✅ `registerAgent()` - 注册Agent
+- ✅ `getAgents()` - 获取Agent列表
+- ✅ `getAgent()` - 获取特定Agent
+- ✅ `executeAgentTool()` - 执行Agent工具
+- ✅ `getMCPTools()` - 获取工具列表
+- ✅ `getMCPMetrics()` - 获取MCP Prometheus Metrics
+- ✅ `getMonitoringMetrics()` - 获取系统性能指标
+- ✅ `getMonitoringStats()` - 获取服务统计信息
+- ✅ `getMonitoringTrends()` - 获取性能趋势数据
+- ✅ `getMonitoringAlerts()` - 获取系统告警
+- ✅ `getMonitoringDashboard()` - 获取监控仪表盘聚合
+
+#### WebSocket API (1个方法)
+- ✅ `createAgentWebSocket()` - 创建Agent WebSocket连接
+
+### 2. 核心功能实现
+
+#### 认证 Token 管理
+- ✅ 自动保存 Token 到 localStorage
+- ✅ 自动在请求头中添加 Authorization
+- ✅ 支持 JWT Token 和 API Key 双认证
+- ✅ 自动处理 Token 刷新
+
+#### 错误处理
+- ✅ 统一的错误处理机制
+- ✅ 类型安全的响应处理
+- ✅ 友好的错误提示
+
+#### 类型定义
+- ✅ 导出 `APIResponse` 类型供外部使用
+- ✅ 完整的 TypeScript 类型支持
+
+### 3. 登录页面集成
+
+- ✅ 更新登录页面使用新的 API 客户端
+- ✅ 添加错误处理和用户提示
+- ✅ 集成 toast 通知
+
+### 4. 文档
+
+- ✅ 创建 API 集成说明文档 (`docs/API_INTEGRATION.md`)
+- ✅ 包含所有 API 方法的使用示例
+- ✅ 包含错误处理、认证管理等说明
+
+## 📋 使用示例
+
+### 基本使用
+
+```typescript
+import { TaijiAPIClient } from "@/lib/api-client"
+
+// 登录
+const result = await TaijiAPIClient.login("user@example.com", "password", "user")
+
+// 获取仪表板统计
+const stats = await TaijiAPIClient.getUserDashboardStats()
+
+// 部署Agent
+await TaijiAPIClient.deployAgent({
+  agentId: "agent-uuid",
+  instances: 3,
+  model: "gpt-4o-mini",
+  gateway: "MCP"
+})
+```
+
+## 🔧 配置
+
+在 `.env.local` 文件中配置 API 端点：
+
+```bash
+NEXT_PUBLIC_DATA_INGESTION_URL=http://localhost:8001
+NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8000
+NEXT_PUBLIC_API_GATEWAY_URL=http://localhost:80
+```
+
+## 📝 注意事项
+
+1. **环境变量**: 确保设置了正确的 API 端点 URL
+2. **CORS**: 开发环境需要后端配置 CORS
+3. **错误处理**: 所有 API 调用都应该有错误处理
+4. **Token 管理**: Token 自动管理，无需手动处理
+5. **类型安全**: 使用 TypeScript 类型检查
+
+## 🚀 下一步
+
+1. 在各个页面组件中集成 API 调用
+2. 替换现有的模拟数据为真实 API 调用
+3. 添加加载状态和错误处理
+4. 实现数据缓存和优化
+
+## 📚 相关文档
+
+- API 集成说明: `docs/API_INTEGRATION.md`
+- 后端 API 文档: `/tools/taiji-AI-PAD/Docs/前后端调试说明/API接口文档.md`
+- 后端需求文档: `docs/backend-api-requirements.md`
+
diff --git a/docs/API_INTEGRATION.md b/docs/API_INTEGRATION.md
new file mode 100644
index 0000000..99403b0
--- /dev/null
+++ b/docs/API_INTEGRATION.md
@@ -0,0 +1,295 @@
+# API 集成说明
+
+本文档说明如何在前端项目中使用后端 API 接口。
+
+## 环境配置
+
+在项目根目录创建 `.env.local` 文件（或使用 `.env.example` 作为模板）：
+
+```bash
+NEXT_PUBLIC_DATA_INGESTION_URL=http://localhost:8001
+NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8000
+NEXT_PUBLIC_API_GATEWAY_URL=http://localhost:80
+```
+
+## API 客户端使用
+
+### 导入 API 客户端
+
+```typescript
+import { TaijiAPIClient } from "@/lib/api-client"
+```
+
+### 认证相关
+
+#### 登录
+```typescript
+try {
+  const result = await TaijiAPIClient.login("user@example.com", "password", "user")
+  if (result.success) {
+    // Token 已自动保存到 localStorage
+    console.log("登录成功", result.data.user)
+  }
+} catch (error) {
+  console.error("登录失败", error)
+}
+```
+
+#### 登出
+```typescript
+await TaijiAPIClient.logout()
+// Token 已自动清除
+```
+
+#### 刷新 Token
+```typescript
+await TaijiAPIClient.refreshToken()
+```
+
+### 用户侧平台 API
+
+#### 获取仪表板统计
+```typescript
+const stats = await TaijiAPIClient.getUserDashboardStats()
+console.log(stats.data.activeAgents)
+```
+
+#### 部署 Agent
+```typescript
+const result = await TaijiAPIClient.deployAgent({
+  agentId: "agent-uuid",
+  instances: 3,
+  model: "gpt-4o-mini",
+  gateway: "MCP"
+})
+```
+
+#### 创建工作流
+```typescript
+const workflow = await TaijiAPIClient.createWorkflow({
+  name: "订单处理流程",
+  gateway: "MCP",
+  nodes: [
+    {
+      agentId: "agent-1",
+      agentType: "platform",
+      agentName: "订单验证Agent",
+      order: 1
+    }
+  ]
+})
+```
+
+#### 获取计费历史
+```typescript
+const history = await TaijiAPIClient.getBillingHistory({
+  startTime: "2025-01-01T00:00:00Z",
+  endTime: "2025-01-31T23:59:59Z",
+  page: 1,
+  pageSize: 20
+})
+```
+
+### 渠道合作伙伴 API
+
+#### 获取租户列表
+```typescript
+const tenants = await TaijiAPIClient.getChannelTenants()
+```
+
+#### 创建租户
+```typescript
+const tenant = await TaijiAPIClient.createChannelTenant({
+  name: "企业客户A",
+  email: "contact@company-a.com",
+  password: "securepass123",
+  subscriptionTier: "enterprise"
+})
+```
+
+#### 分配租户资源
+```typescript
+await TaijiAPIClient.allocateTenantResources("tenant-id", {
+  agents: [
+    { agentId: "agent-1", quantity: 10 }
+  ],
+  models: [
+    { modelName: "gpt-4", rpm: 10000, tpm: 500000 }
+  ],
+  customAgentResources: {
+    cpu: 2.0,
+    memory: 4.0
+  }
+})
+```
+
+### 超级管理员 API
+
+#### 获取平台统计
+```typescript
+const stats = await TaijiAPIClient.getAdminDashboardStats()
+```
+
+#### 创建渠道
+```typescript
+const channel = await TaijiAPIClient.createAdminChannel({
+  name: "合作渠道A",
+  email: "partner@channel-a.com",
+  password: "channelpass123",
+  commissionRate: 10.0
+})
+```
+
+#### 审批申请
+```typescript
+await TaijiAPIClient.reviewApplication("application-id", true, "审批通过")
+```
+
+### 供应商管理 API
+
+#### 获取模型供应商列表
+```typescript
+const providers = await TaijiAPIClient.getModelProviders()
+```
+
+#### 创建模型供应商
+```typescript
+const provider = await TaijiAPIClient.createModelProvider({
+  name: "OpenAI",
+  provider: "openai",
+  apiUrl: "https://api.openai.com/v1",
+  apiKey: "sk-xxxxx",
+  supportedModels: ["gpt-4", "gpt-4o-mini"],
+  rpm: 3500,
+  tpm: 90000
+})
+```
+
+### Data Ingestion 服务 API
+
+#### 获取健康状态
+```typescript
+const health = await TaijiAPIClient.getHealth()
+```
+
+#### 同步 RapidAPI
+```typescript
+await TaijiAPIClient.syncRapidAPI("weather", 100)
+```
+
+#### 处理 APILLAMA
+```typescript
+const result = await TaijiAPIClient.processAPILLAMA(
+  { title: "Weather API", description: "Get weather" },
+  { service: "Weather service" },
+  "json_schema"
+)
+```
+
+#### 获取工具列表
+```typescript
+const tools = await TaijiAPIClient.getTools("weather", 100, 0)
+```
+
+### MCP Server API
+
+#### 注册 Agent
+```typescript
+const agent = await TaijiAPIClient.registerAgent({
+  name: "weather-agent",
+  description: "Weather information agent",
+  capabilities: ["weather_query"]
+})
+```
+
+#### 获取 Agent 列表
+```typescript
+const agents = await TaijiAPIClient.getAgents(0, 100)
+```
+
+#### 执行 Agent 工具
+```typescript
+const result = await TaijiAPIClient.executeAgentTool("agent-id", {
+  method: "tools/call",
+  params: {
+    tool: { name: "math_add", function_name: "math_add" },
+    arguments: { a: 10, b: 20 }
+  }
+})
+```
+
+### WebSocket 连接
+
+```typescript
+const ws = TaijiAPIClient.createAgentWebSocket("agent-id")
+
+ws.onopen = () => {
+  console.log("WebSocket connected")
+  ws.send(JSON.stringify({
+    type: "mcp_request",
+    payload: {
+      method: "tools/list",
+      params: {}
+    }
+  }))
+}
+
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data)
+  console.log("Received:", data)
+}
+```
+
+## 错误处理
+
+所有 API 方法都会抛出错误，建议使用 try-catch 处理：
+
+```typescript
+try {
+  const result = await TaijiAPIClient.getUserDashboardStats()
+  // 处理成功结果
+} catch (error: any) {
+  console.error("API Error:", error.message)
+  // 显示错误提示给用户
+}
+```
+
+## 认证 Token 管理
+
+API 客户端会自动管理认证 Token：
+
+- **登录时**: Token 自动保存到 `localStorage`
+- **请求时**: Token 自动添加到请求头 `Authorization: Bearer <token>`
+- **登出时**: Token 自动清除
+
+如果需要手动获取 Token：
+
+```typescript
+const token = localStorage.getItem("auth_token")
+```
+
+## API Key 认证
+
+除了 JWT Token，还支持 API Key 认证：
+
+```typescript
+// 设置 API Key
+localStorage.setItem("api_key", "sk-xxxxx")
+
+// API 客户端会自动使用 API Key
+const result = await TaijiAPIClient.getUserDashboardStats()
+```
+
+## 注意事项
+
+1. **环境变量**: 确保设置了正确的 API 端点 URL
+2. **CORS**: 开发环境需要后端配置 CORS 允许前端域名
+3. **错误处理**: 所有 API 调用都应该有错误处理
+4. **Token 过期**: 如果 Token 过期，需要重新登录或刷新 Token
+5. **类型安全**: API 客户端使用 TypeScript，建议启用类型检查
+
+## 相关文档
+
+- 后端 API 接口文档: `/tools/taiji-AI-PAD/Docs/前后端调试说明/API接口文档.md`
+- 后端需求文档: `/tools/taiji-pad-v0/docs/backend-api-requirements.md`
+
diff --git a/docs/backend-api-requirements.md b/docs/backend-api-requirements.md
new file mode 100644
index 0000000..c492dd2
--- /dev/null
+++ b/docs/backend-api-requirements.md
@@ -0,0 +1,1791 @@
+# Taiji AI Platform 后端需求与接口文档
+
+## 1. 项目概述
+
+### 1.1 项目背景
+Taiji AI Platform 是一个企业级 AI Agent 编排和管理平台，提供 Agent 部署、工作流编排、服务网关、数据工具管理和计费等功能。
+
+### 1.2 技术架构
+- **云平台**: Microsoft Azure
+- **容器编排**: Azure Kubernetes Service (AKS)
+- **API 网关**: Azure API Management (APIM)
+- **容器应用**: Azure Container Apps
+- **架构模式**: 微服务架构 + 云原生
+
+### 1.3 服务划分
+根据前端代码分析，后端需要提供以下服务：
+
+1. **认证授权服务** (Auth Service)
+2. **数据摄取服务** (Data Ingestion Service) - 端口 8001
+3. **MCP 服务器** (MCP Server) - 端口 8000
+4. **API 网关服务** (API Gateway Service) - 端口 80
+5. **Agent 管理服务** (Agent Management Service)
+6. **编排服务** (Orchestration Service)
+7. **计费服务** (Billing Service)
+8. **租户管理服务** (Tenant Management Service)
+9. **资源管理服务** (Resource Management Service)
+10. **监控服务** (Monitoring Service)
+
+---
+
+## 2. 系统架构设计
+
+### 2.1 整体架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Azure API Management (APIM)                │
+│                    (统一入口，路由分发)                        │
+└─────────────────────────────────────────────────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼──────┐   ┌────────▼────────┐   ┌──────▼──────┐
+│  Auth        │   │  API Gateway    │   │  Monitoring │
+│  Service     │   │  Service        │   │  Service    │
+└───────┬──────┘   └────────┬────────┘   └──────┬──────┘
+        │                   │                   │
+        └───────────────────┼───────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼──────┐   ┌────────▼────────┐   ┌──────▼──────┐
+│  Data        │   │  MCP Server     │   │  Agent      │
+│  Ingestion   │   │  Service        │   │  Management │
+└───────┬──────┘   └────────┬────────┘   └──────┬──────┘
+        │                   │                   │
+        └───────────────────┼───────────────────┘
+                            │
+        ┌───────────────────┼───────────────────┐
+        │                   │                   │
+┌───────▼──────┐   ┌────────▼────────┐   ┌──────▼──────┐
+│ Orchestration│   │  Billing        │   │  Tenant     │
+│  Service     │   │  Service        │   │  Management │
+└───────┬──────┘   └────────┬────────┘   └──────┬──────┘
+        │                   │                   │
+        └───────────────────┼───────────────────┘
+                            │
+                    ┌──────▼──────┐
+                    │  Resource   │
+                    │  Management │
+                    └─────────────┘
+```
+
+### 2.2 Azure 资源部署
+
+#### 2.2.1 AKS 集群配置
+- **节点池**: 至少 3 个节点
+- **节点规格**: Standard_D4s_v3 (4 vCPU, 16GB RAM)
+- **自动扩缩容**: 启用
+- **网络**: Azure CNI
+- **Ingress**: NGINX Ingress Controller
+
+#### 2.2.2 Container Apps 配置
+- **环境**: 生产环境、开发环境
+- **自动扩缩容**: 基于 CPU/内存/请求数
+- **最小实例**: 1
+- **最大实例**: 10
+
+#### 2.2.3 APIM 配置
+- **SKU**: Developer/Standard/Premium
+- **自定义域名**: api.taiji.ai
+- **API 版本管理**: 支持 v1, v2
+- **限流策略**: 按订阅、按用户
+- **认证**: OAuth 2.0, JWT
+
+---
+
+## 3. 数据模型设计
+
+### 3.1 用户与认证
+
+#### User (用户表)
+```sql
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password_hash VARCHAR(255) NOT NULL,
+    name VARCHAR(255),
+    role VARCHAR(50) NOT NULL, -- 'admin', 'channel', 'tenant', 'billing_admin', 'operations_admin'
+    language VARCHAR(10) DEFAULT 'en', -- 'en', 'zh'
+    status VARCHAR(20) DEFAULT 'active', -- 'active', 'suspended', 'inactive'
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Session (会话表)
+```sql
+CREATE TABLE sessions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id UUID REFERENCES users(id),
+    token VARCHAR(500) UNIQUE NOT NULL,
+    expires_at TIMESTAMP NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.2 租户管理
+
+#### Tenant (租户表)
+```sql
+CREATE TABLE tenants (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    company_name VARCHAR(255),
+    contact_person VARCHAR(255),
+    contact_email VARCHAR(255),
+    plan VARCHAR(50) NOT NULL, -- 'starter', 'professional', 'enterprise'
+    status VARCHAR(20) DEFAULT 'active', -- 'active', 'suspended'
+    channel_partner_id UUID REFERENCES users(id),
+    balance DECIMAL(10, 2) DEFAULT 0.00,
+    credit_limit DECIMAL(10, 2) DEFAULT 0.00,
+    subscription_tier VARCHAR(50),
+    discount_percentage INTEGER DEFAULT 0,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.3 Agent 管理
+
+#### Agent (Agent 表)
+```sql
+CREATE TABLE agents (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    type VARCHAR(50) NOT NULL, -- 'platform', 'custom'
+    icon VARCHAR(50),
+    capabilities TEXT[], -- 能力列表
+    status VARCHAR(20) DEFAULT 'available', -- 'available', 'deployed', 'running', 'stopped'
+    model VARCHAR(100), -- 使用的模型
+    service_gateway VARCHAR(20), -- 'mcp', 'a2a', 'api'
+    cpu_cores DECIMAL(4, 2) DEFAULT 2.0,
+    memory_gb DECIMAL(6, 2) DEFAULT 4.0,
+    tenant_id UUID REFERENCES tenants(id),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Agent Deployment (Agent 部署表)
+```sql
+CREATE TABLE agent_deployments (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    agent_id UUID REFERENCES agents(id),
+    tenant_id UUID REFERENCES tenants(id),
+    instance_count INTEGER DEFAULT 1,
+    model VARCHAR(100) NOT NULL,
+    service_gateway VARCHAR(20) NOT NULL,
+    status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'deploying', 'running', 'stopped', 'failed'
+    pod_name VARCHAR(255),
+    namespace VARCHAR(100),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.4 工作流管理
+
+#### Workflow (工作流表)
+```sql
+CREATE TABLE workflows (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    tenant_id UUID REFERENCES tenants(id),
+    service_gateway VARCHAR(20) NOT NULL, -- 'mcp', 'a2a', 'api'
+    status VARCHAR(20) DEFAULT 'stopped', -- 'running', 'stopped', 'paused'
+    max_nodes INTEGER DEFAULT 3,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Workflow Node (工作流节点表)
+```sql
+CREATE TABLE workflow_nodes (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    workflow_id UUID REFERENCES workflows(id),
+    agent_id UUID REFERENCES agents(id),
+    sequence_order INTEGER NOT NULL,
+    config JSONB, -- 节点配置
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.5 服务网关
+
+#### Service Gateway (服务网关表)
+```sql
+CREATE TABLE service_gateways (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(50) NOT NULL, -- 'mcp', 'a2a', 'api'
+    full_name VARCHAR(255),
+    description TEXT,
+    status VARCHAR(20) DEFAULT 'active',
+    endpoint_count INTEGER DEFAULT 0,
+    usage_percentage DECIMAL(5, 2) DEFAULT 0.00,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### API Endpoint (API 端点表)
+```sql
+CREATE TABLE api_endpoints (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    gateway_id UUID REFERENCES service_gateways(id),
+    method VARCHAR(10) NOT NULL, -- 'GET', 'POST', 'PUT', 'DELETE'
+    url TEXT NOT NULL,
+    description TEXT,
+    request_params JSONB,
+    status VARCHAR(20) DEFAULT 'active',
+    tenant_id UUID REFERENCES tenants(id),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.6 数据工具
+
+#### Tool (工具表)
+```sql
+CREATE TABLE tools (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    category VARCHAR(100),
+    method VARCHAR(10) NOT NULL,
+    endpoint TEXT NOT NULL,
+    status VARCHAR(20) DEFAULT 'active',
+    framework VARCHAR(20), -- 'mcp', 'a2a', 'api'
+    tenant_id UUID REFERENCES tenants(id),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Data Template (数据模板表)
+```sql
+CREATE TABLE data_templates (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    type VARCHAR(50) NOT NULL, -- 'json', 'storage'
+    config JSONB NOT NULL, -- 配置信息
+    tenant_id UUID REFERENCES tenants(id),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.7 计费系统
+
+#### Billing Record (计费记录表)
+```sql
+CREATE TABLE billing_records (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    agent_id UUID REFERENCES agents(id),
+    agent_type VARCHAR(100),
+    call_duration_seconds INTEGER NOT NULL,
+    eu_consumed DECIMAL(10, 2) NOT NULL, -- 1 EU = 10 seconds
+    price DECIMAL(10, 2) NOT NULL,
+    timestamp TIMESTAMP NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Billing Summary (计费汇总表)
+```sql
+CREATE TABLE billing_summaries (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    period_start DATE NOT NULL,
+    period_end DATE NOT NULL,
+    total_calls INTEGER DEFAULT 0,
+    total_eu DECIMAL(12, 2) DEFAULT 0.00,
+    total_cost DECIMAL(10, 2) DEFAULT 0.00,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(tenant_id, period_start, period_end)
+);
+```
+
+#### Recharge Record (充值记录表)
+```sql
+CREATE TABLE recharge_records (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    amount DECIMAL(10, 2) NOT NULL,
+    balance_before DECIMAL(10, 2) NOT NULL,
+    balance_after DECIMAL(10, 2) NOT NULL,
+    operator_id UUID REFERENCES users(id),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 3.8 资源管理
+
+#### Resource Allocation (资源分配表)
+```sql
+CREATE TABLE resource_allocations (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    agent_type VARCHAR(100) NOT NULL,
+    allocated_quantity INTEGER NOT NULL,
+    available_quantity INTEGER NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(tenant_id, agent_type)
+);
+```
+
+#### Model Quota (模型配额表)
+```sql
+CREATE TABLE model_quotas (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    provider_name VARCHAR(255) NOT NULL,
+    model_name VARCHAR(255) NOT NULL,
+    rpm INTEGER NOT NULL, -- Requests Per Minute
+    tpm INTEGER NOT NULL, -- Tokens Per Minute
+    status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'approved', 'rejected'
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### Custom Agent Resource (自定义 Agent 资源表)
+```sql
+CREATE TABLE custom_agent_resources (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    tenant_id UUID REFERENCES tenants(id),
+    cpu_cores_per_agent DECIMAL(4, 2) NOT NULL,
+    memory_gb_per_agent DECIMAL(6, 2) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(tenant_id)
+);
+```
+
+---
+
+## 4. API 接口定义
+
+### 4.1 认证授权服务 (Auth Service)
+
+#### 4.1.1 用户登录
+```http
+POST /api/v1/auth/login
+Content-Type: application/json
+
+Request Body:
+{
+  "email": "user@example.com",
+  "password": "password123"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+    "user": {
+      "id": "uuid",
+      "email": "user@example.com",
+      "name": "User Name",
+      "role": "tenant",
+      "language": "en"
+    },
+    "expires_at": "2025-01-23T10:00:00Z"
+  }
+}
+```
+
+#### 4.1.2 用户注册
+```http
+POST /api/v1/auth/register
+Content-Type: application/json
+
+Request Body:
+{
+  "email": "user@example.com",
+  "password": "password123",
+  "name": "User Name",
+  "role": "tenant"
+}
+```
+
+#### 4.1.3 刷新 Token
+```http
+POST /api/v1/auth/refresh
+Authorization: Bearer {token}
+```
+
+#### 4.1.4 登出
+```http
+POST /api/v1/auth/logout
+Authorization: Bearer {token}
+```
+
+### 4.2 数据摄取服务 (Data Ingestion Service)
+
+#### 4.2.1 健康检查
+```http
+GET /health
+
+Response 200:
+{
+  "status": "healthy",
+  "timestamp": "2025-01-22T10:00:00Z"
+}
+```
+
+#### 4.2.2 同步 RapidAPI
+```http
+POST /rapidapi/sync?category=weather&limit=100
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "synced_count": 100,
+    "category": "weather"
+  }
+}
+```
+
+#### 4.2.3 处理 API LLAMA
+```http
+POST /apillama/process
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "api_doc": {...},
+  "context": {...},
+  "output_format": "json_schema"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "processed": true,
+    "result": {...}
+  }
+}
+```
+
+#### 4.2.4 获取工具列表
+```http
+GET /tools?category=weather&limit=100&offset=0
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "tools": [
+      {
+        "id": "uuid",
+        "name": "get_weather",
+        "category": "weather",
+        "method": "GET",
+        "url": "https://api.example.com/weather",
+        "status": "active"
+      }
+    ],
+    "total": 100,
+    "limit": 100,
+    "offset": 0
+  }
+}
+```
+
+#### 4.2.5 获取统计信息
+```http
+GET /stats
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "total_apis": 100,
+    "processed_apis": 85,
+    "generated_tools": 20,
+    "active_pods": 44
+  }
+}
+```
+
+### 4.3 MCP 服务器 (MCP Server)
+
+#### 4.3.1 注册 Agent
+```http
+POST /agents
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Weather Query Agent",
+  "description": "提供全球天气信息查询和预报服务",
+  "capabilities": ["实时天气", "7天预报", "气象警告"]
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Weather Query Agent",
+    "status": "registered"
+  }
+}
+```
+
+#### 4.3.2 获取 Agent 列表
+```http
+GET /agents?status=active&limit=100&offset=0
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "agents": [
+      {
+        "id": "uuid",
+        "name": "Weather Query Agent",
+        "description": "...",
+        "status": "active",
+        "capabilities": [...]
+      }
+    ],
+    "total": 100,
+    "limit": 100,
+    "offset": 0
+  }
+}
+```
+
+#### 4.3.3 执行 Agent 工具
+```http
+POST /agents/{agentId}/execute
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "tool_name": "get_weather",
+  "parameters": {
+    "location": "Beijing",
+    "date": "2025-01-22"
+  }
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "result": {...},
+    "execution_time": 1.2
+  }
+}
+```
+
+#### 4.3.4 WebSocket 连接
+```http
+WS /ws/{agentId}
+Authorization: Bearer {token}
+
+Message Format:
+{
+  "type": "execute" | "status" | "result",
+  "data": {...}
+}
+```
+
+### 4.4 Agent 管理服务 (Agent Management Service)
+
+#### 4.4.1 部署 Agent
+```http
+POST /api/v1/agents/deploy
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "agent_id": "uuid",
+  "instance_count": 1,
+  "model": "gpt-4o-mini",
+  "service_gateway": "mcp",
+  "tenant_id": "uuid"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "deployment_id": "uuid",
+    "status": "deploying",
+    "pod_name": "agent-pod-xxx"
+  }
+}
+```
+
+#### 4.4.2 获取已部署 Agent 列表
+```http
+GET /api/v1/agents/deployments?tenant_id={tenantId}&status=running
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "deployments": [
+      {
+        "id": "uuid",
+        "agent": {...},
+        "instance_count": 1,
+        "status": "running",
+        "created_at": "2025-01-22T10:00:00Z"
+      }
+    ]
+  }
+}
+```
+
+#### 4.4.3 停止 Agent 部署
+```http
+DELETE /api/v1/agents/deployments/{deploymentId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "status": "stopped"
+  }
+}
+```
+
+### 4.5 编排服务 (Orchestration Service)
+
+#### 4.5.1 创建工作流
+```http
+POST /api/v1/workflows
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Customer Support Workflow",
+  "service_gateway": "mcp",
+  "nodes": [
+    {
+      "agent_id": "uuid-1",
+      "sequence_order": 1
+    },
+    {
+      "agent_id": "uuid-2",
+      "sequence_order": 2
+    }
+  ],
+  "tenant_id": "uuid"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Customer Support Workflow",
+    "status": "stopped"
+  }
+}
+```
+
+#### 4.5.2 获取工作流列表
+```http
+GET /api/v1/workflows?tenant_id={tenantId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "workflows": [
+      {
+        "id": "uuid",
+        "name": "Customer Support Workflow",
+        "nodes": [...],
+        "status": "running"
+      }
+    ]
+  }
+}
+```
+
+#### 4.5.3 运行工作流
+```http
+POST /api/v1/workflows/{workflowId}/run
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "input": {...}
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "execution_id": "uuid",
+    "status": "running",
+    "result": null
+  }
+}
+```
+
+#### 4.5.4 停止工作流
+```http
+POST /api/v1/workflows/{workflowId}/stop
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "status": "stopped"
+  }
+}
+```
+
+#### 4.5.5 删除工作流
+```http
+DELETE /api/v1/workflows/{workflowId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true
+}
+```
+
+### 4.6 服务网关 (Service Gateway)
+
+#### 4.6.1 获取网关列表
+```http
+GET /api/v1/gateways
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "gateways": [
+      {
+        "id": "uuid",
+        "name": "MCP",
+        "full_name": "Model Context Protocol",
+        "status": "active",
+        "endpoints": 8,
+        "usage": 42
+      }
+    ]
+  }
+}
+```
+
+#### 4.6.2 选择服务网关
+```http
+POST /api/v1/gateways/select
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "gateway_type": "mcp",
+  "tenant_id": "uuid"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "selected": true
+  }
+}
+```
+
+#### 4.6.3 创建 API
+```http
+POST /api/v1/gateways/apis
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Weather API",
+  "gateway_id": "uuid",
+  "method": "GET",
+  "url": "https://api.example.com/weather",
+  "description": "Weather information API",
+  "request_params": {...},
+  "upload_method": "file", // or "url"
+  "json_file": "base64_encoded_content" // if upload_method is "file"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Weather API",
+    "status": "active"
+  }
+}
+```
+
+#### 4.6.4 获取模型提供商监控
+```http
+GET /api/v1/gateways/providers/monitoring
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "providers": [
+      {
+        "name": "OpenAI",
+        "requests": 45200,
+        "latency": 45,
+        "status": "healthy"
+      }
+    ]
+  }
+}
+```
+
+### 4.7 数据工具服务 (Data Tools Service)
+
+#### 4.7.1 生成新工具并部署 Pod
+```http
+POST /api/v1/tools/generate
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "framework": "mcp",
+  "tool_name": "get_weather",
+  "api_endpoint": "https://api.example.com/weather",
+  "service_gateway": "mcp-gateway",
+  "pod_config": {
+    "agent_count": 1,
+    "cpu_cores": 1,
+    "memory_gb": 2,
+    "max_agents": 5,
+    "model": "gpt-4o-mini"
+  },
+  "tenant_id": "uuid"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "tool_id": "uuid",
+    "pod_id": "uuid",
+    "status": "deploying"
+  }
+}
+```
+
+#### 4.7.2 获取工具列表
+```http
+GET /api/v1/tools?category=weather&limit=100&offset=0
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "tools": [
+      {
+        "id": "uuid",
+        "name": "get_weather",
+        "category": "weather",
+        "method": "GET",
+        "url": "https://api.example.com/weather",
+        "status": "active",
+        "created": "2025-12-22"
+      }
+    ],
+    "total": 100
+  }
+}
+```
+
+#### 4.7.3 删除工具
+```http
+DELETE /api/v1/tools/{toolId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true
+}
+```
+
+#### 4.7.4 创建数据模板
+```http
+POST /api/v1/tools/templates
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Weather Data Template",
+  "type": "json", // or "storage"
+  "config": {
+    "data_interface_url": "https://api.example.com/data",
+    "query_parameters": "page=1&limit=10"
+  },
+  // OR for storage type:
+  // "config": {
+  //   "storage_service": "azure-blob",
+  //   "connection_string": "..."
+  // },
+  "tenant_id": "uuid"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Weather Data Template",
+    "type": "json"
+  }
+}
+```
+
+### 4.8 计费服务 (Billing Service)
+
+#### 4.8.1 获取账户余额
+```http
+GET /api/v1/billing/balance
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "balance": 2487.50,
+    "currency": "USD",
+    "monthly_consumption": 745.00,
+    "eu_balance": 2487
+  }
+}
+```
+
+#### 4.8.2 获取 EU 消费历史
+```http
+GET /api/v1/billing/eu-consumption?start_date=2025-01-15&end_date=2025-01-22
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "consumption": [
+      {
+        "date": "2025-01-15",
+        "eu": 1820
+      }
+    ]
+  }
+}
+```
+
+#### 4.8.3 获取费用明细
+```http
+GET /api/v1/billing/cost-breakdown?period=2025-01
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "breakdown": [
+      {
+        "category": "Model Inference",
+        "cost": 450.00,
+        "eu": 18500
+      }
+    ],
+    "total_cost": 745.00,
+    "total_eu": 30300
+  }
+}
+```
+
+#### 4.8.4 账户充值
+```http
+POST /api/v1/billing/recharge
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "amount": 100.00,
+  "tenant_id": "uuid" // for channel partner
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "recharge_id": "uuid",
+    "balance_before": 2487.50,
+    "balance_after": 2587.50,
+    "amount": 100.00
+  }
+}
+```
+
+#### 4.8.5 设置授信额度
+```http
+POST /api/v1/billing/credit-limit
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "tenant_id": "uuid",
+  "credit_limit": 2000.00
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "credit_limit": 2000.00
+  }
+}
+```
+
+#### 4.8.6 获取计费记录（租户维度）
+```http
+GET /api/v1/billing/tenant-records?start_date=2025-01-01&end_date=2025-01-31
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "records": [
+      {
+        "tenant_id": "uuid",
+        "tenant_name": "Acme Corp",
+        "calls": 1250,
+        "eu": 3750,
+        "price": 375.00
+      }
+    ]
+  }
+}
+```
+
+#### 4.8.7 获取调用记录明细
+```http
+GET /api/v1/billing/call-records?start_datetime=2025-01-15T00:00:00Z&end_datetime=2025-01-15T23:59:59Z&tenant_id={tenantId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "records": [
+      {
+        "timestamp": "2025-01-15T14:32:18Z",
+        "tenant": "Acme Corp",
+        "agent_type": "Data Analysis",
+        "duration_seconds": 45,
+        "eu": 4.5,
+        "price": 0.45
+      }
+    ],
+    "total": 100
+  }
+}
+```
+
+#### 4.8.8 导出计费数据
+```http
+POST /api/v1/billing/export
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "format": "excel", // "excel", "csv", "pdf"
+  "start_date": "2025-01-01",
+  "end_date": "2025-01-31",
+  "filters": {
+    "tenant_id": "uuid",
+    "min_calls": 0,
+    "max_calls": 10000
+  }
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "download_url": "https://storage.azure.com/...",
+    "expires_at": "2025-01-23T10:00:00Z"
+  }
+}
+```
+
+### 4.9 租户管理服务 (Tenant Management Service)
+
+#### 4.9.1 创建租户
+```http
+POST /api/v1/tenants
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Acme Corporation",
+  "company_name": "Acme Corp",
+  "contact_person": "John Doe",
+  "contact_email": "contact@acme.com",
+  "plan": "professional"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Acme Corporation",
+    "status": "active"
+  }
+}
+```
+
+#### 4.9.2 获取租户列表
+```http
+GET /api/v1/tenants?status=active&plan=professional&limit=100&offset=0
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "tenants": [
+      {
+        "id": "uuid",
+        "name": "Acme Corporation",
+        "status": "active",
+        "plan": "professional",
+        "users": 45,
+        "revenue": 3200.00,
+        "balance": 500.00,
+        "credit_limit": 2000.00
+      }
+    ],
+    "total": 100
+  }
+}
+```
+
+#### 4.9.3 获取租户详情
+```http
+GET /api/v1/tenants/{tenantId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "id": "uuid",
+    "name": "Acme Corporation",
+    "status": "active",
+    "plan": "professional",
+    "users": 45,
+    "balance": 500.00,
+    "credit_limit": 2000.00
+  }
+}
+```
+
+#### 4.9.4 更新租户
+```http
+PUT /api/v1/tenants/{tenantId}
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "name": "Updated Name",
+  "status": "active"
+}
+```
+
+#### 4.9.5 管理租户计费设置
+```http
+POST /api/v1/tenants/{tenantId}/billing
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "subscription_tier": "enterprise",
+  "discount_percentage": 10
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "subscription_tier": "enterprise",
+    "discount_percentage": 10
+  }
+}
+```
+
+### 4.10 资源管理服务 (Resource Management Service)
+
+#### 4.10.1 分配 Agent 配额
+```http
+POST /api/v1/resources/agents/allocate
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "tenant_id": "uuid",
+  "allocations": {
+    "Weather Query Agent": 10,
+    "Data Analysis Agent": 15
+  }
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "allocated": true
+  }
+}
+```
+
+#### 4.10.2 获取 Agent 配额
+```http
+GET /api/v1/resources/agents/quota?tenant_id={tenantId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "quotas": [
+      {
+        "agent_type": "Weather Query Agent",
+        "allocated": 10,
+        "available": 90
+      }
+    ]
+  }
+}
+```
+
+#### 4.10.3 配置自定义 Agent 资源
+```http
+POST /api/v1/resources/custom-agents
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "tenant_id": "uuid",
+  "cpu_cores_per_agent": 2.0,
+  "memory_gb_per_agent": 4.0
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "cpu_cores_per_agent": 2.0,
+    "memory_gb_per_agent": 4.0
+  }
+}
+```
+
+#### 4.10.4 申请模型配额
+```http
+POST /api/v1/resources/models/apply
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "provider_name": "OpenAI",
+  "expected_models": "gpt-4, gpt-3.5-turbo",
+  "rpm": 10000,
+  "tpm": 500000,
+  "reason": "需要更多模型配额支持业务增长"
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "application_id": "uuid",
+    "status": "pending"
+  }
+}
+```
+
+#### 4.10.5 获取模型配额列表
+```http
+GET /api/v1/resources/models/quotas?tenant_id={tenantId}
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "quotas": [
+      {
+        "provider_name": "OpenAI",
+        "model_name": "gpt-4",
+        "rpm": 10000,
+        "tpm": 500000,
+        "status": "approved"
+      }
+    ]
+  }
+}
+```
+
+#### 4.10.6 分配模型配额（管理员）
+```http
+POST /api/v1/resources/models/allocate
+Authorization: Bearer {token}
+Content-Type: application/json
+
+Request Body:
+{
+  "tenant_id": "uuid",
+  "models": [
+    {
+      "model_name": "gpt-4",
+      "rpm": 10000,
+      "tpm": 500000
+    }
+  ]
+}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "allocated": true
+  }
+}
+```
+
+### 4.11 监控服务 (Monitoring Service)
+
+#### 4.11.1 获取仪表板概览
+```http
+GET /api/v1/monitoring/dashboard
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "active_agents": 247,
+    "global_api_calls": 102800,
+    "eu_consumption": 2487,
+    "model_providers": 8,
+    "eu_consumption_data": [
+      {
+        "time": "00:00",
+        "value": 420
+      }
+    ],
+    "model_distribution": [
+      {
+        "name": "GPT-4o",
+        "value": 42
+      }
+    ],
+    "api_calls_data": [
+      {
+        "time": "Mon",
+        "calls": 12400
+      }
+    ],
+    "system_components": [
+      {
+        "name": "MCP Server",
+        "status": "operational",
+        "latency": "12ms"
+      }
+    ]
+  }
+}
+```
+
+#### 4.11.2 获取系统组件状态
+```http
+GET /api/v1/monitoring/components
+Authorization: Bearer {token}
+
+Response 200:
+{
+  "success": true,
+  "data": {
+    "components": [
+      {
+        "name": "MCP Server",
+        "status": "operational",
+        "latency": "12ms",
+        "uptime": "99.9%"
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 5. 部署配置
+
+### 5.1 Kubernetes 部署清单示例
+
+#### 5.1.1 Data Ingestion Service Deployment
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: data-ingestion-service
+  namespace: taiji-platform
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: data-ingestion-service
+  template:
+    metadata:
+      labels:
+        app: data-ingestion-service
+    spec:
+      containers:
+      - name: data-ingestion
+        image: taiji/data-ingestion:latest
+        ports:
+        - containerPort: 8001
+        env:
+        - name: DATABASE_URL
+          valueFrom:
+            secretKeyRef:
+              name: db-secret
+              key: url
+        - name: RAPIDAPI_KEY
+          valueFrom:
+            secretKeyRef:
+              name: api-keys
+              key: rapidapi
+        resources:
+          requests:
+            cpu: 500m
+            memory: 1Gi
+          limits:
+            cpu: 2000m
+            memory: 4Gi
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: data-ingestion-service
+  namespace: taiji-platform
+spec:
+  selector:
+    app: data-ingestion-service
+  ports:
+  - port: 8001
+    targetPort: 8001
+  type: ClusterIP
+```
+
+#### 5.1.2 MCP Server Deployment
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: mcp-server
+  namespace: taiji-platform
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: mcp-server
+  template:
+    metadata:
+      labels:
+        app: mcp-server
+    spec:
+      containers:
+      - name: mcp-server
+        image: taiji/mcp-server:latest
+        ports:
+        - containerPort: 8000
+        - containerPort: 8080  # WebSocket
+        env:
+        - name: DATABASE_URL
+          valueFrom:
+            secretKeyRef:
+              name: db-secret
+              key: url
+        resources:
+          requests:
+            cpu: 1000m
+            memory: 2Gi
+          limits:
+            cpu: 4000m
+            memory: 8Gi
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: mcp-server
+  namespace: taiji-platform
+spec:
+  selector:
+    app: mcp-server
+  ports:
+  - port: 8000
+    targetPort: 8000
+  - port: 8080
+    targetPort: 8080
+    name: websocket
+  type: ClusterIP
+```
+
+### 5.2 Azure Container Apps 配置示例
+
+#### 5.2.1 Agent Management Service
+```yaml
+apiVersion: 2022-10-01
+kind: ContainerApp
+metadata:
+  name: agent-management-service
+spec:
+  environmentId: /subscriptions/{sub}/resourceGroups/{rg}/providers/Microsoft.App/environments/taiji-env
+  template:
+    containers:
+    - name: agent-management
+      image: taiji/agent-management:latest
+      resources:
+        cpu: 1.0
+        memory: 2Gi
+    scale:
+      minReplicas: 1
+      maxReplicas: 10
+      rules:
+      - name: http-rule
+        http:
+          metadata:
+            concurrentRequests: "100"
+  ingress:
+    external: true
+    targetPort: 8080
+    transport: http
+    allowInsecure: false
+```
+
+### 5.3 Azure API Management 配置
+
+#### 5.3.1 API 策略示例
+```xml
+<policies>
+  <inbound>
+    <base />
+    <cors allow-credentials="true">
+      <allowed-origins>
+        <origin>https://taiji.ai</origin>
+      </allowed-origins>
+      <allowed-methods>
+        <method>GET</method>
+        <method>POST</method>
+        <method>PUT</method>
+        <method>DELETE</method>
+      </allowed-methods>
+    </cors>
+    <validate-jwt header-name="Authorization" failed-validation-httpcode="401">
+      <openid-config url="https://login.microsoftonline.com/{tenant-id}/.well-known/openid-configuration" />
+      <required-claims>
+        <claim name="aud" match="any">
+          <value>{api-app-id}</value>
+        </claim>
+      </required-claims>
+    </validate-jwt>
+    <rate-limit calls="100" renewal-period="60" />
+  </inbound>
+  <backend>
+    <forward-request />
+  </backend>
+  <outbound>
+    <base />
+  </outbound>
+</policies>
+```
+
+---
+
+## 6. 安全与认证
+
+### 6.1 认证流程
+1. 用户通过 `/api/v1/auth/login` 登录
+2. 服务返回 JWT Token
+3. 后续请求在 Header 中携带 `Authorization: Bearer {token}`
+4. APIM 验证 Token 并转发请求到后端服务
+
+### 6.2 角色权限
+- **admin**: 超级管理员，所有权限
+- **channel**: 渠道合作伙伴，管理租户和资源
+- **tenant**: 租户用户，使用平台功能
+- **billing_admin**: 计费管理员，管理计费和财务
+- **operations_admin**: 运营管理员，管理租户和资源分配
+
+### 6.3 API 限流
+- 每个用户: 100 请求/分钟
+- 每个租户: 1000 请求/分钟
+- 每个渠道: 10000 请求/分钟
+
+---
+
+## 7. 监控与日志
+
+### 7.1 监控指标
+- API 响应时间
+- 错误率
+- 请求吞吐量
+- 资源使用率（CPU、内存）
+- EU 消费量
+- Agent 执行状态
+
+### 7.2 日志收集
+- 使用 Azure Monitor 收集日志
+- 结构化日志格式（JSON）
+- 日志级别: DEBUG, INFO, WARN, ERROR
+
+### 7.3 告警规则
+- API 错误率 > 5%
+- 响应时间 > 1 秒
+- CPU 使用率 > 80%
+- 内存使用率 > 80%
+- EU 余额 < 100
+
+---
+
+## 8. 计费规则
+
+### 8.1 EU (Execution Unit) 计算
+- **1 EU = 10 秒调用时长**
+- 模型推理: 0.025 EU/call
+- API 工具: 0.001 EU/call
+- VM 计算: 0.5 EU/hour
+- 数据存储: 0.01 EU/GB/day
+
+### 8.2 定价
+- 基础定价: $0.10/EU
+- 专业版折扣: 5%
+- 企业版折扣: 10%
+- 渠道合作伙伴可设置额外折扣
+
+---
+
+## 9. 开发规范
+
+### 9.1 代码规范
+- 使用 RESTful API 设计
+- 统一错误响应格式
+- 使用 OpenAPI 3.0 规范定义 API
+- 代码注释和文档
+
+### 9.2 测试要求
+- 单元测试覆盖率 > 80%
+- 集成测试覆盖主要流程
+- 性能测试（负载测试）
+
+### 9.3 版本管理
+- API 版本: `/api/v1/`, `/api/v2/`
+- 向后兼容至少 2 个版本
+- 使用语义化版本号
+
+---
+
+## 10. 附录
+
+### 10.1 环境变量配置
+```bash
+# 数据库
+DATABASE_URL=postgresql://user:pass@host:5432/taiji
+
+# Redis
+REDIS_URL=redis://host:6379
+
+# JWT
+JWT_SECRET=your-secret-key
+JWT_EXPIRES_IN=24h
+
+# Azure
+AZURE_STORAGE_CONNECTION_STRING=...
+AZURE_KEY_VAULT_URL=...
+
+# 服务端点
+DATA_INGESTION_URL=http://data-ingestion-service:8001
+MCP_SERVER_URL=http://mcp-server:8000
+API_GATEWAY_URL=http://api-gateway:80
+```
+
+### 10.2 依赖服务
+- PostgreSQL 数据库
+- Redis 缓存
+- Azure Blob Storage
+- Azure Key Vault
+- Azure Monitor
+
+### 10.3 技术栈建议
+- **语言**: Python (FastAPI) / Go / Node.js
+- **数据库**: PostgreSQL
+- **缓存**: Redis
+- **消息队列**: Azure Service Bus
+- **容器**: Docker
+- **编排**: Kubernetes (AKS)
+
+---
+
+**文档版本**: v1.0  
+**最后更新**: 2025-01-22  
+**维护者**: Taiji AI Platform Team
+
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
new file mode 100644
index 0000000..8932bc5
--- /dev/null
+++ b/hooks/use-toast.ts
@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/hooks/useLanguage.ts b/hooks/useLanguage.ts
new file mode 100644
index 0000000..367361b
--- /dev/null
+++ b/hooks/useLanguage.ts
@@ -0,0 +1 @@
+export { useLanguage } from "@/contexts/language-context"
diff --git a/lib/api-client.ts b/lib/api-client.ts
new file mode 100644
index 0000000..1646e5a
--- /dev/null
+++ b/lib/api-client.ts
@@ -0,0 +1,1102 @@
+// API client for Taiji AI Platform
+// Base URLs for different services
+const API_BASE_URLS = {
+  dataIngestion: process.env.NEXT_PUBLIC_DATA_INGESTION_URL || "http://localhost:8001",
+  mcpServer: process.env.NEXT_PUBLIC_MCP_SERVER_URL || "http://localhost:8002", // MCP Server 映射到主机端口 8002
+  gateway: process.env.NEXT_PUBLIC_API_GATEWAY_URL || "http://localhost:80",
+}
+
+// Helper function to get auth token
+function getAuthToken(): string | null {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("auth_token")
+  }
+  return null
+}
+
+// Helper function to get API key
+function getApiKey(): string | null {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("api_key")
+  }
+  return null
+}
+
+// Helper function to build headers
+function buildHeaders(contentType = "application/json"): HeadersInit {
+  const headers: HeadersInit = {
+    Accept: "application/json",
+  }
+
+  if (contentType) {
+    headers["Content-Type"] = contentType
+  }
+
+  const token = getAuthToken()
+  const apiKey = getApiKey()
+
+  if (token) {
+    headers.Authorization = `Bearer ${token}`
+  } else if (apiKey) {
+    headers["X-API-Key"] = apiKey
+  }
+
+  return headers
+}
+
+// API Response types
+export interface APIResponse<T = any> {
+  success: boolean
+  data?: T
+  message?: string
+  error?: {
+    code?: string
+    message?: string
+  }
+}
+
+// Helper function to handle API responses
+async function handleResponse<T = any>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: response.statusText }))
+    throw new Error((error as any).detail || `HTTP error! status: ${response.status}`)
+  }
+  return response.json() as Promise<T>
+}
+
+// Helper function to check if backend is reachable
+async function checkBackendReachable(url: string): Promise<boolean> {
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 5000) // 5 second timeout
+    const response = await fetch(url, {
+      method: "HEAD",
+      signal: controller.signal,
+    })
+    clearTimeout(timeoutId)
+    return response.ok || response.status < 500
+  } catch {
+    return false
+  }
+}
+
+export class TaijiAPIClient {
+  // ==================== 认证模块 API ====================
+  // Base URL: http://localhost:8002/api/auth
+
+  /**
+   * 用户登录
+   */
+  static async login(
+    email: string,
+    password: string,
+    role: "user" | "channel" | "admin" | "provider" = "user",
+  ): Promise<APIResponse<{ token: string; refreshToken?: string; user?: any }>> {
+    try {
+      // 检查后端服务是否可达
+      const isReachable = await checkBackendReachable(API_BASE_URLS.mcpServer)
+      if (!isReachable) {
+        throw new Error(
+          `无法连接到后端服务 (${API_BASE_URLS.mcpServer})。请确保 MCP Server 正在运行。`,
+        )
+      }
+
+      const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, role }),
+        signal: AbortSignal.timeout(10000), // 10 second timeout
+      })
+      const data = await handleResponse<APIResponse<{ token: string; refreshToken?: string; user?: any }>>(response)
+      if (data.success && data.data?.token && typeof window !== "undefined") {
+        localStorage.setItem("auth_token", data.data.token)
+        if (data.data.refreshToken) {
+          localStorage.setItem("refresh_token", data.data.refreshToken)
+        }
+        if (data.data.user) {
+          localStorage.setItem("user", JSON.stringify(data.data.user))
+        }
+      }
+      return data
+    } catch (error: any) {
+      // 处理网络错误
+      if (error.name === "AbortError" || error.message?.includes("timeout")) {
+        throw new Error("请求超时，请检查网络连接或后端服务状态")
+      }
+      if (error.message?.includes("Failed to fetch") || error.name === "TypeError") {
+        throw new Error(
+          `无法连接到后端服务 (${API_BASE_URLS.mcpServer})。请确保 MCP Server 正在运行。`,
+        )
+      }
+      throw error
+    }
+  }
+
+  /**
+   * 用户登出
+   */
+  static async logout() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/logout`, {
+      method: "POST",
+      headers: buildHeaders(),
+    })
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("auth_token")
+      localStorage.removeItem("refresh_token")
+      localStorage.removeItem("user")
+      localStorage.removeItem("api_key")
+    }
+    return handleResponse(response)
+  }
+
+  /**
+   * 刷新Token
+   */
+  static async refreshToken(): Promise<APIResponse<{ token: string; refreshToken?: string }>> {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/refresh`, {
+      method: "POST",
+      headers: buildHeaders(),
+    })
+    const data = await handleResponse<APIResponse<{ token: string; refreshToken?: string }>>(response)
+    if (data.success && data.data?.token && typeof window !== "undefined") {
+      localStorage.setItem("auth_token", data.data.token)
+      if (data.data.refreshToken) {
+        localStorage.setItem("refresh_token", data.data.refreshToken)
+      }
+    }
+    return data
+  }
+
+  /**
+   * 修改密码
+   */
+  static async changePassword(oldPassword: string, newPassword: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/password`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify({ old_password: oldPassword, new_password: newPassword }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取API密钥信息
+   */
+  static async getApiKeyInfo() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/keys/info`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 重新生成API密钥
+   */
+  static async regenerateApiKey(): Promise<APIResponse<{ apiKey: string; message?: string }>> {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/auth/keys/regenerate`, {
+      method: "POST",
+      headers: buildHeaders(),
+    })
+    const data = await handleResponse<APIResponse<{ apiKey: string; message?: string }>>(response)
+    if (data.success && data.data?.apiKey && typeof window !== "undefined") {
+      localStorage.setItem("api_key", data.data.apiKey)
+    }
+    return data
+  }
+
+  // ==================== 用户侧平台 API ====================
+  // Base URL: http://localhost:8002/api/user
+
+  /**
+   * 获取仪表板统计
+   */
+  static async getUserDashboardStats() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/dashboard/stats`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取Agent活动数据
+   */
+  static async getUserAgentActivity(period: "7d" | "30d" | "90d" = "7d") {
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/user/agents/activity?period=${period}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  /**
+   * 选择网关类型
+   */
+  static async selectGateway(gatewayType: "MCP" | "A2A" | "API") {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/gateway/select`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({ gatewayType }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建网关API
+   */
+  static async createGatewayAPI(name: string, method: "json" | "url", content: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/gateway/api/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({ name, method, content }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取网关API列表
+   */
+  static async getGatewayAPIs() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/gateway/apis`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取网关监控数据
+   */
+  static async getGatewayMonitoring() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/gateway/monitoring`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 生成工具
+   */
+  static async generateTool(data: {
+    name: string
+    description: string
+    frameworkTemplate: string
+    gateway: string
+    agentCount: number
+    cpu: number
+    memory: number
+    maxScale: number
+    model: string
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/tools/generate`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建数据模板
+   */
+  static async createDataTemplate(data: {
+    name: string
+    type: "json_api" | "cloud_storage"
+    config: any
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/data-templates/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取平台Agent列表
+   */
+  static async getPlatformAgents() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/agents/platform`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 部署Agent
+   */
+  static async deployAgent(data: {
+    agentId: string
+    instances: number
+    model: string
+    gateway: "MCP" | "A2A" | "API"
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/agents/deploy`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建工作流
+   */
+  static async createWorkflow(data: {
+    name: string
+    description?: string
+    gateway: "MCP" | "A2A" | "API"
+    nodes: Array<{
+      agentId: string
+      agentType: "platform" | "custom"
+      agentName: string
+      order: number
+    }>
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/workflows/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取余额信息
+   */
+  static async getBillingBalance() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/billing/balance`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 充值余额
+   */
+  static async rechargeBalance(amount: number, paymentMethod: "alipay" | "wechat" | "card" = "alipay") {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/user/billing/recharge`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({ amount, paymentMethod }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取计费历史
+   */
+  static async getBillingHistory(params: {
+    startTime: string
+    endTime: string
+    customerName?: string
+    minCalls?: number
+    maxCalls?: number
+    export?: "excel" | "csv" | "pdf"
+    page?: number
+    pageSize?: number
+  }) {
+    const queryParams = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined) {
+        queryParams.append(key, value.toString())
+      }
+    })
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/user/billing/history?${queryParams}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  // ==================== 渠道合作伙伴 API ====================
+  // Base URL: http://localhost:8002/api/channel
+
+  /**
+   * 获取租户列表
+   */
+  static async getChannelTenants() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建租户
+   */
+  static async createChannelTenant(data: {
+    name: string
+    email: string
+    password: string
+    subscriptionTier: "free" | "pro" | "enterprise"
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 分配租户资源
+   */
+  static async allocateTenantResources(
+    tenantId: string,
+    data: {
+      agents?: Array<{ agentId: string; quantity: number }>
+      models?: Array<{ modelName: string; rpm: number; tpm: number }>
+      customAgentResources?: { cpu: number; memory: number }
+    },
+  ) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants/${tenantId}/resources`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 更新租户计费设置
+   */
+  static async updateTenantBilling(tenantId: string, data: { subscriptionTier?: string; discount?: number }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants/${tenantId}/billing`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 为租户充值
+   */
+  static async rechargeTenant(tenantId: string, amount: number) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants/${tenantId}/recharge`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({ amount }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 设置租户授信额度
+   */
+  static async setTenantCreditLimit(tenantId: string, creditLimit: number) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/tenants/${tenantId}/credit`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify({ creditLimit }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 申请资源
+   */
+  static async applyForResources(data: {
+    type: "model" | "agent"
+    modelName?: string
+    rpm?: number
+    tpm?: number
+    agentType?: string
+    quantity?: number
+    reason: string
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/channel/resources/apply`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取渠道计费统计
+   */
+  static async getChannelBillingStats(params: {
+    startTime: string
+    endTime: string
+    tenantName?: string
+    minCalls?: number
+    maxCalls?: number
+    export?: "excel" | "csv" | "pdf"
+  }) {
+    const queryParams = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined) {
+        queryParams.append(key, value.toString())
+      }
+    })
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/channel/billing/stats?${queryParams}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  // ==================== 超级管理员 API ====================
+  // Base URL: http://localhost:8002/api/admin
+
+  /**
+   * 获取平台统计
+   */
+  static async getAdminDashboardStats() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/dashboard/stats`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取渠道列表
+   */
+  static async getAdminChannels() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/channels`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建渠道
+   */
+  static async createAdminChannel(data: {
+    name: string
+    email: string
+    password: string
+    commissionRate: number
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/channels/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 统一管理渠道资源
+   */
+  static async manageChannelResources(
+    channelId: string,
+    data: {
+      models?: string[]
+      agents?: Array<{ agentId: string; quantity: number }>
+      customAgentResources?: { cpu: number; memory: number }
+      channelCredit?: number
+    },
+  ) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/channels/${channelId}/resources`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取所有申请
+   */
+  static async getAdminApplications() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/channels/applications`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 审批申请
+   */
+  static async reviewApplication(applicationId: string, approved: boolean, reason?: string) {
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/admin/channels/applications/${applicationId}/review`,
+      {
+        method: "PUT",
+        headers: buildHeaders(),
+        body: JSON.stringify({ approved, reason }),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取所有模型供应商
+   */
+  static async getAdminModelProviders() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/resources/models`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取所有Agent资源
+   */
+  static async getAdminAgentResources() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/resources/agents`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 监控Agent健康状态
+   */
+  static async getAdminAgentMonitoring() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/admin/monitoring/agents`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取三维度计费统计
+   */
+  static async getAdminBillingOverview(params: {
+    startTime: string
+    endTime: string
+    channelName?: string
+    tenantName?: string
+    minCalls?: number
+    maxCalls?: number
+    export?: "excel" | "csv" | "pdf"
+  }) {
+    const queryParams = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined) {
+        queryParams.append(key, value.toString())
+      }
+    })
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/admin/billing/overview?${queryParams}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  // ==================== 供应商管理 API ====================
+  // Base URL: http://localhost:8002/api/providers
+
+  /**
+   * 获取模型供应商列表
+   */
+  static async getModelProviders() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 创建模型供应商
+   */
+  static async createModelProvider(data: {
+    name: string
+    provider: "openai" | "anthropic" | "azure" | "google" | "aws"
+    apiUrl: string
+    apiKey: string
+    supportedModels: string[]
+    rpm: number
+    tpm: number
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models/create`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取供应商详情
+   */
+  static async getProviderDetails(providerId: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models/${providerId}`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 更新供应商配置
+   */
+  static async updateProvider(providerId: string, data: {
+    name?: string
+    provider?: string
+    apiUrl?: string
+    apiKey?: string
+    supportedModels?: string[]
+    rpm?: number
+    tpm?: number
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models/${providerId}`, {
+      method: "PUT",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 删除供应商
+   */
+  static async deleteProvider(providerId: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models/${providerId}`, {
+      method: "DELETE",
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 测试供应商连接
+   */
+  static async testProviderConnection(providerId: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/providers/models/${providerId}/test`, {
+      method: "POST",
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  // ==================== Data Ingestion 服务 API ====================
+  // Base URL: http://localhost:8001
+
+  /**
+   * 健康检查
+   */
+  static async getHealth() {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/health`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 同步 RapidAPI
+   */
+  static async syncRapidAPI(category?: string, limit = 100) {
+    const params = new URLSearchParams()
+    if (category) params.append("category", category)
+    params.append("limit", limit.toString())
+
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/rapidapi/sync?${params}`, {
+      method: "POST",
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 测试 RapidAPI 端点
+   */
+  static async testRapidAPI(data: {
+    endpoint: string
+    method: string
+    params?: any
+    headers?: any
+  }) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/rapidapi/test`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 解析 OpenAPI 规范
+   */
+  static async parseOpenAPI(url: string) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/openapi/parse?url=${encodeURIComponent(url)}`, {
+      method: "POST",
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * APILLAMA 处理 API 文档
+   */
+  static async processAPILLAMA(
+    apiDoc: any,
+    context?: any,
+    outputFormat: "pydantic" | "json_schema" | "openapi" = "json_schema",
+    options?: {
+      include_examples?: boolean
+      enhance_descriptions?: boolean
+      validate_schema?: boolean
+    },
+  ) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/apillama/process`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify({
+        api_doc: apiDoc,
+        context,
+        output_format: outputFormat,
+        ...options,
+      }),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 从 API 端点生成工具定义 (Data Ingestion 服务)
+   */
+  static async generateToolFromEndpoint(data: {
+    url: string
+    method: string
+    name: string
+    description: string
+    parameters?: Array<{
+      name: string
+      type: string
+      location?: "query" | "path" | "header" | "body"
+      description?: string
+      required?: boolean
+    }>
+    request_body?: any
+    responses?: any
+    security?: any[]
+    tags?: string[]
+    deprecated?: boolean
+  }) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/tools/generate`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取工具列表
+   */
+  static async getTools(category?: string, limit = 100, offset = 0) {
+    const params = new URLSearchParams({ limit: limit.toString(), offset: offset.toString() })
+    if (category) params.append("category", category)
+
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/tools?${params}`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取特定工具定义
+   */
+  static async getTool(toolName: string) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/tools/${toolName}`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 删除工具
+   */
+  static async deleteTool(toolName: string) {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/tools/${toolName}`, {
+      method: "DELETE",
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取统计信息
+   */
+  static async getStats() {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/stats`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 清除缓存
+   */
+  static async clearCache() {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/cache/clear`, {
+      method: "POST",
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取 Prometheus Metrics
+   */
+  static async getMetrics() {
+    const response = await fetch(`${API_BASE_URLS.dataIngestion}/metrics`)
+    return response.text()
+  }
+
+  // ==================== MCP Server 服务 API ====================
+  // Base URL: http://localhost:8000
+
+  /**
+   * MCP Server 健康检查
+   */
+  static async getMCPHealth() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/health`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 注册 Agent
+   */
+  static async registerAgent(data: {
+    name: string
+    description: string
+    role?: string
+    goal?: string
+    tools?: string[]
+    config?: any
+    capabilities?: string[]
+  }) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/agents`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(data),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取 Agent 列表
+   */
+  static async getAgents(skip = 0, limit = 100) {
+    const params = new URLSearchParams({ skip: skip.toString(), limit: limit.toString() })
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/agents?${params}`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取特定 Agent
+   */
+  static async getAgent(agentId: string) {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/agents/${agentId}`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 执行 Agent 工具
+   */
+  static async executeAgentTool(agentId: string, data: {
+    jsonrpc?: string
+    id?: string
+    method: string
+    params: {
+      tool: { name: string; function_name?: string }
+      arguments: any
+      context?: any
+    }
+  }) {
+    // 构建请求体，如果data中已有jsonrpc和id则使用，否则使用默认值
+    const requestBody = {
+      jsonrpc: data.jsonrpc || "2.0",
+      id: data.id || `req-${Date.now()}`,
+      method: data.method,
+      params: data.params,
+    }
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/agents/${agentId}/execute`, {
+      method: "POST",
+      headers: buildHeaders(),
+      body: JSON.stringify(requestBody),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取工具列表 (MCP Server)
+   */
+  static async getMCPTools() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/tools`)
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取 MCP Prometheus Metrics
+   */
+  static async getMCPMetrics() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/metrics`)
+    return response.text()
+  }
+
+  /**
+   * 获取系统性能指标
+   */
+  static async getMonitoringMetrics() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/v1/monitoring/metrics`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取服务统计信息
+   */
+  static async getMonitoringStats(service: "all" | "agents" | "executions" | "tools" | "users" = "all") {
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/v1/monitoring/stats?service=${service}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取性能趋势数据
+   */
+  static async getMonitoringTrends(params: {
+    metric?: "executions" | "eu_consumption"
+    period?: "24h" | "7d" | "30d"
+    interval?: "1h" | "6h" | "1d"
+  }) {
+    const queryParams = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+      if (value) {
+        queryParams.append(key, value)
+      }
+    })
+    const response = await fetch(
+      `${API_BASE_URLS.mcpServer}/api/v1/monitoring/trends?${queryParams}`,
+      {
+        headers: buildHeaders(),
+      },
+    )
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取系统告警
+   */
+  static async getMonitoringAlerts(severity?: "info" | "warning" | "critical") {
+    const params = severity ? `?severity=${severity}` : ""
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/v1/monitoring/alerts${params}`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  /**
+   * 获取监控仪表盘聚合
+   */
+  static async getMonitoringDashboard() {
+    const response = await fetch(`${API_BASE_URLS.mcpServer}/api/v1/monitoring/dashboard`, {
+      headers: buildHeaders(),
+    })
+    return handleResponse(response)
+  }
+
+  // ==================== WebSocket API ====================
+
+  /**
+   * 创建 Agent WebSocket 连接
+   */
+  static createAgentWebSocket(agentIdOrName: string) {
+    const wsUrl = API_BASE_URLS.mcpServer.replace("http", "ws")
+    return new WebSocket(`${wsUrl}/ws/${agentIdOrName}`)
+  }
+}
diff --git a/lib/auth.ts b/lib/auth.ts
new file mode 100644
index 0000000..5cb92c9
--- /dev/null
+++ b/lib/auth.ts
@@ -0,0 +1,41 @@
+// Authentication utilities
+
+export function getAuthToken(): string | null {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("auth_token")
+  }
+  return null
+}
+
+export function getUser(): any | null {
+  if (typeof window !== "undefined") {
+    const userStr = localStorage.getItem("user")
+    if (userStr) {
+      try {
+        return JSON.parse(userStr)
+      } catch {
+        return null
+      }
+    }
+  }
+  return null
+}
+
+export function isAuthenticated(): boolean {
+  return getAuthToken() !== null
+}
+
+export function clearAuth(): void {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem("auth_token")
+    localStorage.removeItem("refresh_token")
+    localStorage.removeItem("user")
+    localStorage.removeItem("api_key")
+  }
+}
+
+export function getRole(): string | null {
+  const user = getUser()
+  return user?.role || null
+}
+
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..fed2fe9
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..4cd9948
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..60cce49
--- /dev/null
+++ b/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "my-v0-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "eslint .",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "@vercel/analytics": "1.3.1",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next": "16.0.10",
+    "next-themes": "^0.4.6",
+    "react": "19.2.0",
+    "react-day-picker": "9.8.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.60.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.9",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8.5",
+    "tailwindcss": "^4.1.9",
+    "tw-animate-css": "1.3.3",
+    "typescript": "^5"
+  }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..6e755e2
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,3180 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@hookform/resolvers':
+        specifier: ^3.10.0
+        version: 3.10.0(react-hook-form@7.69.0(react@19.2.0))
+      '@radix-ui/react-accordion':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-alert-dialog':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-aspect-ratio':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-avatar':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-checkbox':
+        specifier: 1.1.3
+        version: 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-collapsible':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-context-menu':
+        specifier: 2.2.4
+        version: 2.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-dialog':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.1.4
+        version: 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-hover-card':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-label':
+        specifier: 2.1.1
+        version: 2.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-menubar':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-navigation-menu':
+        specifier: 1.2.3
+        version: 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-popover':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-progress':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-radio-group':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-scroll-area':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-select':
+        specifier: 2.1.4
+        version: 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-separator':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slider':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-switch':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-tabs':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toast':
+        specifier: 1.2.4
+        version: 1.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle-group':
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-tooltip':
+        specifier: 1.1.6
+        version: 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@vercel/analytics':
+        specifier: 1.3.1
+        version: 1.3.1(next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.23(postcss@8.5.6)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      date-fns:
+        specifier: 4.1.0
+        version: 4.1.0
+      embla-carousel-react:
+        specifier: 8.5.1
+        version: 8.5.1(react@19.2.0)
+      input-otp:
+        specifier: 1.4.1
+        version: 1.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      lucide-react:
+        specifier: ^0.454.0
+        version: 0.454.0(react@19.2.0)
+      next:
+        specifier: 16.0.10
+        version: 16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react:
+        specifier: 19.2.0
+        version: 19.2.0
+      react-day-picker:
+        specifier: 9.8.0
+        version: 9.8.0(react@19.2.0)
+      react-dom:
+        specifier: 19.2.0
+        version: 19.2.0(react@19.2.0)
+      react-hook-form:
+        specifier: ^7.60.0
+        version: 7.69.0(react@19.2.0)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      recharts:
+        specifier: 2.15.4
+        version: 2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      sonner:
+        specifier: ^1.7.4
+        version: 1.7.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.4.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.18)
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      zod:
+        specifier: 3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.1.9
+        version: 4.1.18
+      '@types/node':
+        specifier: ^22
+        version: 22.19.3
+      '@types/react':
+        specifier: ^19
+        version: 19.2.7
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.3(@types/react@19.2.7)
+      postcss:
+        specifier: ^8.5
+        version: 8.5.6
+      tailwindcss:
+        specifier: ^4.1.9
+        version: 4.1.18
+      tw-animate-css:
+        specifier: 1.3.3
+        version: 1.3.3
+      typescript:
+        specifier: ^5
+        version: 5.9.3
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@date-fns/tz@1.2.0':
+    resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
+
+  '@emnapi/runtime@1.7.1':
+    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
+  '@img/colour@1.0.0':
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@next/env@16.0.10':
+    resolution: {integrity: sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==}
+
+  '@next/swc-darwin-arm64@16.0.10':
+    resolution: {integrity: sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@16.0.10':
+    resolution: {integrity: sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@16.0.10':
+    resolution: {integrity: sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@16.0.10':
+    resolution: {integrity: sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@16.0.10':
+    resolution: {integrity: sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@16.0.10':
+    resolution: {integrity: sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@16.0.10':
+    resolution: {integrity: sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@16.0.10':
+    resolution: {integrity: sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/react-accordion@1.2.2':
+    resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.4':
+    resolution: {integrity: sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.1':
+    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.1':
+    resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.2':
+    resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.1.3':
+    resolution: {integrity: sha512-HD7/ocp8f1B3e6OHygH0n7ZKjONkhciy1Nh0yuBgObqThc3oyx+vuMfFHKAknXRHHWVE9XvXStxJFyjUmB8PIw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.2.4':
+    resolution: {integrity: sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.4':
+    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.3':
+    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.4':
+    resolution: {integrity: sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.1':
+    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.4':
+    resolution: {integrity: sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.1':
+    resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.4':
+    resolution: {integrity: sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.4':
+    resolution: {integrity: sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.3':
+    resolution: {integrity: sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.4':
+    resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.1':
+    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.3':
+    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.1':
+    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.1.4':
+    resolution: {integrity: sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.1':
+    resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.2.2':
+    resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.2':
+    resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.4':
+    resolution: {integrity: sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.1':
+    resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.1':
+    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.1.6':
+    resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.1.1':
+    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/node@4.1.18':
+    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.18':
+    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.18':
+    resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/node@22.19.3':
+    resolution: {integrity: sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.7':
+    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
+
+  '@vercel/analytics@1.3.1':
+    resolution: {integrity: sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==}
+    peerDependencies:
+      next: '>= 13'
+      react: ^18 || ^19
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  autoprefixer@10.4.23:
+    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  baseline-browser-mapping@2.9.11:
+    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+    hasBin: true
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  caniuse-lite@1.0.30001761:
+    resolution: {integrity: sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
+  electron-to-chromium@1.5.267:
+    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+
+  embla-carousel-react@8.5.1:
+    resolution: {integrity: sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.1:
+    resolution: {integrity: sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==}
+    peerDependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1:
+    resolution: {integrity: sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==}
+
+  enhanced-resolve@5.18.4:
+    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
+    engines: {node: '>=10.13.0'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  fast-equals@5.4.0:
+    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
+    engines: {node: '>=6.0.0'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  input-otp@1.4.1:
+    resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lucide-react@0.454.0:
+    resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@16.0.10:
+    resolution: {integrity: sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==}
+    engines: {node: '>=20.9.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  react-day-picker@9.8.0:
+    resolution: {integrity: sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-dom@19.2.0:
+    resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
+    peerDependencies:
+      react: ^19.2.0
+
+  react-hook-form@7.69.0:
+    resolution: {integrity: sha512-yt6ZGME9f4F6WHwevrvpAjh42HMvocuSnSIHUGycBqXIJdhqGSPQzTpGF+1NLREk/58IdPxEMfPcFCjlMhclGw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-resizable-panels@2.1.9:
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
+  react@19.2.0:
+    resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
+    engines: {node: '>=0.10.0'}
+
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.4:
+    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@4.1.18:
+    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tw-animate-css@1.3.3:
+    resolution: {integrity: sha512-tXE2TRWrskc4TU3RDd7T8n8Np/wCfoeH9gz22c7PzYqNPQ9FBGFbWWzwL0JyHcFp+jHozmF76tbHfPAx22ua2Q==}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/runtime@7.28.4': {}
+
+  '@date-fns/tz@1.2.0': {}
+
+  '@emnapi/runtime@1.7.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.69.0(react@19.2.0))':
+    dependencies:
+      react-hook-form: 7.69.0(react@19.2.0)
+
+  '@img/colour@1.0.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.7.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@next/env@16.0.10': {}
+
+  '@next/swc-darwin-arm64@16.0.10':
+    optional: true
+
+  '@next/swc-darwin-x64@16.0.10':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@16.0.10':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@16.0.10':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@16.0.10':
+    optional: true
+
+  '@next/swc-linux-x64-musl@16.0.10':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@16.0.10':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@16.0.10':
+    optional: true
+
+  '@radix-ui/number@1.1.0': {}
+
+  '@radix-ui/primitive@1.1.1': {}
+
+  '@radix-ui/react-accordion@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-alert-dialog@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-arrow@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-aspect-ratio@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-avatar@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-checkbox@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-collection@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-context-menu@2.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-context@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-dialog@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-direction@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-dropdown-menu@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-hover-card@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-id@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-label@2.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-menu@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-menubar@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-navigation-menu@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-popover@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-popper@1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/rect': 1.1.0
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-portal@1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-presence@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-select@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-separator@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-slider@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-slot@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-tabs@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toast@1.2.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toggle-group@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toggle@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-tooltip@1.1.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-previous@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-rect@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@19.2.7)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.2.7)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/rect@1.1.0': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.1.18':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.4
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.18
+
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.18':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-x64': 4.1.18
+      '@tailwindcss/oxide-freebsd-x64': 4.1.18
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+
+  '@tailwindcss/postcss@4.1.18':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      postcss: 8.5.6
+      tailwindcss: 4.1.18
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/node@22.19.3':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/react-dom@19.2.3(@types/react@19.2.7)':
+    dependencies:
+      '@types/react': 19.2.7
+
+  '@types/react@19.2.7':
+    dependencies:
+      csstype: 3.2.3
+
+  '@vercel/analytics@1.3.1(next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      server-only: 0.0.1
+    optionalDependencies:
+      next: 16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  autoprefixer@10.4.23(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001761
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  baseline-browser-mapping@2.9.11: {}
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.11
+      caniuse-lite: 1.0.30001761
+      electron-to-chromium: 1.5.267
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  caniuse-lite@1.0.30001761: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  cmdk@1.0.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
+  decimal.js-light@2.5.1: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      csstype: 3.2.3
+
+  electron-to-chromium@1.5.267: {}
+
+  embla-carousel-react@8.5.1(react@19.2.0):
+    dependencies:
+      embla-carousel: 8.5.1
+      embla-carousel-reactive-utils: 8.5.1(embla-carousel@8.5.1)
+      react: 19.2.0
+
+  embla-carousel-reactive-utils@8.5.1(embla-carousel@8.5.1):
+    dependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1: {}
+
+  enhanced-resolve@5.18.4:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  escalade@3.2.0: {}
+
+  eventemitter3@4.0.7: {}
+
+  fast-equals@5.4.0: {}
+
+  fraction.js@5.3.4: {}
+
+  get-nonce@1.0.1: {}
+
+  graceful-fs@4.2.11: {}
+
+  input-otp@1.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  internmap@2.0.3: {}
+
+  jiti@2.6.1: {}
+
+  js-tokens@4.0.0: {}
+
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lucide-react@0.454.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  nanoid@3.3.11: {}
+
+  next-themes@0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@next/env': 16.0.10
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001761
+      postcss: 8.4.31
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      styled-jsx: 5.1.6(react@19.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 16.0.10
+      '@next/swc-darwin-x64': 16.0.10
+      '@next/swc-linux-arm64-gnu': 16.0.10
+      '@next/swc-linux-arm64-musl': 16.0.10
+      '@next/swc-linux-x64-gnu': 16.0.10
+      '@next/swc-linux-x64-musl': 16.0.10
+      '@next/swc-win32-arm64-msvc': 16.0.10
+      '@next/swc-win32-x64-msvc': 16.0.10
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.27: {}
+
+  object-assign@4.1.1: {}
+
+  picocolors@1.1.1: {}
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  react-day-picker@9.8.0(react@19.2.0):
+    dependencies:
+      '@date-fns/tz': 1.2.0
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.0
+
+  react-dom@19.2.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      scheduler: 0.27.0
+
+  react-hook-form@7.69.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.0)
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.0)
+      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  react-resizable-panels@2.1.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  react-smooth@4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      fast-equals: 5.4.0
+      prop-types: 15.8.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-transition-group: 4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+
+  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  react-transition-group@4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  react@19.2.0: {}
+
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  scheduler@0.27.0: {}
+
+  semver@7.7.3:
+    optional: true
+
+  server-only@0.0.1: {}
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.0.0
+      detect-libc: 2.1.2
+      semver: 7.7.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+    optional: true
+
+  sonner@1.7.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  source-map-js@1.2.1: {}
+
+  styled-jsx@5.1.6(react@19.2.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.2.0
+
+  tailwind-merge@3.4.0: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
+
+  tailwindcss@4.1.18: {}
+
+  tapable@2.3.0: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.3.3: {}
+
+  typescript@5.9.3: {}
+
+  undici-types@6.21.0: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  use-sync-external-store@1.6.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  zod@3.25.76: {}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..a869506
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config
diff --git a/public/apple-icon.png b/public/apple-icon.png
new file mode 100644
index 0000000..f9418b4
Binary files /dev/null and b/public/apple-icon.png differ
diff --git a/public/icon-dark-32x32.png b/public/icon-dark-32x32.png
new file mode 100644
index 0000000..12c825a
Binary files /dev/null and b/public/icon-dark-32x32.png differ
diff --git a/public/icon-light-32x32.png b/public/icon-light-32x32.png
new file mode 100644
index 0000000..a3462cc
Binary files /dev/null and b/public/icon-light-32x32.png differ
diff --git a/public/icon.svg b/public/icon.svg
new file mode 100644
index 0000000..5c11e6c
--- /dev/null
+++ b/public/icon.svg
@@ -0,0 +1,26 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @media (prefers-color-scheme: light) {
+      .background { fill: black; }
+      .foreground { fill: white; }
+    }
+    @media (prefers-color-scheme: dark) {
+      .background { fill: white; }
+      .foreground { fill: black; }
+    }
+  </style>
+  <g clip-path="url(#clip0_7960_43945)">
+    <rect class="background" width="180" height="180" rx="37" />
+    <g style="transform: scale(95%); transform-origin: center">
+      <path class="foreground"
+        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
+      <path class="foreground"
+        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_7960_43945">
+      <rect width="180" height="180" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/public/placeholder-logo.png b/public/placeholder-logo.png
new file mode 100644
index 0000000..8a792ac
Binary files /dev/null and b/public/placeholder-logo.png differ
diff --git a/public/placeholder-logo.svg b/public/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/placeholder-user.jpg b/public/placeholder-user.jpg
new file mode 100644
index 0000000..6fa7543
Binary files /dev/null and b/public/placeholder-user.jpg differ
diff --git a/public/placeholder.jpg b/public/placeholder.jpg
new file mode 100644
index 0000000..6bfe963
Binary files /dev/null and b/public/placeholder.jpg differ
diff --git a/public/placeholder.svg b/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..dc2aea1
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: 'Geist', 'Geist Fallback';
+  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..48d6d82
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "target": "ES6",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}