修复了登录页面还存在顶部导航栏的问题

2025-10-21 09:49:59 +08:00
parent 5c783c73e1
commit 4a5d278d89
121 changed files with 5626 additions and 286 deletions
--- a/crop-x/package-lock.json
+++ b/crop-x/package-lock.json
--- a/crop-x/package.json
+++ b/crop-x/package.json
@@ -18,37 +18,38 @@
        "scripts:disable": "node scripts/setup-dev-tools.js --disable"
    },
    "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
        "@radix-ui/react-accordion": "^1.2.12",
-        "@radix-ui/react-alert-dialog": "^1.1.6",
-        "@radix-ui/react-aspect-ratio": "^1.1.2",
-        "@radix-ui/react-avatar": "^1.1.3",
-        "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-aspect-ratio": "^1.1.7",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.3",
        "@radix-ui/react-collapsible": "^1.1.12",
-        "@radix-ui/react-context-menu": "^2.2.6",
+        "@radix-ui/react-context-menu": "^2.2.16",
        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-hover-card": "^1.1.6",
+        "@radix-ui/react-hover-card": "^1.1.15",
        "@radix-ui/react-label": "^2.1.7",
-        "@radix-ui/react-menubar": "^1.1.6",
+        "@radix-ui/react-menubar": "^1.1.16",
        "@radix-ui/react-navigation-menu": "^1.2.14",
-        "@radix-ui/react-popover": "^1.1.6",
-        "@radix-ui/react-progress": "^1.1.2",
-        "@radix-ui/react-radio-group": "^1.2.3",
-        "@radix-ui/react-scroll-area": "^1.2.3",
-        "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
        "@radix-ui/react-separator": "^1.1.7",
-        "@radix-ui/react-slider": "^1.2.3",
+        "@radix-ui/react-slider": "^1.3.6",
        "@radix-ui/react-slot": "^1.2.3",
-        "@radix-ui/react-switch": "^1.1.3",
-        "@radix-ui/react-tabs": "^1.1.3",
-        "@radix-ui/react-toggle": "^1.1.2",
-        "@radix-ui/react-toggle-group": "^1.1.2",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-toggle-group": "^1.1.11",
        "@radix-ui/react-tooltip": "^1.2.8",
        "@tailwindcss/postcss": "^4.1.14",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
-        "date-fns": "*",
+        "date-fns": "^4.1.0",
        "embla-carousel-react": "^8.6.0",
        "input-otp": "^1.4.2",
        "lucide-react": "^0.487.0",
@@ -56,15 +57,16 @@
        "next-themes": "^0.4.6",
        "qrcode": "*",
        "react": "^19.2.0",
-        "react-day-picker": "^8.10.1",
+        "react-day-picker": "^9.11.1",
        "react-dom": "^19.2.0",
-        "react-hook-form": "^7.55.0",
-        "react-resizable-panels": "^2.1.7",
-        "recharts": "^2.15.2",
-        "sonner": "^2.0.3",
+        "react-hook-form": "^7.65.0",
+        "react-resizable-panels": "^2.1.9",
+        "recharts": "^2.15.4",
+        "sonner": "^2.0.7",
        "tailwind-merge": "^3.3.1",
        "tailwindcss-animate": "^1.0.7",
-        "vaul": "^1.1.2"
+        "vaul": "^1.1.2",
+        "zod": "^4.1.12"
    },
    "devDependencies": {
        "@tailwindcss/vite": "^4.1.14",
--- a/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/layout.tsx
--- a/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/page.tsx
--- a/crop-x/src/app/(app)/agricultural-asset/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/layout.tsx
--- a/crop-x/src/app/(app)/agricultural-asset/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/page.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/archive/machinery-entry/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/archive/machinery-entry/page.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/archive/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/archive/page.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/error.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/error.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/layout.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/loading.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/loading.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/monitoring/real-time-location-tracking/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/monitoring/real-time-location-tracking/page.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/page.tsx
--- a/crop-x/src/app/(app)/agricultural-machinery/scheduling/task-assignment/page.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/scheduling/task-assignment/page.tsx
--- a/crop-x/src/app/(app)/ai-crop-model/layout.tsx
+++ b/crop-x/src/app/(app)/ai-crop-model/layout.tsx
--- a/crop-x/src/app/(app)/ai-crop-model/page.tsx
+++ b/crop-x/src/app/(app)/ai-crop-model/page.tsx
--- a/crop-x/src/app/(app)/central-config/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/layout.tsx
@@ -12,18 +12,23 @@ const centralConfigData = {
      icon: "🏢",
      items: [
        {
-          title: "租户创建管理",
-          url: "/central-config/tenant-management/tenant-creation",
+          title: "企业审核",
+          url: "/central-config/tenant-management/enterprise-audit",
          isActive: false
        },
        {
-          title: "租户配置管理",
-          url: "/central-config/tenant-management/tenant-configuration",
+          title: "审核历史",
+          url: "/central-config/tenant-management/audit-history",
          isActive: false
        },
        {
-          title: "租户授权管理",
-          url: "/central-config/tenant-management/tenant-authorization",
+          title: "企业信息",
+          url: "/central-config/tenant-management/enterprise-info",
+          isActive: false
+        },
+        {
+          title: "平台用户管理",
+          url: "/central-config/tenant-management/platform-user-management",
          isActive: false
        }
      ]
@@ -34,18 +39,23 @@ const centralConfigData = {
      icon: "👥",
      items: [
        {
-          title: "用户账号管理",
-          url: "/central-config/user-management/user-account-management",
+          title: "员工管理",
+          url: "/central-config/user-management/employee-management",
          isActive: false
        },
        {
-          title: "角色权限管理",
-          url: "/central-config/user-management/role-permission-management",
+          title: "角色管理",
+          url: "/central-config/user-management/role-management",
          isActive: false
        },
        {
-          title: "用户行为跟踪",
-          url: "/central-config/user-management/user-behavior-tracking",
+          title: "菜单管理",
+          url: "/central-config/user-management/menu-management",
+          isActive: false
+        },
+        {
+          title: "权限配置管理",
+          url: "/central-config/user-management/permission-config",
          isActive: false
        }
      ]
@@ -56,40 +66,45 @@ const centralConfigData = {
      icon: "🔧",
      items: [
        {
-          title: "基础配置管理",
-          url: "/central-config/system-parameters/basic-configuration",
+          title: "系统设置",
+          url: "/central-config/system-parameters/system-settings",
          isActive: false
        },
        {
-          title: "业务规则设置",
-          url: "/central-config/system-parameters/business-rule-settings",
+          title: "分类字典",
+          url: "/central-config/system-parameters/category-dictionary",
          isActive: false
        },
        {
-          title: "接口配置管理",
-          url: "/central-config/system-parameters/interface-configuration",
+          title: "数据字典",
+          url: "/central-config/system-parameters/data-dictionary",
          isActive: false
        }
      ]
    },
    {
      title: "系统监控",
-      url: "/central-config/system-monitoring",
+      url: "/central-config/system-monitor",
      icon: "📈",
      items: [
        {
-          title: "性能监控管理",
-          url: "/central-config/system-monitoring/performance-monitoring",
+          title: "登录日志",
+          url: "/central-config/system-monitor/login-log",
          isActive: false
        },
        {
-          title: "日志管理",
-          url: "/central-config/system-monitoring/log-management",
+          title: "操作日志",
+          url: "/central-config/system-monitor/operation-log",
          isActive: false
        },
        {
-          title: "异常处理管理",
-          url: "/central-config/system-monitoring/exception-handling",
+          title: "性能监控",
+          url: "/central-config/system-monitor/performance-monitor",
+          isActive: false
+        },
+        {
+          title: "网络日志",
+          url: "/central-config/system-monitor/network-log",
          isActive: false
        }
      ]
@@ -99,24 +114,19 @@ const centralConfigData = {
      url: "/central-config/message-center",
      icon: "📨",
      items: [
-        {
-          title: "消息推送管理",
-          url: "/central-config/message-center/message-push-management",
-          isActive: false
-        },
        {
          title: "消息发送",
          url: "/central-config/message-center/message-send",
          isActive: false
        },
        {
-          title: "通知设置管理",
-          url: "/central-config/message-center/notification-settings",
+          title: "消息模版",
+          url: "/central-config/message-center/message-template",
          isActive: false
        },
        {
-          title: "反馈管理",
-          url: "/central-config/message-center/feedback-management",
+          title: "消息日志",
+          url: "/central-config/message-center/message-log",
          isActive: false
        }
      ]
--- a/crop-x/src/app/(app)/central-config/message-center/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/message-center/layout.tsx
--- a/crop-x/src/app/(app)/central-config/message-center/message-log/page.tsx
+++ b/crop-x/src/app/(app)/central-config/message-center/message-log/page.tsx
@@ -0,0 +1,8 @@
+export default function MessageLogPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">消息日志</h1>
+      <p>消息日志管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/message-center/message-send/page.tsx
+++ b/crop-x/src/app/(app)/central-config/message-center/message-send/page.tsx
--- a/crop-x/src/app/(app)/central-config/message-center/message-template/page.tsx
+++ b/crop-x/src/app/(app)/central-config/message-center/message-template/page.tsx
@@ -0,0 +1,8 @@
+export default function MessageTemplatePage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">消息模版</h1>
+      <p>消息模版管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/message-center/page.tsx
+++ b/crop-x/src/app/(app)/central-config/message-center/page.tsx
--- a/crop-x/src/app/(app)/central-config/page.tsx
+++ b/crop-x/src/app/(app)/central-config/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-monitor/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/layout.tsx
@@ -0,0 +1,11 @@
+export default function SystemMonitorLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="system-monitor-layout">
+      {children}
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitor/login-log/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/login-log/page.tsx
@@ -0,0 +1,8 @@
+export default function LoginLogPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">登录日志</h1>
+      <p>登录日志管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitor/network-log/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/network-log/page.tsx
@@ -0,0 +1,8 @@
+export default function NetworkLogPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">网络日志</h1>
+      <p>网络日志管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitor/operation-log/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/operation-log/page.tsx
@@ -0,0 +1,8 @@
+export default function OperationLogPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">操作日志</h1>
+      <p>操作日志管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitor/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/page.tsx
@@ -0,0 +1,8 @@
+export default function SystemMonitorPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">系统监控</h1>
+      <p>系统监控主页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitor/performance-monitor/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitor/performance-monitor/page.tsx
@@ -0,0 +1,8 @@
+export default function PerformanceMonitorPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">性能监控</h1>
+      <p>性能监控管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-monitoring/exception-handling/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitoring/exception-handling/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-monitoring/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitoring/layout.tsx
--- a/crop-x/src/app/(app)/central-config/system-monitoring/log-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitoring/log-management/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-monitoring/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitoring/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-monitoring/performance-monitoring/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-monitoring/performance-monitoring/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/basic-configuration/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/basic-configuration/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/business-rule-settings/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/business-rule-settings/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/category-dictionary/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/category-dictionary/page.tsx
@@ -0,0 +1,8 @@
+export default function CategoryDictionaryPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">分类字典</h1>
+      <p>分类字典管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-parameters/data-dictionary/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/data-dictionary/page.tsx
@@ -0,0 +1,8 @@
+export default function DataDictionaryPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">数据字典</h1>
+      <p>数据字典管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/system-parameters/interface-configuration/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/interface-configuration/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/layout.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/page.tsx
--- a/crop-x/src/app/(app)/central-config/system-parameters/system-settings/page.tsx
+++ b/crop-x/src/app/(app)/central-config/system-parameters/system-settings/page.tsx
@@ -0,0 +1,8 @@
+export default function SystemSettingsPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">系统设置</h1>
+      <p>系统设置管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/audit-history/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/audit-history/page.tsx
@@ -0,0 +1,8 @@
+export default function AuditHistoryPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">审核历史</h1>
+      <p>审核历史记录管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/AuditStatsCard.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/AuditStatsCard.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Enterprise, AuditStatus } from '@/types/user-management'
+
+interface AuditStatsCardProps {
+  enterprises: Enterprise[]
+}
+
+export function AuditStatsCard({ enterprises }: AuditStatsCardProps) {
+  const stats = [
+    {
+      label: '待审核',
+      value: enterprises.filter(e => e.auditStatus === 'pending').length,
+      color: 'text-yellow-600',
+      bg: 'bg-yellow-100',
+    },
+    {
+      label: '已通过',
+      value: enterprises.filter(e => e.auditStatus === 'approved').length,
+      color: 'text-green-600',
+      bg: 'bg-green-100',
+    },
+    {
+      label: '已驳回',
+      value: enterprises.filter(e => e.auditStatus === 'rejected').length,
+      color: 'text-red-600',
+      bg: 'bg-red-100',
+    },
+    {
+      label: '总企业数',
+      value: enterprises.length,
+      color: 'text-blue-600',
+      bg: 'bg-blue-100',
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {stats.map((stat, index) => (
+        <Card key={index} className="p-4">
+          <div className="text-sm text-muted-foreground">{stat.label}</div>
+          <div className={`mt-2 ${stat.color}`}>{stat.value}</div>
+        </Card>
+      ))}
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseBankInfo.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseBankInfo.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { Label } from '@/components/ui/label'
+import { Image as ImageIcon } from 'lucide-react'
+import { Enterprise } from '@/types/user-management'
+
+interface EnterpriseBankInfoProps {
+  enterprise: Enterprise
+}
+
+export function EnterpriseBankInfo({ enterprise }: EnterpriseBankInfoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <Label>银行账号</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.bankAccount ? (
+              <code className="text-sm font-mono">
+                {enterprise.bankAccount}
+              </code>
+            ) : '-'}
+          </div>
+        </div>
+        <div>
+          <Label>开户行</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.bankName || '-'}
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>开户行全称</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.bankFullName || '-'}
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>开户行地址</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.bankAddress || '-'}
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>开户许可证</Label>
+          <div className="mt-2">
+            {enterprise.bankLicense ? (
+              <div className="border rounded-lg p-2 inline-block">
+                <img
+                  src={enterprise.bankLicense}
+                  alt="开户许可证"
+                  className="w-64 h-auto"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-muted-foreground p-4 border-2 border-dashed rounded-lg">
+                <ImageIcon className="w-6 h-6" />
+                <span>未上传</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseBasicInfo.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseBasicInfo.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { Label } from '@/components/ui/label'
+import { Enterprise } from '@/types/user-management'
+
+interface EnterpriseBasicInfoProps {
+  enterprise: Enterprise
+}
+
+export function EnterpriseBasicInfo({ enterprise }: EnterpriseBasicInfoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <Label>企业名称</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">{enterprise.name}</div>
+        </div>
+        <div>
+          <Label>企业类型</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">{enterprise.type}</div>
+        </div>
+        <div>
+          <Label>所在地区</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.province} {enterprise.city} {enterprise.district}
+          </div>
+        </div>
+        <div>
+          <Label>详细地址</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">{enterprise.address}</div>
+        </div>
+        <div>
+          <Label>登记人</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">{enterprise.registrant}</div>
+        </div>
+        <div>
+          <Label>联系电话</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">{enterprise.contactPhone}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseDetailDialog.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseDetailDialog.tsx
@@ -0,0 +1,192 @@
+'use client'
+
+import { useState } from 'react'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Card } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Building, FileText, CreditCard, User, CheckCircle, XCircle } from 'lucide-react'
+import { Enterprise, AuditStatus } from '@/types/user-management'
+import { EnterpriseBasicInfo } from './EnterpriseBasicInfo'
+import { EnterpriseOtherInfo } from './EnterpriseOtherInfo'
+import { EnterpriseBankInfo } from './EnterpriseBankInfo'
+import { EnterpriseLegalInfo } from './EnterpriseLegalInfo'
+
+interface EnterpriseDetailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  enterprise: Enterprise | null
+  onApprove: (auditReason: string) => void
+  onReject: (auditReason: string) => void
+}
+
+export function EnterpriseDetailDialog({
+  open,
+  onOpenChange,
+  enterprise,
+  onApprove,
+  onReject
+}: EnterpriseDetailDialogProps) {
+  const [auditReason, setAuditReason] = useState('')
+
+  const getAuditStatusBadge = (status: AuditStatus) => {
+    switch (status) {
+      case 'pending':
+        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>
+      case 'approved':
+        return <Badge className="bg-green-100 text-green-700">已通过</Badge>
+      case 'rejected':
+        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>
+      default:
+        return <Badge>{status}</Badge>
+    }
+  }
+
+  const handleApprove = () => {
+    onApprove(auditReason)
+    setAuditReason('')
+  }
+
+  const handleReject = () => {
+    onReject(auditReason)
+    setAuditReason('')
+  }
+
+  const handleClose = () => {
+    onOpenChange(false)
+    setAuditReason('')
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl max-h-[90vh]">
+        <DialogHeader>
+          <div className="flex items-center justify-between pr-8">
+            <DialogTitle>企业详情审核</DialogTitle>
+            {enterprise && getAuditStatusBadge(enterprise.auditStatus)}
+          </div>
+          <DialogDescription className="sr-only">
+            查看企业的详细信息和审核状态
+          </DialogDescription>
+        </DialogHeader>
+        {enterprise && (
+          <ScrollArea className="max-h-[calc(90vh-200px)]">
+            <Tabs defaultValue="basic" className="space-y-4">
+              <TabsList className="grid grid-cols-4 w-full">
+                <TabsTrigger value="basic">
+                  <Building className="w-4 h-4 mr-2" />
+                  基本信息
+                </TabsTrigger>
+                <TabsTrigger value="other">
+                  <FileText className="w-4 h-4 mr-2" />
+                  其他信息
+                </TabsTrigger>
+                <TabsTrigger value="bank">
+                  <CreditCard className="w-4 h-4 mr-2" />
+                  开户信息
+                </TabsTrigger>
+                <TabsTrigger value="legal">
+                  <User className="w-4 h-4 mr-2" />
+                  法人信息
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="basic">
+                <EnterpriseBasicInfo enterprise={enterprise} />
+              </TabsContent>
+
+              <TabsContent value="other">
+                <EnterpriseOtherInfo enterprise={enterprise} />
+              </TabsContent>
+
+              <TabsContent value="bank">
+                <EnterpriseBankInfo enterprise={enterprise} />
+              </TabsContent>
+
+              <TabsContent value="legal">
+                <EnterpriseLegalInfo enterprise={enterprise} />
+              </TabsContent>
+            </Tabs>
+
+            {/* 审核信息 */}
+            <div className="mt-6 pt-6 border-t">
+              <h4 className="mb-4 font-bold">审核信息</h4>
+              <Card className="p-6 bg-gray-50 border">
+                <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+                  <div>
+                    <Label className="text-xs">提交时间</Label>
+                    <div className="mt-1.5 text-base">
+                      {new Date(enterprise.createdAt).toLocaleString('zh-CN')}
+                    </div>
+                  </div>
+                  {enterprise.auditTime && (
+                    <div>
+                      <Label className="text-xs">审核时间</Label>
+                      <div className="mt-1.5 text-base">
+                        {new Date(enterprise.auditTime).toLocaleString('zh-CN')}
+                      </div>
+                    </div>
+                  )}
+                  {enterprise.auditor && (
+                    <div>
+                      <Label className="text-xs">审核人</Label>
+                      <div className="mt-1.5 text-base">
+                        {enterprise.auditor}
+                      </div>
+                    </div>
+                  )}
+                  {enterprise.auditReason && (
+                    <div className="col-span-2 pt-4 mt-2 border-t">
+                      <Label className="text-xs">审核意见</Label>
+                      <div className="mt-1.5 text-base">
+                        {enterprise.auditReason}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </Card>
+
+              {/* 审核操作区 - 仅待审核状态显示 */}
+              {enterprise.auditStatus === 'pending' && (
+                <div className="mt-6">
+                  <Label>审核意见</Label>
+                  <Textarea
+                    value={auditReason}
+                    onChange={(e) => setAuditReason(e.target.value)}
+                    rows={3}
+                    placeholder="请填写审核意见（驳回时必填）..."
+                    className="mt-2"
+                  />
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        )}
+        <DialogFooter className="border-t pt-4">
+          <Button variant="outline" onClick={handleClose}>
+            关闭
+          </Button>
+          {enterprise?.auditStatus === 'pending' && (
+            <>
+              <Button
+                variant="destructive"
+                onClick={handleReject}
+              >
+                <XCircle className="w-4 h-4 mr-2" />
+                驳回
+              </Button>
+              <Button onClick={handleApprove}>
+                <CheckCircle className="w-4 h-4 mr-2" />
+                通过
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseLegalInfo.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseLegalInfo.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { Label } from '@/components/ui/label'
+import { Image as ImageIcon } from 'lucide-react'
+import { Enterprise } from '@/types/user-management'
+
+interface EnterpriseLegalInfoProps {
+  enterprise: Enterprise
+}
+
+export function EnterpriseLegalInfo({ enterprise }: EnterpriseLegalInfoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-6">
+        <div>
+          <Label>法人名称</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.legalPerson || '-'}
+          </div>
+        </div>
+        <div>
+          <Label>身份证正面</Label>
+          <div className="mt-2">
+            {enterprise.idCardFront ? (
+              <div className="border rounded-lg p-2 inline-block">
+                <img
+                  src={enterprise.idCardFront}
+                  alt="身份证正面"
+                  className="w-80 h-auto"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-muted-foreground p-4 border-2 border-dashed rounded-lg">
+                <ImageIcon className="w-6 h-6" />
+                <span>未上传</span>
+              </div>
+            )}
+          </div>
+        </div>
+        <div>
+          <Label>身份证反面</Label>
+          <div className="mt-2">
+            {enterprise.idCardBack ? (
+              <div className="border rounded-lg p-2 inline-block">
+                <img
+                  src={enterprise.idCardBack}
+                  alt="身份证反面"
+                  className="w-80 h-auto"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-muted-foreground p-4 border-2 border-dashed rounded-lg">
+                <ImageIcon className="w-6 h-6" />
+                <span>未上传</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseOtherInfo.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseOtherInfo.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { Label } from '@/components/ui/label'
+import { Image as ImageIcon } from 'lucide-react'
+import { Enterprise } from '@/types/user-management'
+
+interface EnterpriseOtherInfoProps {
+  enterprise: Enterprise
+}
+
+export function EnterpriseOtherInfo({ enterprise }: EnterpriseOtherInfoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <Label>公司规模</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.companySize || '-'}
+          </div>
+        </div>
+        <div>
+          <Label>注册资本</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.registeredCapital || '-'}
+          </div>
+        </div>
+        <div>
+          <Label>成立时间</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.establishmentDate || '-'}
+          </div>
+        </div>
+        <div>
+          <Label>发票类型</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.invoiceType || '-'}
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>社会信用代码</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            <code className="text-sm font-mono">
+              {enterprise.socialCreditCode}
+            </code>
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>经营范围</Label>
+          <div className="field-value mt-1 p-2 bg-gray-50 rounded">
+            {enterprise.businessScope || '-'}
+          </div>
+        </div>
+        <div className="col-span-2">
+          <Label>营业执照</Label>
+          <div className="mt-2">
+            {enterprise.businessLicense ? (
+              <div className="border rounded-lg p-2 inline-block">
+                <img
+                  src={enterprise.businessLicense}
+                  alt="营业执照"
+                  className="w-64 h-auto"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-muted-foreground p-4 border-2 border-dashed rounded-lg">
+                <ImageIcon className="w-6 h-6" />
+                <span>未上传</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseTable.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/EnterpriseTable.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Eye } from 'lucide-react'
+import { Enterprise, AuditStatus } from '@/types/user-management'
+
+interface EnterpriseTableProps {
+  enterprises: Enterprise[]
+  onViewDetail: (enterprise: Enterprise) => void
+}
+
+export function EnterpriseTable({ enterprises, onViewDetail }: EnterpriseTableProps) {
+  const getAuditStatusBadge = (status: AuditStatus) => {
+    switch (status) {
+      case 'pending':
+        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>
+      case 'approved':
+        return <Badge className="bg-green-100 text-green-700">已通过</Badge>
+      case 'rejected':
+        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>
+      default:
+        return <Badge>{status}</Badge>
+    }
+  }
+
+  return (
+    <Card>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>企业名称</TableHead>
+            <TableHead>企业类型</TableHead>
+            <TableHead>社会信用代码</TableHead>
+            <TableHead>法人</TableHead>
+            <TableHead>所在地区</TableHead>
+            <TableHead>审核状态</TableHead>
+            <TableHead>提交时间</TableHead>
+            <TableHead>操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {enterprises.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
+                暂无数据
+              </TableCell>
+            </TableRow>
+          ) : (
+            enterprises.map((enterprise) => (
+              <TableRow key={enterprise.id}>
+                <TableCell>{enterprise.name}</TableCell>
+                <TableCell className="text-muted-foreground">{enterprise.type}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  <code className="text-xs">{enterprise.socialCreditCode}</code>
+                </TableCell>
+                <TableCell>{enterprise.legalPerson || '-'}</TableCell>
+                <TableCell>{`${enterprise.province} ${enterprise.city}`}</TableCell>
+                <TableCell>{getAuditStatusBadge(enterprise.auditStatus)}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  {new Date(enterprise.createdAt).toLocaleDateString('zh-CN')}
+                </TableCell>
+                <TableCell>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onViewDetail(enterprise)}
+                  >
+                    <Eye className="w-4 h-4 mr-1" />
+                    查看
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </Card>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/SearchAndFilter.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/SearchAndFilter.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Search } from 'lucide-react'
+
+interface SearchAndFilterProps {
+  searchKeyword: string
+  onSearchChange: (value: string) => void
+  statusFilter: string
+  onStatusFilterChange: (value: string) => void
+}
+
+export function SearchAndFilter({
+  searchKeyword,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange
+}: SearchAndFilterProps) {
+  return (
+    <Card className="p-4">
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="搜索企业名称、信用代码、登记人..."
+              value={searchKeyword}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+          <SelectTrigger className="w-40">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            <SelectItem value="pending">待审核</SelectItem>
+            <SelectItem value="approved">已通过</SelectItem>
+            <SelectItem value="rejected">已驳回</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </Card>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/index.ts
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/components/index.ts
@@ -0,0 +1,8 @@
+export { AuditStatsCard } from './AuditStatsCard'
+export { SearchAndFilter } from './SearchAndFilter'
+export { EnterpriseTable } from './EnterpriseTable'
+export { EnterpriseDetailDialog } from './EnterpriseDetailDialog'
+export { EnterpriseBasicInfo } from './EnterpriseBasicInfo'
+export { EnterpriseOtherInfo } from './EnterpriseOtherInfo'
+export { EnterpriseBankInfo } from './EnterpriseBankInfo'
+export { EnterpriseLegalInfo } from './EnterpriseLegalInfo'
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-audit/page.tsx
@@ -0,0 +1,255 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { toast } from 'sonner'
+import {
+  AuditStatsCard,
+  SearchAndFilter,
+  EnterpriseTable,
+  EnterpriseDetailDialog
+} from './components'
+import { Enterprise, AuditStatus } from '@/types/user-management'
+
+export default function EnterpriseAuditPage() {
+  const [enterprises, setEnterprises] = useState<Enterprise[]>([])
+  const [searchKeyword, setSearchKeyword] = useState('')
+  const [statusFilter, setStatusFilter] = useState<string>('all')
+  const [showDetailDialog, setShowDetailDialog] = useState(false)
+  const [selectedEnterprise, setSelectedEnterprise] = useState<Enterprise | null>(null)
+
+  useEffect(() => {
+    loadEnterprises()
+  }, [])
+
+  const loadEnterprises = () => {
+    const data = localStorage.getItem('smart_agriculture_enterprises')
+    if (data) {
+      setEnterprises(JSON.parse(data))
+    } else {
+      // 初始化示例数据
+      const mockEnterprises: Enterprise[] = [
+        {
+          id: 'ent-1',
+          name: '绿野农业科技有限公司',
+          type: '有限责任公司',
+          province: '北京市',
+          city: '海淀区',
+          district: '中关村街道',
+          companySize: '50-200人',
+          registeredCapital: '1000万元',
+          establishmentDate: '2020-03-15',
+          invoiceType: '增值税专用发票',
+          socialCreditCode: '91110000123456789X',
+          businessScope: '农业技术开发、技术咨询、技术服务；销售机械设备、电子产品。',
+          bankAccount: '1234567890123456789',
+          bankName: '中国工商银行',
+          bankFullName: '中国工商银行股份有限公司北京中关村支行',
+          bankAddress: '北京市海淀区中关村大街1号',
+          legalPerson: '张伟',
+          registrant: '张经理',
+          contactPhone: '13800138001',
+          address: '北京市海淀区中关村大街1号科技大厦',
+          status: 'active',
+          auditStatus: 'pending',
+          createdAt: '2024-10-10T08:00:00',
+          updatedAt: '2024-10-10T08:00:00',
+        },
+        {
+          id: 'ent-2',
+          name: '丰收现代农业集团',
+          type: '股份有限公司',
+          province: '江苏省',
+          city: '南京市',
+          district: '江宁区',
+          companySize: '200-500人',
+          registeredCapital: '5000万元',
+          establishmentDate: '2018-06-20',
+          invoiceType: '增值税专用发票',
+          socialCreditCode: '91320000987654321Y',
+          businessScope: '现代农业种植、农产品加工与销售、农业技术推广服务。',
+          bankAccount: '9876543210987654321',
+          bankName: '中国农业银行',
+          bankFullName: '中国农业银行股份有限公司南京江宁支行',
+          bankAddress: '江苏省南京市江宁区农业大道88号',
+          legalPerson: '李明',
+          registrant: '李总',
+          contactPhone: '13900139002',
+          address: '江苏省南京市江宁区农业大道88号',
+          status: 'active',
+          auditStatus: 'approved',
+          auditTime: '2024-10-08T14:30:00',
+          auditor: '系统管理员',
+          createdAt: '2024-10-05T10:00:00',
+          updatedAt: '2024-10-08T14:30:00',
+        },
+        {
+          id: 'ent-3',
+          name: '金穗农机服务中心',
+          type: '个人独资企业',
+          province: '山东省',
+          city: '济南市',
+          district: '历城区',
+          companySize: '1-50人',
+          registeredCapital: '200万元',
+          establishmentDate: '2021-09-10',
+          invoiceType: '增值税普通发票',
+          socialCreditCode: '91370000456789012Z',
+          businessScope: '农业机械租赁、维修服务、农机作业服务。',
+          bankAccount: '5555666677778888',
+          bankName: '中国建设银行',
+          bankFullName: '中国建设银行股份有限公司济南历城支行',
+          bankAddress: '山东省济南市历城区农机路66号',
+          legalPerson: '王刚',
+          registrant: '王主任',
+          contactPhone: '13700137003',
+          address: '山东省济南市历城区农机路66号',
+          status: 'inactive',
+          auditStatus: 'rejected',
+          auditReason: '资质材料不完整，请补充营业执照副本和法人身份证复印件',
+          auditTime: '2024-10-09T16:00:00',
+          auditor: '系统管理员',
+          createdAt: '2024-10-06T09:00:00',
+          updatedAt: '2024-10-09T16:00:00',
+        },
+      ];
+      localStorage.setItem('smart_agriculture_enterprises', JSON.stringify(mockEnterprises));
+      setEnterprises(mockEnterprises);
+    }
+  };
+
+  const filteredEnterprises = enterprises.filter(ent => {
+    const matchKeyword = !searchKeyword ||
+      ent.name.includes(searchKeyword) ||
+      ent.socialCreditCode.includes(searchKeyword) ||
+      ent.registrant.includes(searchKeyword);
+
+    const matchStatus = statusFilter === 'all' || ent.auditStatus === statusFilter;
+
+    return matchKeyword && matchStatus;
+  });
+
+  const handleViewDetail = (enterprise: Enterprise) => {
+    setSelectedEnterprise(enterprise);
+    setShowDetailDialog(true);
+  };
+
+  const handleApprove = (auditReason: string) => {
+    if (!selectedEnterprise) return;
+
+    const now = new Date().toISOString();
+    const updated = enterprises.map(ent =>
+      ent.id === selectedEnterprise.id
+        ? {
+            ...ent,
+            auditStatus: 'approved' as AuditStatus,
+            status: 'active' as const,
+            auditTime: now,
+            auditor: '系统管理员',
+            auditReason: auditReason || undefined,
+            updatedAt: now,
+          }
+        : ent
+    );
+
+    // 创建审核历史记录
+    const auditRecords = JSON.parse(localStorage.getItem('smart_agriculture_audit_records') || '[]');
+    const newRecord = {
+      id: `audit-${Date.now()}`,
+      enterpriseId: selectedEnterprise.id,
+      enterpriseName: selectedEnterprise.name,
+      auditType: 'register',
+      submitTime: selectedEnterprise.createdAt,
+      auditTime: now,
+      auditor: '系统管理员',
+      result: 'approved',
+      remarks: auditReason || '审核通过',
+    };
+    auditRecords.push(newRecord);
+    localStorage.setItem('smart_agriculture_audit_records', JSON.stringify(auditRecords));
+
+    setEnterprises(updated);
+    localStorage.setItem('smart_agriculture_enterprises', JSON.stringify(updated));
+    setShowDetailDialog(false);
+    toast.success('审核通过');
+  };
+
+  const handleReject = (auditReason: string) => {
+    if (!selectedEnterprise) return;
+    if (!auditReason.trim()) {
+      toast.error('请填写驳回原因');
+      return;
+    }
+
+    const now = new Date().toISOString();
+    const updated = enterprises.map(ent =>
+      ent.id === selectedEnterprise.id
+        ? {
+            ...ent,
+            auditStatus: 'rejected' as AuditStatus,
+            status: 'inactive' as const,
+            auditTime: now,
+            auditor: '系统管理员',
+            auditReason: auditReason,
+            updatedAt: now,
+          }
+        : ent
+    );
+
+    // 创建审核历史记录
+    const auditRecords = JSON.parse(localStorage.getItem('smart_agriculture_audit_records') || '[]');
+    const newRecord = {
+      id: `audit-${Date.now()}`,
+      enterpriseId: selectedEnterprise.id,
+      enterpriseName: selectedEnterprise.name,
+      auditType: 'register',
+      submitTime: selectedEnterprise.createdAt,
+      auditTime: now,
+      auditor: '系统管理员',
+      result: 'rejected',
+      reason: auditReason,
+      remarks: '审核驳回',
+    };
+    auditRecords.push(newRecord);
+    localStorage.setItem('smart_agriculture_audit_records', JSON.stringify(auditRecords));
+
+    setEnterprises(updated);
+    localStorage.setItem('smart_agriculture_enterprises', JSON.stringify(updated));
+    setShowDetailDialog(false);
+    toast.success('已驳回');
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h2 className="text-green-800">企业审核</h2>
+        <p className="text-muted-foreground">管理企业注册与变更审核流程</p>
+      </div>
+
+      {/* 统计卡片 */}
+      <AuditStatsCard enterprises={enterprises} />
+
+      {/* 搜索和筛选 */}
+      <SearchAndFilter
+        searchKeyword={searchKeyword}
+        onSearchChange={setSearchKeyword}
+        statusFilter={statusFilter}
+        onStatusFilterChange={setStatusFilter}
+      />
+
+      {/* 企业列表 */}
+      <EnterpriseTable
+        enterprises={filteredEnterprises}
+        onViewDetail={handleViewDetail}
+      />
+
+      {/* 详情审核对话框 */}
+      <EnterpriseDetailDialog
+        open={showDetailDialog}
+        onOpenChange={setShowDetailDialog}
+        enterprise={selectedEnterprise}
+        onApprove={handleApprove}
+        onReject={handleReject}
+      />
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/enterprise-info/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/enterprise-info/page.tsx
@@ -0,0 +1,8 @@
+export default function EnterpriseInfoPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">企业信息</h1>
+      <p>企业信息管理页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/layout.tsx
--- a/crop-x/src/app/(app)/central-config/tenant-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/page.tsx
--- a/crop-x/src/app/(app)/central-config/tenant-management/platform-user-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/platform-user-management/page.tsx
@@ -0,0 +1,8 @@
+export default function PlatformUserManagementPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">平台用户管理</h1>
+      <p>平台用户管理功能页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/tenant-management/tenant-authorization/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/tenant-authorization/page.tsx
--- a/crop-x/src/app/(app)/central-config/tenant-management/tenant-configuration/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/tenant-configuration/page.tsx
--- a/crop-x/src/app/(app)/central-config/tenant-management/tenant-creation/page.tsx
+++ b/crop-x/src/app/(app)/central-config/tenant-management/tenant-creation/page.tsx
--- a/crop-x/src/app/(app)/central-config/user-management/employee-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/employee-management/page.tsx
@@ -0,0 +1,8 @@
+export default function EmployeeManagementPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">员工管理</h1>
+      <p>员工管理功能页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/user-management/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/layout.tsx
--- a/crop-x/src/app/(app)/central-config/user-management/menu-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/menu-management/page.tsx
@@ -0,0 +1,8 @@
+export default function MenuManagementPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">菜单管理</h1>
+      <p>菜单管理功能页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/user-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/page.tsx
--- a/crop-x/src/app/(app)/central-config/user-management/permission-config/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/permission-config/page.tsx
@@ -0,0 +1,8 @@
+export default function PermissionConfigPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">权限配置管理</h1>
+      <p>权限配置管理功能页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/user-management/role-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/role-management/page.tsx
@@ -0,0 +1,8 @@
+export default function RoleManagementPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">角色管理</h1>
+      <p>角色管理功能页面</p>
+    </div>
+  )
+}
--- a/crop-x/src/app/(app)/central-config/user-management/role-permission-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/role-permission-management/page.tsx
--- a/crop-x/src/app/(app)/central-config/user-management/user-account-management/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/user-account-management/page.tsx
--- a/crop-x/src/app/(app)/central-config/user-management/user-behavior-tracking/page.tsx
+++ b/crop-x/src/app/(app)/central-config/user-management/user-behavior-tracking/page.tsx
--- a/crop-x/src/app/(app)/farming-operation/layout.tsx
+++ b/crop-x/src/app/(app)/farming-operation/layout.tsx
--- a/crop-x/src/app/(app)/farming-operation/page.tsx
+++ b/crop-x/src/app/(app)/farming-operation/page.tsx
--- a/crop-x/src/app/(app)/land-information/layout.tsx
+++ b/crop-x/src/app/(app)/land-information/layout.tsx
--- a/crop-x/src/app/(app)/land-information/page.tsx
+++ b/crop-x/src/app/(app)/land-information/page.tsx
--- a/crop-x/src/app/(app)/layout.tsx
+++ b/crop-x/src/app/(app)/layout.tsx
@@ -0,0 +1,16 @@
+import {Navbar}  from "@/components/layouts/Navbar"
+import '@/styles/globals.css'
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+      <div>
+        <Navbar></Navbar>
+        {/* 布局 UI */}
+        {/* 将 children 放在您希望渲染页面或嵌套布局的位置 */}
+        <main>{children}</main>
+      </div>
+  )
+}
--- a/crop-x/src/app/(app)/water-fertilizer-control/layout.tsx
+++ b/crop-x/src/app/(app)/water-fertilizer-control/layout.tsx
--- a/crop-x/src/app/(app)/water-fertilizer-control/page.tsx
+++ b/crop-x/src/app/(app)/water-fertilizer-control/page.tsx
--- a/crop-x/src/app/layout.tsx
+++ b/crop-x/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import {Navbar}  from "../components/layouts/Navbar"
+
 import '@/styles/globals.css'
 export default function DashboardLayout({
  children,
@@ -8,10 +8,9 @@ export default function DashboardLayout({
  return (
    <html lang="en">
      <body>
-      <Navbar></Navbar>
        {/* 布局 UI */}
        {/* 将 children 放在您希望渲染页面或嵌套布局的位置 */}
-        <main>{children}</main>
+        {children}
      </body>
    </html>
  )
--- a/crop-x/src/components/layouts/Navbar.tsx
+++ b/crop-x/src/components/layouts/Navbar.tsx
@@ -210,6 +210,9 @@ export function Navbar({ navbar }: NavbarProps) {
                    <Button asChild>
                      <a href={auth.signup.url}>{auth.signup.title}</a>
                    </Button>
+                    <Button asChild>
+                      系统管理员
+                    </Button>
                  </div>
                </div>
              </SheetContent>
--- a/crop-x/src/components/ui/alert-dialog.tsx
+++ b/crop-x/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+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"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/crop-x/src/components/ui/alert.tsx
+++ b/crop-x/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+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 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
--- a/crop-x/src/components/ui/aspect-ratio.tsx
+++ b/crop-x/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
--- a/crop-x/src/components/ui/avatar.tsx
+++ b/crop-x/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/crop-x/src/components/ui/badge.tsx
+++ b/crop-x/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/crop-x/src/components/ui/button-group.tsx
+++ b/crop-x/src/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 has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    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 shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        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,
+}
--- a/crop-x/src/components/ui/calendar.tsx
+++ b/crop-x/src/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:2rem] [[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(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", 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 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
--- a/crop-x/src/components/ui/card.tsx
+++ b/crop-x/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/crop-x/src/components/ui/carousel.tsx
+++ b/crop-x/src/components/ui/carousel.tsx
@@ -0,0 +1,260 @@
+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
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    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
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
--- a/crop-x/src/components/ui/chart.tsx
+++ b/crop-x/src/components/ui/chart.tsx
@@ -0,0 +1,367 @@
+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
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.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 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+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
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    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
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload
+            .filter((item) => item.type !== "none")
+            .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(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    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="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )
+            })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            )
+          })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// 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,
+}
--- a/crop-x/src/components/ui/checkbox.tsx
+++ b/crop-x/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("grid place-content-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/crop-x/src/components/ui/command.tsx
+++ b/crop-x/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/crop-x/src/components/ui/context-menu.tsx
+++ b/crop-x/src/components/ui/context-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
--- a/crop-x/src/components/ui/dialog.tsx
+++ b/crop-x/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/crop-x/src/components/ui/drawer.tsx
+++ b/crop-x/src/components/ui/drawer.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/crop-x/src/components/ui/empty.tsx
+++ b/crop-x/src/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 text-balance rounded-lg border-dashed p-6 text-center 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(
+  "mb-2 flex shrink-0 items-center justify-center [&_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 min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
--- a/crop-x/src/components/ui/field.tsx
+++ b/crop-x/src/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 data-[invalid=true]:text-destructive flex w-full gap-3",
+  {
+    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]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]: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 font-medium leading-snug 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 font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[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,
+}
--- a/crop-x/src/components/ui/form.tsx
+++ b/crop-x/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  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 | null>(null)
+
+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, formState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  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 | null>(null)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/crop-x/src/components/ui/hover-card.tsx
+++ b/crop-x/src/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/crop-x/src/components/ui/input-group.tsx
+++ b/crop-x/src/components/ui/input-group.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+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 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
+        "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]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+
+        // 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 select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    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":
+          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-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(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 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:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        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,
+}
--- a/crop-x/src/components/ui/input-otp.tsx
+++ b/crop-x/src/components/ui/input-otp.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/crop-x/src/components/ui/item.tsx
+++ b/crop-x/src/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 [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    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:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_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 font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "[&>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,
+}
--- a/Show More
+++ b/Show More